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/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.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.)

When a custom element is used, web chat will not apply styling to it that would cause it to show or hide depending on whether or not web chat is open. You will be responsible for applying these styles yourself. This allows you the option of applying entrance or exit animations to your element. You can use thewindow:open and window:close events to listen for changes in web chat.

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/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";document.head.appendChild(t);});
</script>
</body>
</html>