Question

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

  • 13 October 2021
  • 1 reply
  • 52 views

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

1 reply

Hey bro have you got your answer or not if yes then let me know the answer plz. Satisfiedshoes.com

Reply