Third party links trigger in head

[rutulritz]

Hi,

I have added third party's live chat script in the phtml file.

Here I am using below script to load

<script data-breeze>
    require([
        'jquery'
    ], function ($) {
          (window, document, 'script', 'https://testsite.chatcode.io/livechat');
    });
</script>

So above script is working on all pages with breeze and without breeze enabled.
But it is not loading for the turbolinks clicked pages.

Can you help me how can I fix this or implement it in proper way?

Thanks

[vovayatsyuk]

Some important thing is missing in your code. The current version of your code does nothing (with or without breeze).

[rutulritz]

Hi @vovayatsyuk ,

Here is my whole script code :

define([
    'jquery'
], function ($) {
    var verloopchat = function (config) {
        if (config.isenable) {
            (function (w, d, s, u) {
                w.Verloop = function (c) { w.Verloop._.push(c) }; w.Verloop._ = []; w.Verloop.url = u;
                var h = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true;
                j.src = 'https://kanmogroup.verloop.io/livechat/script.min.js';
                h.parentNode.insertBefore(j, h);
            })

                (window, document, 'script', 'https://kanmogroup.verloop.io/livechat');

            Verloop(function () {
                this.setRecipe(config.recipeid);
                if (config.customerdata.entity_id) {
                    this.setUserParams({
                        name: config.customerdata.firstname,
                        email: config.customerdata.email,
                        phone: config.customerdata.mobile_phone
                    });
                }
            });
        }
    };

    return verloopchat;
});

You can check here : https://eeupgrade.colehaan.co.id/men/performance/golf.html
How to reproduce :

• Navigate to above link
• now you will be able to see the chat icon wchich is loaded from the above script
• Now click on any category link from top megamenu.
• Here turbolinks enabled
• after finishing the chat is not loading

Thanks

[vovayatsyuk]

It's not working after the turbo visit because this code tries adding the script to the head. But turbo keeps the head from the previous page, and, as a result, you get 2 chat scripts in the head:

To fix the issue, move your script to the head, because the scripts from the head only ran once.

By the way, this is your script I found on the site:

<script data-breeze>
    require([
        'jquery'
    ], function ($) {
           (function (w, d, s, u) {
                w.Verloop = function (c) { w.Verloop._.push(c) }; w.Verloop._ = []; w.Verloop.url = u;
                var h = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true;
                j.src = 'https://kanmogroup.verloop.io/livechat/script.min.js';
                h.parentNode.insertBefore(j, h);
            })(window, document, 'script', 'https://kanmogroup.verloop.io/livechat');              
    });
</script>

[rutulritz]

Hi,

this above script only need to add in head?

[vovayatsyuk]

Yes. Additionally, I recommend you to use lazy scripts feature. This will improve your pagespeed score.

p.s. But if you want to reuse the same script for both Luma and Breeze, you can't do this.