Adding <script> to liquid - App interfering with my videos!? #Tidio Chat app

Solved
Tourist
9 1 3

Hi there,

 

[Attempt II - https://community.shopify.com/c/Technical-Q-A/How-to-add-logged-in-customer-data-to-app/m-p/581809#M... ]

 

I am opening a members shopify store (using the Narrative theme) & need a chat service to talk to logged in customers, so I installed Tidio Chat.
However, I don't want my customers to log-in to shopify, then log-in to Tidio to chat to me.
Tidio provides the following code to access log-in data (https://docs.tidiochat.com/#introduction):

 

document.tidioIdentify = {
  distinct_id: "unique_id", // Unique user ID in your system
  email: "contact_mail", // User email
  name: "John Doe", // Visitor name
  city: "Denver", // City
  country: "US" // Country
};

I added it to my Theme.min.js file & the "John Doe" info appears in Tidio Chat but is unable to pick-up logged in customers.

 

Then I tried adding this code (below) in the theme.liquid file above the <head> code. (#Inspired by @__cascadia - but without the execution..)

<script>
document.tidioIdentify = {
distinct_id: "{{ customer.id }}", // Unique user ID in your system
email: "{{ customer.email }}", // User email
name: "{{ customer.name }}", // Visitor name
city: "{{ customer_address.city }}", // City
country: "{{ customer_address.country }}" // Country
};
</script>

 

Now when a logged in customer chats to me, i can see their name & email, & reference that against my database software to see all their details / situation to resolve any issues that might arise. Hoooraaaay!!!...

 

...HOWEVER...[dun dun duuuuuuh]

 

Now when i press play on my videos, the screen scrolls up (quickly) to the top of the page, with the video playing below.
#Weird!
I finally (with alot of effort) figured out it was the Tidio code in my Theme.liquid - so i removed it.

No i have no clue how to re-add the Tidio code!? I really need tidio to automatically add logged in customers.

 

Has anyone got any ideas how i cud resolve this?

 

1.  I cud add the tidio code to another .liquid file but where?

or

2. I cud add it to my theme.liquid in a way that my videos won't keep scrolling to the top of the screen but how?

 

Ideas @__cascadia@Olek_-_Tidio?
- Olek i did ask Rafal but he seems busy.

 

Any help would be greatly appreciated!


Many thanks,
: Paddy

(Noob, Fighting for freedom from 9-5 ; )

 

 

 

[For reference - my THEME.LIQUID code]

 

{%- comment %}<locksmith:d928>{% endcomment -%}
{%- include 'locksmith' -%}
{%- comment %}</locksmith:d928>{% endcomment -%}

{% if
template.name == 'blog'
or template.name == 'collection'
or template.name == 'list-collections'
or template.name == 'search'
%}
{%- assign hide_footer = true -%}
{% endif %}

{%- comment %}
I ADDED MY CODE HERE - : PADDY aka PADSTER aka NOOB
{% endcomment -%}

<!doctype html>
<html class="supports-no-js {% if hide_footer %} site-footer--hidden{% endif %}" lang="{{ shop.locale }}">
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_primary }}">
<link rel="canonical" href="{{ canonical_url }}">

{% if settings.favicon != blank %}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{% endif %}

<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
</title>

{% if page_description %}
{%- comment %}<locksmith:cb69>{% endcomment -%}
{%- include 'locksmith-variables', locksmith_hiding_scope: 'resource' %}{% if locksmith_transparent %}<meta name="description" content="{{ page_description | escape }}">{% endif -%}
{%- comment %}original: <meta name="description" content="{{ page_description | escape }}">{%- endcomment %}
{%- comment %}</locksmith:cb69>{% endcomment -%}
{% endif %}

{% include 'social-meta-tags' %}

{{ content_for_header }}

{% include 'critical-css' %}
{% include 'load-css' %}

<script>
var theme = {
stylesheet: "{{ 'theme.scss.css' | asset_url }}",
strings: {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }},
addItemSuccess: {{ 'products.product.item_added_to_cart' | t | json }},
viewCart: {{ 'products.product.view_cart' | t | json }},
cartError: {{ 'cart.general.cart_error' | t | json }},
cartQuantityError: {{ 'cart.general.cart_quantity_error_html' | t: quantity: "[quantity]", title: "[title]" | json }},
regularPrice: {{ 'products.product.regular_price' | t | json }},
salePrice: {{ 'products.product.sale_price' | t | json }},
newsletter: {
blankError: {{ 'general.newsletter_form.blank_error' | t | json }},
invalidError: {{ 'general.newsletter_form.invalid_error' | t | json }}
},
map: {
zeroResults: {{ 'sections.map.address_no_results' | t | json }},
overQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
authError: {{ 'sections.map.auth_error_html' | t | json }},
addressError: {{ 'sections.map.address_error' | t | json }}
},
slideshow: {
loadSlideA11yString: {{ 'sections.slider.load_slide' | t: slide_number: '[slide_number]' | json }},
activeSlideA11yString: {{ 'sections.slider.active_slide' | t: slide_number: '[slide_number]' | json }}
}
},
isOnline: true,
moneyFormat: {{ shop.money_format | json }},
mediaQuerySmall: 750,
mediaQueryMedium: 990
};

{% if template.directory == 'customers' %}
theme.countryOptionTags = {{ all_country_option_tags | json}};
{% endif %}

document.documentElement.className = document.documentElement.className.replace('supports-no-js', '');
</script>

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>


</head>

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{% if template.name != blank %}{{ template.name }}{% else %}none{% endif %} data-animations">

<a class="visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>

{% section 'header' %}

<div class="main-content{% if template.name == blank %} main-content--no-template{% endif %}" data-drawer-push>
<div class="main-content__wrapper">
<main class="content-for-layout" id="MainContent" role="main">
{{ content_for_layout }}
</main>

{% section 'footer' %}
</div>
</div>

{% include 'cart-drawer' %}
<ul hidden>
<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
</ul>
{{ 'booster-page-speed-optimizer.js' | asset_url | script_tag }}
</body>
</html>

0 Likes
Highlighted

Success.

Tourist
9 1 3

Found out how to do it.

 

The script needed to be added just above </body>.
Rafal at Tidio is a superstar!!!!

Thanks guys.

 

: P


@Padster wrote:

Hi there,

 

[Attempt II - https://community.shopify.com/c/Technical-Q-A/How-to-add-logged-in-customer-data-to-app/m-p/581809#M... ]

 

I am opening a members shopify store (using the Narrative theme) & need a chat service to talk to logged in customers, so I installed Tidio Chat.
However, I don't want my customers to log-in to shopify, then log-in to Tidio to chat to me.
Tidio provides the following code to access log-in data (https://docs.tidiochat.com/#introduction):

 

document.tidioIdentify = {
  distinct_id: "unique_id", // Unique user ID in your system
  email: "contact_mail", // User email
  name: "John Doe", // Visitor name
  city: "Denver", // City
  country: "US" // Country
};

I added it to my Theme.min.js file & the "John Doe" info appears in Tidio Chat but is unable to pick-up logged in customers.

 

Then I tried adding this code (below) in the theme.liquid file above the <head> code. (#Inspired by @__cascadia - but without the execution..)

<script>
document.tidioIdentify = {
distinct_id: "{{ customer.id }}", // Unique user ID in your system
email: "{{ customer.email }}", // User email
name: "{{ customer.name }}", // Visitor name
city: "{{ customer_address.city }}", // City
country: "{{ customer_address.country }}" // Country
};
</script>

 

Now when a logged in customer chats to me, i can see their name & email, & reference that against my database software to see all their details / situation to resolve any issues that might arise. Hoooraaaay!!!...

 

...HOWEVER...[dun dun duuuuuuh]

 

Now when i press play on my videos, the screen scrolls up (quickly) to the top of the page, with the video playing below.
#Weird!
I finally (with alot of effort) figured out it was the Tidio code in my Theme.liquid - so i removed it.

No i have no clue how to re-add the Tidio code!? I really need tidio to automatically add logged in customers.

 

Has anyone got any ideas how i cud resolve this?

 

1.  I cud add the tidio code to another .liquid file but where?

or

2. I cud add it to my theme.liquid in a way that my videos won't keep scrolling to the top of the screen but how?

 

Ideas @__cascadia@Olek_-_Tidio?
- Olek i did ask Rafal but he seems busy.

 

Any help would be greatly appreciated!


Many thanks,
: Paddy

(Noob, Fighting for freedom from 9-5 ; )

 

 

 

[For reference - my THEME.LIQUID code]

 

{%- comment %}<locksmith:d928>{% endcomment -%}
{%- include 'locksmith' -%}
{%- comment %}</locksmith:d928>{% endcomment -%}

{% if
template.name == 'blog'
or template.name == 'collection'
or template.name == 'list-collections'
or template.name == 'search'
%}
{%- assign hide_footer = true -%}
{% endif %}

{%- comment %}
I ADDED MY CODE HERE - : PADDY aka PADSTER aka NOOB
{% endcomment -%}

<!doctype html>
<html class="supports-no-js {% if hide_footer %} site-footer--hidden{% endif %}" lang="{{ shop.locale }}">
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_primary }}">
<link rel="canonical" href="{{ canonical_url }}">

{% if settings.favicon != blank %}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{% endif %}

<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
</title>

{% if page_description %}
{%- comment %}<locksmith:cb69>{% endcomment -%}
{%- include 'locksmith-variables', locksmith_hiding_scope: 'resource' %}{% if locksmith_transparent %}<meta name="description" content="{{ page_description | escape }}">{% endif -%}
{%- comment %}original: <meta name="description" content="{{ page_description | escape }}">{%- endcomment %}
{%- comment %}</locksmith:cb69>{% endcomment -%}
{% endif %}

{% include 'social-meta-tags' %}

{{ content_for_header }}

{% include 'critical-css' %}
{% include 'load-css' %}

<script>
var theme = {
stylesheet: "{{ 'theme.scss.css' | asset_url }}",
strings: {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }},
addItemSuccess: {{ 'products.product.item_added_to_cart' | t | json }},
viewCart: {{ 'products.product.view_cart' | t | json }},
cartError: {{ 'cart.general.cart_error' | t | json }},
cartQuantityError: {{ 'cart.general.cart_quantity_error_html' | t: quantity: "[quantity]", title: "[title]" | json }},
regularPrice: {{ 'products.product.regular_price' | t | json }},
salePrice: {{ 'products.product.sale_price' | t | json }},
newsletter: {
blankError: {{ 'general.newsletter_form.blank_error' | t | json }},
invalidError: {{ 'general.newsletter_form.invalid_error' | t | json }}
},
map: {
zeroResults: {{ 'sections.map.address_no_results' | t | json }},
overQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
authError: {{ 'sections.map.auth_error_html' | t | json }},
addressError: {{ 'sections.map.address_error' | t | json }}
},
slideshow: {
loadSlideA11yString: {{ 'sections.slider.load_slide' | t: slide_number: '[slide_number]' | json }},
activeSlideA11yString: {{ 'sections.slider.active_slide' | t: slide_number: '[slide_number]' | json }}
}
},
isOnline: true,
moneyFormat: {{ shop.money_format | json }},
mediaQuerySmall: 750,
mediaQueryMedium: 990
};

{% if template.directory == 'customers' %}
theme.countryOptionTags = {{ all_country_option_tags | json}};
{% endif %}

document.documentElement.className = document.documentElement.className.replace('supports-no-js', '');
</script>

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>


</head>

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{% if template.name != blank %}{{ template.name }}{% else %}none{% endif %} data-animations">

<a class="visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>

{% section 'header' %}

<div class="main-content{% if template.name == blank %} main-content--no-template{% endif %}" data-drawer-push>
<div class="main-content__wrapper">
<main class="content-for-layout" id="MainContent" role="main">
{{ content_for_layout }}
</main>

{% section 'footer' %}
</div>
</div>

{% include 'cart-drawer' %}
<ul hidden>
<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
</ul>
{{ 'booster-page-speed-optimizer.js' | asset_url | script_tag }}
</body>
</html>


 

0 Likes