You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
Home > Personalization > Turbolinks support in HappyFox Chat
Turbolinks support in HappyFox Chat
print icon

HappyFox chat widget can support websites run by TurboLinks.

 

While using TurboLinks, contents of <body> tag gets replaced for every link visit in the application/website. Hence, one cannot add HappyFox Chat widget installation script inside <body> tag. If you add, there will be two widgets created in the page because TurboLinks caches page's body contents and any script inside <body> tag will be run twice - once when cached page loads and second, when actual page is loaded. 

 

To prevent this, we will add the widget installation script inside <head> tag like below. Note that we have wrapped the usual widget installation code inside "turbolinks:load" event handler. This is important for the widget to appear in all pages of website.

 

  <!--Start of HappyFox Live Chat Turbolink Script-->

  <script>
    document.addEventListener('turbolinks:load', function () {

      try {

        //do not leave this try-catch block

        window.HFCHAT_META.digested = false;
      } catch (error) {}

       

      //Here, copy paste the lines found between <script> and </script> 

      //in the widget installation script

    });

</script>
<!--End of HappyFox Live Chat Turbolink Script-->

 

 Example HTML document:

 

<html>
<head>

  <!--Start of HappyFox Live Chat Turbolink Script-->
  <script>
    document.addEventListener('turbolinks:load', function () {

      try {
        window.HFCHAT_META.digested = false;
      } catch (error) {}

       

      //copy pasted code from installation script found in 

      //https://happyfoxchat.com/a/settings/installation

      window.HFCHAT_CONFIG = {
         EMBED_TOKEN: "<Your Embed Token>",
         ACCESS_TOKEN: "<Your Access Token>",
         HOST_URL: "<Host URL>",
         ASSETS_URL: "<Assets URL>"
      };

     

      (function() {
         var scriptTag = document.createElement('script');
         scriptTag.type = 'text/javascript';
         scriptTag.async = true;
         scriptTag.src = window.HFCHAT_CONFIG.ASSETS_URL + '/js/widget-loader.js';

         var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(scriptTag, s);
      })();

    });

</script>
<!--End of HappyFox Live Chat Turbolink Script-->

</head>

<body></body>

</html>

 

Feedback
9 out of 11 found this helpful

scroll to top icon