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.
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>