Is there a way adding Freshworks chat widget to a website built on Gatsby?

Question

Some chat software providers have Gatsby plugin available, or their provided script works without issues when included in html.js using React Helmet. However, some (Freshworks, for example) provide a script that gives 'unexpected token' and 'expression excepted' errors. My question is whether there is a simple way to alter the code to make it work or not?

The code below includes a chat widget script provided by Freshworks that is included in Helmet before closing body tag.

 <Helmet>
        <script>
  function initFreshChat() {
    window.fcWidget.init({
      token: "5df26417-e127-480b-a0ff-d21908f5030f",
      host: "https://wchat.eu.freshchat.com"
    });
  }
  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.eu.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
</script>
        </Helmet>
      </body>

Here's the error that was given after building the site.

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html


  133 | //
  134 | // But on the command line of a file system, it's not as complicated, you can't
> 135 | // `cd` from a file, only directories.  This way, links have to know less about
      | ^
  136 | // their current path. To go deeper you can do this:
  137 | //
  138 | //     <Link to="deeper"/>


  WebpackError: Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):

  - utils.js:135 
    node_modules/@reach/router/lib/utils.js:135:1

  - typeof.js:11
    node_modules/@babel/runtime/helpers/typeof.js:11:1

  - utils.js:23
    node_modules/@reach/router/lib/utils.js:23:1

Answer 1

You need to use backticks (`) inside your component and wrap it inside curly braces ({}):

<Helmet>
      <script type='text/javascript'>
        {`  function initFreshChat() {
    window.fcWidget.init({
      token: "5df26417-e127-480b-a0ff-d21908f5030f",
      host: "https://wchat.eu.freshchat.com"
    });
  }
  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.eu.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
        `}
     </script>
</Helmet>