Skip to main contentWatson Assistant web chat

Carbon themes

You can use Carbon themes to quickly change the whole look of your web chat.

Overview

To better match your brand, you can style your web chat using predefined Carbon themes. You can also customize any theme by adjusting the Carbon CSS variables.

See it in action

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

Instructions

First, 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>

Choosing a Carbon theme

To set the Carbon theme, use the carbonTheme configuration option. For example, setting that option to g90 causes the web chat to render with the Carbon Gray 90 theme instead of the default Carbon Gray 10 theme. (For more information about the web chat configuration options, see Configuration.)

Updating the configuration to switch Carbon themes

<!doctype html>
<html lang="en">
<body>
<script>
  window.watsonAssistantChatOptions = {
    integrationID: "YOUR_INTEGRATION_ID",
    region: "YOUR_REGION",
    serviceInstanceID: "YOUR_SERVICE_INSTANCE",

    // Config option to change Carbon themes.
    carbonTheme: 'g90',

    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>

Customizing the web chat styling

You can customize the selected theme by using the updateCSSVariables() instance method. For a list of supported theme variables and their default values, see the Carbon Design System documentation.

Updating CSS variables

<!doctype html>
<html lang="en">
<body>
<script>
  window.watsonAssistantChatOptions = {
    integrationID: "YOUR_INTEGRATION_ID",
    region: "YOUR_REGION",
    serviceInstanceID: "YOUR_SERVICE_INSTANCE_ID",

    carbonTheme: 'g90',
    onLoad: function(instance) {
      // Instance method to adjust specific CSS variables
      instance.updateCSSVariables({
        'BASE-font-family': '"Times New Roman", Times, serif',
        '$active-primary': '#009900',
        '$focus': '#008000',
        '$hover-primary': '#00ff00',
        '$interactive-01': '#008000'
      });
      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>