2021 Call for Code Awards: Live from New York, with SNL’s Colin Jost! Learn more

Embed an Assistant chatbot in any web page

Watson 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 Watson Assistant. If you are following the Watson Assistant learning path then you will already have this, but you can use any Assistant chatbot.

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. Paste this code into your index.html page (or whatever the equivalent is for your website).

    Web chat embedded

  2. Click the webchat icon to launch the chatbot and allow live interaction with the Watson Assistant service.

    Web chat running live

Conclusion

This tutorial showed you some of the features of the Web chat tool for Watson 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.