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