有没有办法将 Freshworks 聊天小部件添加到基于 Gatsby 的网站？

Question

一些聊天软件提供商提供了 Gatsby 插件，或者他们提供的脚本在使用 React Helmet 包含在 html.js 中时可以正常工作。但是，一些（例如 Freshworks）提供的脚本会给出 'unexpected token' 和 'expression excepted' 错误。我的问题是是否有一种简单的方法可以更改代码以使其正常工作？

下面的代码包含 Freshworks 提供的聊天小部件脚本，该脚本包含在关闭 body 标签之前的 Helmet 中。

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

这是建站后出现的错误。


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

您需要在组件内部使用反引号 (`) 并将其包裹在花括号中 ({}):

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

有没有办法将 Freshworks 聊天小部件添加到基于 Gatsby 的网站？

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

javascript

reactjs

chat

gatsby

react-helmet