Embed your chat UI

When you use the sample skill provided, you need to embed your chat UI in the Citizen Engagement React application. This will allow the React application to pull down the chat UI and display it on your website.

The following steps outline the procedure for embedding your chat UI:

From your assistant, under the Integrations section, select Web Chat.
From the Embed tab, copy the entire code snippet displayed.
Open your index.html file from your Universal Access React application installation.
Paste the code snippet above into your index.html, making sure to paste it inside the head HTML tag.
Finally, update the Content-Security-Policy meta HTML tag to allow the browser to load Watson Assistant from a different domain. See the example code snippet below:

<meta
    http-equiv="Content-Security-Policy"
    content="script-src 'self' 'unsafe-eval' 'unsafe-inline' https://web-chat.global.assistant.watson.appdomain.cloud resource://pdf.js"
/>
Copy to clipboard

Virtual citizen assistant: Importing a dialog skill

Virtual citizen assistant: Integrate Maps