Widget

Leena AI virtual assistant can also be embedded into an intranet portal or website or even an enterprise's own employee mobile application via an embed code/SDK (JS code snippet).

Desktop - This code snippet will show a bubble in the bottom right corner. The icon can be customized by passing a different bubble image URL. When the user clicks on it, it opens the web app in a fixed-width container. The width and height of the container can be customized by passing the desired values. By default, the width is 360px and the height is 600px. The location of the chat widget can be customized by passing the ID of the div container where we want it to be shown.

A sample format of the final code snippet after all the customizations are given below

   <html>
     <body bgcolor="#FFFFF">
       <div class="parent">
         <div id="chat" class="child">
           This is an external portal for showing how the Leena AI web app can
           integrate with it.
         </div>
       </div>
     </body>
   
     <script defer>
       function loadChatWidget() {
         chatteron.init({
           clientId: 'xxxx-yyyy',
         version:“v2”,
     bubbleUrl:<logo link>,
           displayBubble: true,
           width: 480,
           height: 900,
           containerDivID: 'chat',
           autoPopUp: true,
                 authToken: <authToken>,
     jwtToken: <JWT-Token>,
   
         });
       }
     </script>
     <script
       defer
       src="https://web.leena.ai/scripts/sdk.js"
       onload="loadChatWidget();"
     ></script>
   
     <style>
       html,
       body {
         height: 100%;
       }
       .parent {
         height: 100%;
         background: #cccccc;
         display: flex;
         align-items: center;
         justify-content: center;
       }
       .child {
         padding: 24px;
         background-color: #80b3ff;
         width: 480px;
         height: 900px;
       }
       div#modal-container div#modal-content iframe {
         max-height: calc(100vh - 120px) !important;
       }
     </style>
   </html>

And, this is how it would appear

Configuration parameters are explained below

Parameter Name	Default Value	Description
width	360	This is the width of the chat window.
height	600	This is the height of the chat window.
bubbleUrl	-	URL of the image that should be shown in place of the bubble. This is the icon which opens the chat window when the user clicks on it.
displayBubble	true	This flag determines if we should display the chat bubble or not. If this is false, the user won’t see the chat bubble. This option should be used in conjunction with an auto pop-up flag.
autoPopUp	false	This flag determines if the chat window should open without any user interaction or not. If this is set to true, the user doesn’t need to click on the chat bubble in order to open the chat window.
containerDivID	-	The ID of the div element where we want to place the chat window. This option is used to customize the location of the chat window.
authToken	-	Auth token of the user that needs to be provided for the user to be identified
jwtToken	-	jwtToken is optional but it is advisable to share as this can help in validating the source of access.

A similar code can be generated for embedding within a mobile application as well with limited customization options on size.