Turbolinks support in HappyFox Chat

Jul 14, 2017

4711

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.

<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>

Example HTML document:

<html>
<head>


<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>


</head>

<body></body>

</html>