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

问题描述

某些聊天软件提供商可以使用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",!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

解决方法

您需要在组件内部使用反引号（`）并将其包装在花括号（{}）中：

<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",!1);
        `}
     </script>
</Helmet>