Skip to main contentWatson Assistant web chat

Customize the home screen

Learn how to customize the home screen.

Overview

By default, the home screen will display the greeting and the conversation starters that you configured on the web chat setting page but you can also change the values at runtime on the client to be more targeted to the user. You can change them based on the user's information or the page the user is viewing or any other conditions that you can write code for.

See it in action

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

Instructions

To customize the home screen, you will need to use the updateHomeScreenConfig instance method. This can be called as soon as web chat has started and you have access to the instance.

In the example below, we will customize the home screen if the current browser URL contains "home-screen-tutorial" in it (which is this page)


<!doctype html>
<html lang="en">
<body>
<script>
  window.watsonAssistantChatOptions = {
    integrationID: "YOUR_INTEGRATION_ID",
    region: "YOUR_REGION",
    serviceInstanceID: "YOUR_SERVICE_INSTANCE",
    
    onLoad: function(instance) {
      instance.render();
      
      // You can add any condition you want here to decide what content you want to display on the home screen. You
      // can also turn the home screen off or on here.
      if (window.location.search.includes('home-screen-tutorial')) {
        instance.updateHomeScreenConfig({
          is_on: true,
          greeting: 'Welcome! Please ask us a question about the home screen.',
          starters: {
            is_on: true,
            buttons: [
              {
                label: 'Turn home screen off',
              },
              {
                label: 'Add conversation starters',
              },
              {
                label: 'Add custom content',
              },
            ],
          },
        });
      }
    }
  };

  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>