IBM Developer

Tutorial

Embed a watsonx Assistant chatbot in any web page

Use a generated code snippet to embed a chatbot in a web page

By Scott D'Angelo, Alexander Dfouni

On this page

Watsonx Assistant can help you solve a problem by providing an intelligent interface using natural language. The flexibilities of the GUI tools and APIs combine to allow you to power applications and tools using AI simply and efficiently. After your assistant is published, you can easily embed it into a web page.

Prerequisites

To follow this tutorial, you need a published instance of watsonx Assistant.

Additionally, you need a web page to embed the chatbot in. If you don't already have one, you can use this index.html file as a template (use the styles.css if you want).

Steps

Step 1. Explore the Web chat features

  1. Click the Connect icon, and under Channels click Web chat.

    Click connect and then Web chat

  2. Under the Style tab, you can change the colors and chatbot name or add an avatar.

    Style tab

  3. Click the Home Screen tab. Here, you can set the Greeting message and have up to three conversation starters. In this example, there are some modifications to the defaults.

    Home Screen tab

The Live agent tab lets you set up a service desk connection so that your assistant can transfer customers to live agents. Learn more about this feature.

The Suggestions tab provides suggestions that appear as message options when your customers need some help. They adapt to the conversation and can offer both responses to try and connections to support. Learn more. You won't use Suggestions in this tutorial, so click the On check mark to turn it off.

Suggestions tab

Explore the features on the Security tab to encrypt sensitive data as well as to authenticate and authorize your web chat and users. Learn more about this.

Step 2. Get the code to embed your chatbot

  1. Click the Embed tab to get the code that you need to embed the chatbot into your website.

    Embed tab

  2. See the API docs for details on using the chatbot API.

Step 3. Paste the code into your web page

  1. Download and open your index.html file in any HTML editor.

  2. Paste the code from the web chat embed tab into your index.html page (or whatever the equivalent is for your website).

    Note: Add this code as close to your </body> tag as possible.

    Embedded code

    The page should now show the embedded web chat.

    Web chat embedded

  3. Click the webchat icon to launch the chatbot and allow live interaction with the watsonx Assistant service.

    Web chat running live

Conclusion

This tutorial showed you some of the features of the Web chat tool for watsonx Assistant. You learned how to change some of the features, and how to embed an Assistant chatbot into a website. This tool lets you quickly and easily integrate a chatbot that can be used for live interactions.