Embeddable AI

 View Only

  • 1.  Embed Full-Screen Watson Assistant

    Posted Wed May 15, 2024 05:21 PM

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


  • 2.  RE: Embed Full-Screen Watson Assistant

    Posted Wed September 04, 2024 01:24 PM

    Hey, Katie!

    Try this:

    

              onLoad: async (instance) => { await instance.render();
    

                  // After rendering, apply full-screen styles
    

                  const widget = document.querySelector('#WACContainer .WACWidget--defaultElement');
    

                  if (widget) {
    

                    widget.style.position = 'fixed';
    

                      widget.style.top = '0';
    

                      widget.style.left = '0';
    

                      widget.style.width = '100%';
    

                      widget.style.height = '100%';
    

                      widget.style.maxWidth = '100%';
    

                      widget.style.maxHeight = '100%';
    

                      widget.style.zIndex = '9999';
    

                  }
    

               }
    

            };


    ------------------------------
    Adriano Vieira
    ------------------------------

    Original Message


  • 3.  RE: Embed Full-Screen Watson Assistant

    Posted Fri September 06, 2024 10:47 AM

    Hello!

    It sounds like you're working hard to get your Watson Assistant into fullscreen mode. Based on your code, you're on the right track with positioning and sizing your chat window. However, there are a few things you might want to check to ensure a smooth fullscreen experience:

    1. Ensure Correct Element Targeting: Make sure that .watson-assistant-chat-window is the correct class for the Watson Assistant container. Sometimes the class names can differ or be dynamically generated.

    2. Check CSS Specificity: Ensure that there aren't any other CSS rules that might be overriding your fullscreen styles. You might need to increase the specificity of your CSS or use !important to ensure your styles are applied.

    3. Confirm Element Visibility: Ensure that the chat window element is not being hidden or obstructed by other elements on your page.

    4. Test Across Devices: Sometimes, fullscreen mode can behave differently across devices and browsers. Make sure to test your implementation on various devices to confirm consistent behavior.

    If you're still having trouble, you might consider exploring some of the Best ChatGPT Alternatives. These alternatives can offer different integration options or user interface configurations that might suit your needs better, especially if you're looking for a more out-of-the-box fullscreen experience



    ------------------------------
    Eren Black
    ------------------------------

    Original Message


  • 4.  RE: Embed Full-Screen Watson Assistant

    Posted Mon September 09, 2024 12:51 PM

    I am having similar issue. Were you able to fix it?



    ------------------------------
    Martin
    ------------------------------

    Original Message


  • 5.  RE: Embed Full-Screen Watson Assistant

    Posted Fri October 11, 2024 02:43 PM

    LEO Agriculture



    ------------------------------
    Music kiio
    ------------------------------

    Original Message