diff --git a/integrations/webchat/examples/custom-element/README.md b/integrations/webchat/examples/custom-element/README.md index aa632d99..a5f1eec6 100644 --- 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 index 7fd0f09f..030bb3a1 100644 --- 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; } - -
+
diff --git a/integrations/webchat/examples/custom-element/client/javascript-fullscreen/index.html b/integrations/webchat/examples/custom-element/client/javascript-fullscreen/index.html new file mode 100644 index 00000000..638b797b --- /dev/null +++ b/integrations/webchat/examples/custom-element/client/javascript-fullscreen/index.html @@ -0,0 +1,60 @@ + + + + + + Custom elements - IBM watsonx Assistant web chat toolkit + + + + +
+ + + + + \ No newline at end of file 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 index 760a4dc1..d1aebe8f 100644 --- 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; +} \ No newline at end of file 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 index 2a8178e2..c7bd2e9b 100644 --- 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 index 875b0e5a..581ca8e6 100644 --- 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 };