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

Question

一些聊天软件提供商提供 Gatsby 插件，或者他们提供的脚本在使用 React Helmet 包含在 html.js 中时没有问题。 但是，有些（例如，Freshworks）提供的脚本会出现“意外标记”和“表达式除外”错误。 我的问题是是否有一种简单的方法可以更改代码以使其正常工作？

下面的代码包括一个由 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>