Embedding the AI chat in a page

Use the capabilities of the AI chat in your website. You need to embed a generated script element in the HTML source of the website.

Note: The content in this section applies to the AI chat. If you want to deploy a specific AI assistant, refer to the Deploying your AI assistant section.

Before you begin

You must comply with the following requirements before you embed the chat:

  1. A server is required to embed the chat in a website.
  2. The script for embedding the chat must be in the <body> tag and not in the <head> tag.
  3. An HTML element with ID root must be present in the HTML, where the chat is attached.

Procedure

Follow the steps to embed the chat to your website:

  1. From the menu, click Agent configuration, and select the Embed chat tab.

  2. Optional: Toggle Security to On to enable the security option to encrypt the chat data.

    1. Enter the public RS256 key in the Public key field. For more information, see Generating an RS256 key pair and Generating a JWT.
    2. Click the Generate key button to encrypt sensitive information from users. It generates a public key to encrypt the user token. For more information, see Encrypting sensitive data in web chat.
  3. Copy the embed snippet.

  4. Paste the snippet into your website source code, making the appropriate changes if you enabled the web chat security.

Results

The chat widget appears in your website. Now, you can test the page to ensure that you can properly interact with the chat.

You can paste the same script tag into as many pages on your website as you want. However, do not add the script more than once per page.

Important: If the system that hosts your website has limited internet access (for example, if you use a proxy or firewall), make sure the URLs that host the web chat are accessible. Enable connections to the *.watson-orchestrate.ibm.com URLs to ensure communication with the web chat server.

Parent topic:

Customizing and configuring the AI chat