有没有办法将 Freshworks 聊天小部件添加到基于 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>