GithubHelp home page GithubHelp logo

Comments (4)

santhoshguru avatar santhoshguru commented on June 30, 2024

Do you still face that issue? If yes, can you drop a mail at [email protected] ?

from turbolinks-compatibility.

luckydev avatar luckydev commented on June 30, 2024

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

from turbolinks-compatibility.

Sundarasan avatar Sundarasan commented on June 30, 2024

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

from turbolinks-compatibility.

MichaelCesare avatar MichaelCesare commented on June 30, 2024

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

from turbolinks-compatibility.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.