有没有办法将FreshWorks聊天小工具添加到建立在Gatsby上的网站上？ [英] Is there a way adding Freshworks chat widget to a website built on Gatsby?

问题描述

某些聊天软件提供商提供了Gatsby插件，或者他们提供的脚本在包含在使用Reaction 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

推荐答案

您需要在组件内部使用反号(`)，并将其括在大括号({})中：

<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上的网站上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！