Hello! I'm trying to embed my Watson Assistant on a single page in fullscreen mode, similar to the Copilot and Chat GPT user interfaces. I'm a designer with limited coding experience and have been going through the documentation, but I'm still encountering issues. Has anyone managed to make their assistant fullscreen successfully?
Here's the code I'm using to embed the assistant on my Squarespace site:
<script>
window.watsonAssistantChatOptions = {
integrationID: "3c92e241-4010-412e-99b8-be164f4137f8", // The ID of this integration.
region: "us-south", // The region your integration is hosted in.
serviceInstanceID: "1dd2d057-1ee8-4884-ab24-89926b95c1dc", // The ID of your service instance.
onLoad: async (instance) => {
await instance.render();
// After rendering, apply full-screen styles
document.querySelector('.watson-assistant-chat-window').style.position = 'fixed';
document.querySelector('.watson-assistant-chat-window').style.bottom = '0';
document.querySelector('.watson-assistant-chat-window').style.right = '0';
document.querySelector('.watson-assistant-chat-window').style.width = '100vw';
document.querySelector('.watson-assistant-chat-window').style.height = '100vh';
document.querySelector('.watson-assistant-chat-window').style.zIndex = '1000';
}
};
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>
<style>
#yourChatWindow {
position: fixed;
bottom: 0;
right: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
If anyone has any tips or solutions, I'd greatly appreciate the help!
------------------------------
Katie Manning
------------------------------