Skip to main contentWatson Assistant web chat

Getting started

Learn how to quickly embed a web chat on your website and what happens when you do.

Overview

With just a few lines of code that are provided for you, you can add a working web chat instance to your website.

See it in action

Add an instance of web chat configured to behave like this tutorial to this page.

Instructions

When you create a web chat integration, the Watson Assistant UI gives you a small embed code to add to your website, as in this example:

Example

<!doctype html>
<html lang="en">
<body>
<script>
  window.watsonAssistantChatOptions = {
    // A UUID like '1d7e34d5-3952-4b86-90eb-7c7232b9b540' included in the embed code provided in Watson Assistant.
    integrationID: "YOUR_INTEGRATION_ID",
    // Your assistants region e.g. 'us-south', 'us-east', 'jp-tok' 'au-syd', 'eu-gb', 'eu-de', etc.
    region: "YOUR_REGION",
    // A UUID like '6435434b-b3e1-4f70-8eff-7149d43d938b' included in the embed code provided in Watson Assistant.
    serviceInstanceID: "YOUR_SERVICE_INSTANCE",
    // The callback function that is called after the widget instance has been created.
    onLoad: function(instance) {
      instance.render();
    }
  };

  setTimeout(function(){const t=document.createElement('script');t.src='https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js';document.head.appendChild(t);});
</script>
</body>
</html>

This pre-configured code snippet gives you everything you need to render and open the web chat widget when your page loads. Use this code as a starting point for extending and customizing web chat for your website.

Embedding web chat on your website

Add this code as close to your </body> tag as possible. For more information on the different options you can set by modifying this code, see Configuration.

After you initialize web chat

The web chat will combine your options object with any applicable settings you have made in Watson Assistant, and initialize the web chat instance. The onLoad callback from your options object will be called but at this point, the web chat widget is not yet rendered.

The widget is not rendered until your code calls instance.render(). This gives you the opportunity to subscribe to events you want your code to handle, before users begin to interact with web chat. To subscribe to events before the web chat widget renders, you would insert additional code to call the instance.on() or instance.once() method before instance.render().

The instance.render() method is just one of the instance methods you can use after your Web Chat instance initializes. With these methods, you can also do things like send a message, or open and close the web chat window. For more information, see Instance methods.