Skip to main contentWatson Assistant web chat

Render to a custom element

Learn how to render the web chat widget within your own custom element on the page.

Overview

Depending on your website design, you might want not want to render the web chat widget in the default DOM element on the page. For example, you might want to render the web chat in a different location, or at a different size; you might want to show the web chat already open, or embed it more deeply in your content.

See it in action

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

Web chat will render here

Instructions

First, you will need to create an instance of web chat to get the basic embed code.

Adding basic embed code

Now embed the web chat code into your website HTML. The embed code should look something like the code snippet below. Remember to change the integrationID and region values to the values you were given when you created your web chat.

Basic Embed Code

<!doctype html>
<html>
<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',
    // 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>

Configuring a custom element

To change the DOM element where the web chat widget is rendered, we need to use the element configuration option. (For more information about the web chat configuration options, see Configuration.)

If you want to render the web chat widget inside a custom element, you should not use the default launcher. Instead, you can use a custom launcher; alternatively, you can choose not to use a launcher at all, and instead just show the web chat always open by using the openChatByDefault configuration option. (If you use this approach, you should probably also set hideCloseButton to true to prevent users from closing the web chat window.)

Note: The web chat widget grows to fill the size of the element you provide. If you do not specify the height and width of the element, the web chat has no fixed size.

The following code snippet updates the configuration to render the web chat inside a custom DOM element. It also renders the web chat widget open by default, and it hides the close button.

Rendering to a custom element

<!doctype html>
<html lang="en">
<head>
<style>
  .chatElement {
    height: 600px;
    width: 100%;
  }
</style>
</head>
<body>
<div class="chatElement"></div>
<script>
  const element = document.querySelector('.chatElement');
  window.watsonAssistantChatOptions = {
    integrationID: "YOUR_INTEGRATION_ID",
    region: "YOUR_REGION",
    serviceInstanceID: "YOUR_SERVICE_INSTANCE",

    // Provide the custom element.
    element: element,
    // Hide the close button since we want it always open.
    hideCloseButton: true,
    // Hide the default launcher.
    showLauncher: false,
    // Make the window open by default.
    openChatByDefault: true,

    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>