watson-developer-cloud · ethanwinters · May 28, 2024
diff --git a/integrations/webchat/examples/custom-element/README.md b/integrations/webchat/examples/custom-element/README.md
@@ -6,19 +6,20 @@ This code is for extending the IBM watsonx Assistant web chat. If you are new to
 
 ## Custom elements
 
-This example demonstrates how to use a custom element to change the size and position of the main web chat window.
+This example demonstrates how to use a custom element to change the size and position of the main web chat window. This can be used to move web chat into a sidepanel, have it run in a "fullscreen" mode and more.
 
 It demonstrates:
 
 - How to use a [**view:change**](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-events#viewchange) event handler to show or hide the main web chat window when it is opened or closed.
 - How to use the [**element**](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-configuration#configurationobject) configuration property to specify which custom element to use.
-- How to apply custom animation to the entrance and exit of web chat.
+- How to apply custom animation to the entrance and exit of web chat in a sidebar view.
+- How to embed the web chat in fullscreen mode.
 
 ## Running the Code
 
 ### Running the JavaScript Examples
 
-1. Open the [client/javascript/index.html](client/javascript/index.html) or [client/javascript-animation/index.html](client/javascript-animiation/index.html) file in a web browser. The animation one is a slightly more complex example that demonstrates how to animate that opening or closing of web chat.
+1. Open the [client/javascript/index.html](client/javascript/index.html), [client/javascript-fullscreen/index.html](client/javascript-fullscreen/index.html) or [client/javascript-animation/index.html](client/javascript-animiation/index.html) file in a web browser. The animation one is a slightly more complex example that demonstrates how to animate that opening or closing of web chat as a sidebar.
 
 ### Running the React Examples
 

diff --git a/integrations/webchat/examples/custom-element/client/javascript-animation/index.html b/integrations/webchat/examples/custom-element/client/javascript-animation/index.html
@@ -18,15 +18,20 @@
 
     .WebChatContainer {
       position: absolute;
-      width: 500px;
+      width: 360px;
       right: 0;
-      top: 16px;
-      bottom: 16px;
+      top: 0;
+      bottom: 0;
+      height: 100vh;
+    }
+
+    .WebChatContainer--hidden {
+      display: none;
     }
 
     #WACContainer.WACContainer .WebChatStyles {
       position: relative;
-      transition: right 500ms ease-in-out;
+      transition: right 300ms ease-in-out;
     }
 
     #WACContainer.WACContainer .HideWebChat {
@@ -35,21 +40,20 @@
 
     #WACContainer.WACContainer .StartOpenAnimation {
       transition: none;
-      right: -500px;
+      right: -360px;
     }
 
     #WACContainer.WACContainer .OpenAnimation {
-      right: 16px;
+      right: 0px;
     }
 
     #WACContainer.WACContainer .CloseAnimation {
-      right: -500px;
+      right: -360px;
     }
   </style>
 </head>
 <body>
-
-  <div class="WebChatContainer"></div>
+  <div class="WebChatContainer WebChatContainer--hidden"></div>
 
   <script>
     const customElement = document.querySelector('.WebChatContainer');
@@ -81,6 +85,8 @@
           // Move the main window to the off-screen position and then un-hide it.
           instance.elements.getMainWindow().addClassName('StartOpenAnimation');
           instance.elements.getMainWindow().removeClassName('HideWebChat');
+          // Make the custom element visible.
+          customElement.classList.remove('WebChatContainer--hidden');
           setTimeout(() => {
             // Give the browser a chance to render the off-screen state and then trigger the open animation.
             instance.elements.getMainWindow().addClassName('OpenAnimation');
@@ -94,7 +100,10 @@
             // After the animation is complete, hide the main window.
             instance.elements.getMainWindow().addClassName('HideWebChat');
             instance.elements.getMainWindow().removeClassName('CloseAnimation');
-          }, 500);
+
+            // Make the custom element hidden.
+            customElement.classList.add('WebChatContainer--hidden');
+          }, 300);
         }
       }
     }
@@ -108,6 +117,7 @@
       // events.
       instance.on({ type: 'view:change', handler: viewChangeHandler });
 
+      // Render the chat.
       await instance.render();
     }
 
@@ -120,7 +130,19 @@
       serviceInstanceID: "9a3613d2-3ce6-4928-8eb6-4d659d87ae68",
       // This is where we provide the custom element to web chat so it knows where it is supposed to be placed.
       element: customElement,
+      headerConfig: {
+        // Have the "close" button be an icon to show that the chat will close to the right.
+        closeButtonIconType: 'side-panel-right'
+      },
+      carbonTheme: {
+        // Add square corners instead of rounded.
+        corners: 'square'
+      },
       onLoad: onLoad,
+
+      // You would likely use our own launcher in this scenario.
+      // See https://github.com/watson-developer-cloud/assistant-toolkit/tree/master/integrations/webchat/examples/custom-launcher.
+      // showLauncher: false
     };
     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>

diff --git a/integrations/webchat/examples/custom-element/client/javascript-fullscreen/index.html b/integrations/webchat/examples/custom-element/client/javascript-fullscreen/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Custom elements - IBM watsonx Assistant web chat toolkit</title>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+    }
+    .WebChatContainer {
+      width: 100vw;
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="WebChatContainer"></div>
+
+  <script>
+    const customElement = document.querySelector('.WebChatContainer');
+
+    /**
+     * This is the function that is called when the web chat code has been loaded and it is ready to be rendered.
+     */
+    async function onLoad(instance) {
+      await instance.render();
+    }
+
+    // This is the standard web chat configuration object. You can modify these values with the embed code for your
+    // own assistant if you wish to try this example with your assistant. You can find the documentation for this at
+    // https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-configuration#configurationobject.
+    window.watsonAssistantChatOptions = {
+      integrationID: "07b05ae0-7e2e-47d1-a309-d0f5b9915ac5",
+      region: "us-south",
+      serviceInstanceID: "9a3613d2-3ce6-4928-8eb6-4d659d87ae68",
+      // This is where we provide the custom element to web chat so it knows where it is supposed to be placed.
+      element: customElement,
+      // Move to fullscreen layout option.
+      layout: {
+        // Removes dropshadows and borders.
+        showFrame: false,
+        // Sets a max width on the readable content in the chat to make it easier to read.
+        hasContentMaxWidth: true,
+      },
+      // Hide the launcher, we always want this chat open.
+      showLauncher: false,
+      // Auto-open the chat.
+      openChatByDefault: true,
+      // Prevent closing of the chat.
+      hideCloseButton: true,
+      onLoad: onLoad,
+    };
+    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>
+
+</body>
+</html>
diff --git a/integrations/webchat/examples/custom-element/client/react-animation/src/App.css b/integrations/webchat/examples/custom-element/client/react-animation/src/App.css
@@ -11,15 +11,20 @@ body {
 
 .WebChatContainer {
   position: absolute;
-  width: 500px;
+  width: 360px;
   right: 0;
-  top: 16px;
-  bottom: 16px;
+  top: 0;
+  bottom: 0;
+  height: 100vh;
+}
+
+.WebChatContainer--hidden {
+  display: none;
 }
 
 #WACContainer.WACContainer .WebChatStyles {
   position: relative;
-  transition: right 500ms ease-in-out;
+  transition: right 300ms ease-in-out;
 }
 
 #WACContainer.WACContainer .HideWebChat {
@@ -28,13 +33,13 @@ body {
 
 #WACContainer.WACContainer .StartOpenAnimation {
   transition: none;
-  right: -500px;
+  right: -360px;
 }
 
 #WACContainer.WACContainer .OpenAnimation {
-  right: 16px;
+  right: 0px;
 }
 
 #WACContainer.WACContainer .CloseAnimation {
-  right: -500px;
-}
+  right: -360px;
+}
diff --git a/integrations/webchat/examples/custom-element/client/react-animation/src/App.js b/integrations/webchat/examples/custom-element/client/react-animation/src/App.js
@@ -26,6 +26,7 @@ function App() {
  * then make the main window hidden or visible after the animation as needed.
  */
 function viewChangeHandler(event, instance, stylesInitializedRef) {
+  const customElement = document.querySelector('.WebChatContainer');
   if (!stylesInitializedRef.current) {
     // The first time we get this, set the styles to their initial, default state.
     instance.elements.getMainWindow().addClassName('HideWebChat');
@@ -47,6 +48,8 @@ function viewChangeHandler(event, instance, stylesInitializedRef) {
       // Move the main window to the off-screen position and then un-hide it.
       instance.elements.getMainWindow().addClassName('StartOpenAnimation');
       instance.elements.getMainWindow().removeClassName('HideWebChat');
+      // Make the custom element visible.
+      customElement.classList.remove('WebChatContainer--hidden');
       setTimeout(() => {
         // Give the browser a chance to render the off-screen state and then trigger the open animation.
         instance.elements.getMainWindow().addClassName('OpenAnimation');
@@ -60,7 +63,10 @@ function viewChangeHandler(event, instance, stylesInitializedRef) {
         // After the animation is complete, hide the main window.
         instance.elements.getMainWindow().addClassName('HideWebChat');
         instance.elements.getMainWindow().removeClassName('CloseAnimation');
-      }, 500);
+
+        // Make the custom element hidden.
+        customElement.classList.add('WebChatContainer--hidden');
+      }, 300);
     }
   }
 }

diff --git a/integrations/webchat/examples/custom-element/client/react-animation/src/config.js b/integrations/webchat/examples/custom-element/client/react-animation/src/config.js
@@ -6,6 +6,9 @@ const config = {
   region: 'us-south',
   serviceInstanceID: '9a3613d2-3ce6-4928-8eb6-4d659d87ae68',
   subscriptionID: null,
+  // You would likely use our own launcher in this scenario.
+  // See https://github.com/watson-developer-cloud/assistant-toolkit/tree/master/integrations/webchat/examples/custom-launcher.
+  // showLauncher: false
 };
 
 export { config };