Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Happyfox Chat loading problem after language change #67

Open
TehraniX opened this issue Jan 21, 2016 · 4 comments
Open

Happyfox Chat loading problem after language change #67

TehraniX opened this issue Jan 21, 2016 · 4 comments

Comments

@TehraniX
Copy link

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:

<script> window.HFCHAT_CONFIG = { EMBED_TOKEN: "yourEmbedToken", ACCESS_TOKEN: "yourAccessToken", HOST_URL: "https://happyfoxchat.com", ASSETS_URL: "https://d1l7z5ofrj6ab8.cloudfront.net/visitor" }; (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>

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!

@santhoshguru
Copy link

Do you still face that issue? If yes, can you drop a mail at support@happyfoxchat.com ?

@luckydev
Copy link

AFAIK, Rails I18N will not cause the widget to reload several times.

@Sundarasan
Copy link

Sundarasan commented Jul 14, 2017

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

@MichaelCesare
Copy link

MichaelCesare commented May 26, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants