Turbolinks support in HappyFox Chat

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>

  • 608
  • 14-Jul-2017
  • 45 Views