Design Knowledge Center Bots (Beta)

Launch KC Bot from the Bot Widget (Widget Bot)

The bot widget is a floating element that appears over your application, allowing users to access relevant resources from anywhere, without leaving their workflow. 

To configure the bot widget: 

1. Expand the Position section. 
2. Select the Open from a widget/badge option. 
3. In the User Control section, turn off the Draggable toggle if you wish the bot widget to be fixed at one place. By default, the toggle is on, allowing users to move the bot icon if it covers important UI elements such as CTA buttons.
4. In the Position on Screen section, select on which side of the screen the bot must appear to users on your application.
5. (Optional) Click Advanced Position Settings to manually adjust the widget’s position with respect to the screen edges, for precise placement. The following configurations are available: 

• Horizontal Offset: Define the space from the bottom of the screen and the widget.
• Vertical Offset: Configure the space from the right or left edge of the screen and the widget, depending on the position selected.
• Custom Z-Index: Controls the layering position of the widget on the page. A higher z-index value places the widget above other elements, ensuring it stays visible over items such as buttons or notification centers. A lower value may cause the widget to appear behind those elements.

6. Click Save.

Launch KC Bot from a UI Element (Embedded Bot)

Knowledge Center Bot can be launched from a specific UI element within your application. This approach integrates the bot directly into your interface, requiring it to be mapped to a chosen element, and provides a seamless way for users to access support in context.

Business Use Case: A product has a dedicated section for users to access help or documentation, and it is important that this section blends into the UI without additional visual elements such as badges. Instead of using the default bot widget, the KC Bot can be embedded into a specific UI element, such as a help icon or link, so it launches contextually when needed. This keeps the interface clean and focused, while still offering users quick access to relevant content.

Note: Embedded bots do not work in an iframe.

To configure the embedded bot: 

1. Expand the Position section. 
2. Select the Open from an UI element option. 
3. In the CSS Selector field, enter the CSS element of the UI item on which you need to embed the bot. Ensure that the CSS selector is unique.
4. In the Position on Screen section, configure the following: 
   1. Grid: Select the position where the bot must appear with respect to the selected UI element. 
   2. Anchor Position: Configure the direction in which the bot opens, with respect to the UI element. You can select from left/right and top/bottom options.
   3. Custom Z-Index: Controls the layering position of the widget on the page. A higher z-index value places the widget above other elements, ensuring it stays visible over items such as buttons or notification centers. A lower value may cause the widget to appear behind those elements.
5. (Optional) Click Advanced Position Settings to manually adjust the bot’s position with respect to the UI element, for precise placement. The following configurations are available:  
   • Horizontal Offset: Define the horizontal distance from the UI element and the bot. 
   • Vertical Offset: Configure the vertical space between the UI element and the bot.
   • Position Type: Select the type of positioning from one of the following: 
     • Injection: PX injects the iFrame of the KC widget into the DOM element, while embedding the bot. While scrolling, the KC widget scrolls instantly with the page.
     • Absolute: Render the bot at fixed X and Y coordinates, relative to the document, without affecting the DOM. While scrolling, the KC widget moves with the page scroll if it is associated with an outer scroll. For inner scrolls like a sidebar, the floating element does not move.
     • Fixed: Render the bot at fixed X and Y coordinates, relative to the window, without affecting the DOM. While scrolling, the KC widget does not move instantly with respect to the page.
       Note: The presence of a hidden overflow property (overflow: hidden;) in any of the parent DOM elements may affect how the bot is displayed. 
6. Click Save.