Configure and deploy your watsonx Assistant web chat

The web chat integration provides an easy-to-use chatbot interface that can integrate seamlessly with your site, without requiring the time and effort of building a custom user interface. The web chat integration can help your customers start the conversation with common questions or tasks. It can display multimedia and interactive elements such as forms, and it can transfer customers to human agents for more help. You can customize the web chat to add even more capabilities.

This tutorial provides an easy-to-follow guide on configuring and customizing the watsonx Assistant web chat integration for your assistant.

For in-depth documentation and additional tutorials on the web chat integration, see the watsonx Assistant web chat documentation pages.

Prerequisites

To follow this tutorial, you need:

• An IBM Cloud account
• Access to any watsonx Assistant instance on a Lite, Plus Trial, Plus, or Enterprise plan
• An understanding of the watsonx Assistant user interface

Estimated time

It should take you approximately 10 minutes to complete the tutorial.

Steps

1. Select Integrations from the navigation bar. This takes you to the Integrations page where you can select Web chat by clicking Open.

   

2. First, configure the web chat integration for the draft environment, which is selected by default. Click Confirm.

   

3. This screen lets you use various configuration tabs to set up the web chat integration. The Style tab lets you customize your assistant’s name and colors, as well as upload an avatar image. When your assistant looks like how you want it, click the Launcher tab.

   Before:

   

   After:

   

4. The Launcher tab lets you customize the web chat integration’s launcher greetings for both desktop and mobile chats. Type a greeting into the text box for each to make your assistant unique. When your greetings are ready, select the Home Screen tab.

   Before:

   

   After:

   

5. The Home Screen tab lets you customize the clickable greetings, called conversation starters, which appear when the web chat integration’s launcher opens the web chat window. Up to five conversation starters can be added or removed entirely. This tab also lets you customize the greeting message.

   Optionally, you can disable the entire Home Screen feature by setting the toggle to Off, which tells your assistant to perform similar to the Preview feature, starting with the Greeting action by default.

   After your Home Screen experience is configured, skip Live agent for now, and select Suggestions.

   Before:

   

   After:

   

6. The Suggestions tab lets you enable or disable a feature that provides message options when your customers need help. The message options adapt to the conversation and can offer responses to try or a connection to support. You can read more about configuring suggestions. For the purposes of this guide, you turn this feature off. However, when previewing, if you find the end user experience to be preferable with suggestions enabled, keep it enabled.

   The Security tab allows for an encryption feature that is not covered in this tutorial. After you disable the Suggestions feature, click the Embed tab.

   Before:

   

   After:

   

7. While previewing your draft environment is possible using the Preview feature in watsonx Assistant, it is a best practice to deploy your assistant’s draft environment web chat integration onto an internal-draft version of your website to test out its final appearance and functions before deploying it live on your real, customer-facing website.

   The Embed tab provides a script to place on your website that brings your draft assistant to life. Save and exit, then return to this tab to copy and paste this script. After you've configured, tested, and verified that your web chat integration in draft mode appears and functions as it should when live, you are ready to return to the Integrations page.

   

8. On the Integrations page, click Open for the web chat integration again.

   

9. Now, select Live from the Environment drop-down menu, then click Confirm.

   

10. Notice how the web chat integration configuration is still using default settings. Configure the web chat integration to match your draft environment’s configuration. When you reach the Embed tab again, you have completed configuring your assistant’s web chat integration for both draft and live environments.

    

11. Now that you have prepared your live environment web chat integration, you're ready to deploy it.

    1. Copy and paste the script that is provided into the HMTL for your live website.
    2. Edit the HTML source for the web page where you want the web chat widget to appear.
    3. Paste the code snippet into the page. Paste the code as close as possible to the closing tag to ensure that your page renders faster.

    For more information on deploying web chat on your page, refer to the watsonx Assistant documentation.

Summary

Congratulations on deploying your first assistant live on your page! Deploying your first assistant live on your webpage is a significant achievement. By deploying the web chat integration, you have empowered your website with an interactive and efficient customer support solution.

Remember that deploying the web chat integration is not the end of the journey.

You now have the opportunity to continuously improve and optimize your assistant's performance based on user interactions and feedback. Regularly monitor and analyze the conversations and interactions to identify areas for improvement and enhance the effectiveness of the chatbot.

Any questions? Reach out to Alexander Dfouni.