turbolinks-compatibility
turbolinks-compatibility copied to clipboard
reed
Happyfox Chat loading problem after language change
I have a problem integrating the Happyfox Chat widget on my website. The standard procedure is to add the following code at the bottom of the body-area on the website:
The problem is, that it is getting reloaded several times, when I change the language (via the I18n rails gem).
Does anybody know any solution to that problem?
Thanks!
@TehraniX: HappyFox Chat is one of the very few live chat tool that supports Rails Turbolinks.
To prevent widget reloading please refer https://support.happyfoxchat.com/kb/article/608-turbolinks-support-in-happyfox-chat
Option A: Installs widget in all the pages:
NOTE: This script should be added inside <head> of the document.
<head>
...
...
<!--Start of HappyFox Live Chat Turbolink Script-->
<script>
document.addEventListener('turbolinks:load', function () {
try {
window.HFCHAT_META.digested = false;
} catch (error) {}
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>
Option B - Install widget only in specific pages:
NOTE: This script should be added inside <body> of the document.
<body>
...
...
<script>
try {
window.HFCHAT_META.digested = false;
} catch (error) {}
</script>
<script>
if (!document.getElementById('hfc-frame')) {
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>
</body>
I was searching on happyFoxChat and ended here. and found this still open. make a global flag on 'window' so the code runs once per pagelaod.
this is what I have done for many kind of external scripts that I use in React: // notice the flag: 'HFC__INITIALIZED': // you can call addHappyFoxChat(chatToken, assetUrl); infinite times now :) you might customise the flag with md5 hashing for different languages.
const addScriptTag = (d, t) => {
const script = d.createElement('script');
script.async = true;
// script.src = s; <-- use this for refering to other libraries.
script.innerHTML = t;
return script;
};
const injectScript = (t, s) => {
const script = `
window.HFCHAT_CONFIG = {
EMBED_TOKEN: '${t}',
ASSETS_URL: '${s}',
};
(() => {
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);
})()`;
return script;
};
const addHappyFoxChat = (t, s) => {
if (window.HFC__INITIALIZED) return;
const hfcText = injectScript(t, s);
const lazyScript = addScriptTag(document, hfcText);
document.body.appendChild(lazyScript);
window.HFC__INITIALIZED = true;
};
