Adding WebChat Widget - Version 2 to a Gatsby JS site

[scottkwp]

Hi there, I am wondering if anyone has experience integrating the WebChat Widget - Version 2 to a Gatsby JS site?

I have tried the following in the gatsby-ssr.js file (which basically adds the script imports to the bodY). The below gives me access to the window._genesys object and the customPlugin which I register in chat.js:

export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script src="https://apps.mypurecloud.com.au/widgets/9.0/cxbus.min.js" onLoad={javascript:CXBus.configure({debug:false,pluginsPath:'https://apps.mypurecloud.com.au/widgets/9.0/plugins/'}); CXBus.loadPlugin('widgets-core');} />, <script src={${withPrefix('chat.js')}} /> ]) }

But when trying to run:

customPlugin.command('WebChat.open', getAdvancedConfig());

I get this error:

webchat.min.js:1 Uncaught SyntaxError: Unexpected token '<'

Not sure if this helps, but if anyone has experience that would be greatly appreciated.

[tim.smith]

I'm not sure what's causing that error, but I assume it's being caused by something being loaded incorrectly. I've never used Gatsby before, so I can't offer much direct advice. However, I can point you to how web chat v2 is injected into the dev tools in an Ember app. Although it's a different environment, you may be able to get some ideas from looking at how it's injected there: https://github.com/MyPureCloud/developer-tools/blob/master/app/controllers/webchat.js#L570