Embed Watson Assistant to a full-screen UI

Question

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?

If anyone has any tips or solutions, I'd greatly appreciate the help!

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>

Answer 1

The official watsonx Assistant documentation has a tutorial that should show you what you need: https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-web-chat-develop-size-position.

In short, you need to use the "element" configuration option to provide your own custom element to the web chat and then you would make that element the full size of the screen.