Skip to main content
Gainsight Inc.

Design In-App Hub (formerly KC Bot) - Beta

  1. Last updated
  2. Save as PDF

As of March 2026, Knowledge Center Bot is now called In-App Hub. Refer to the announcement for more details. This article reflects the updated name, but some images and videos may still display the previous name and will be updated soon.

This article explains how to customize the appearance of the In-App Hub (formerly KC Bot) in Gainsight PX.

Overview 

The Design section of In-App Hub (formerly KC Bot) allows you to customize the hub's appearance to align seamlessly with your organization's branding and application interface. It helps you create a personalized and professional look and feel for the hub that enhances the overall user experience.

You can configure various design elements, such as the hub's position, choose themes, colors, typography, and layout options. Additional customization includes selecting icons and corner designs, ensuring a cohesive and visually appealing integration with your application.

Prerequisites

Ensure that you have Editor access to In-App Hub to create hubs and articles, and Manager or Production Launcher access to launch the hub. For more information on assigning user permissions, refer to the User Management article. 

Personalize In-App Hub

The Design section of In-App Hub configuration allows you to tailor the look and feel of the hub, across various visual elements visible to the end-user. 

To design an In-App Hub: 

  1. Navigate to In-App Hub from the main menu. The
  2. In-App Hub page appears. 
  3. Create a new hub or edit an existing one. 
  4. Click the Design icon. The following sections are available to customize:

Bot design settings panel with customizable badge and type icons, allowing users to select visual indicators for search, guide, dialog, and other widget types.

Configure the Position of In-App Hub

Use the Position section to configure the In-App Hub's placement on the screen, how it opens, and more. 

Position settings for the Knowledge Center Bot, including widget size, launch source (widget or UI element), draggable toggle, and corner positioning options.

Section Description
Size Customize the dimensions of the hub when opened using: 
  • Height: 240 – 960 px
  • Width: 400 – 640 px.
In-App Hub trigger mechanism

In-App Hubs can be triggered in one of the following ways: 

  • Widget In-App Hub: Activates upon user interaction with the hub widget, providing a floating widget that appears over your web page or application.
  • Embedded In-App Hub: Integrates directly within your application's user interface, requiring the hub to be mapped to specific UI elements for activation.

 

  • Gainsight PX supports a single active In-App Hub per active user at a time based on the hub segmentation and priority. If you have configured two or more active widgets or embedded hubs, the hub with the highest priority is displayed.
  • A default expand and collapse icon appears in the In-App Hub header, allowing users to toggle the view for better readability and a cleaner interface.

Launch In-App Hub from the Widget (Widget In-App Hub)

The In-App Hub 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 In-App Hub 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 hub widget to be fixed at one place. By default, the toggle is on, allowing users to move the hub 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 hub 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.
  1. Click Save.

Bot position configuration panel set to launch from a widget or badge, with draggable option enabled and placement adjustable via corner and offset controls.

Launch In-App Hub from a UI Element (Embedded In-App Hub)

In-App Hub can be launched from a specific UI element within your application. This approach integrates the hub 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 hub widget, the In-App Hub 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.

Embedded hubs do not work in an iframe.

To configure the embedded In-App Hub: 

  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 hub. Ensure that the CSS selector is unique.
  4. In the Position on Screen section, configure the following: 
    1. Grid: Select the position where the hub must appear with respect to the selected UI element. 
    2. Anchor Position: Configure the direction in which the hub 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 hub’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 hub. 
    • Vertical Offset: Configure the vertical space between the UI element and the hub.
    • Position Type: Select the type of positioning from one of the following: 
      • Injection: PX injects the iFrame of the
      • In-App Hub widget into the DOM element, while embedding the hub. While scrolling, the
        • In-App Hub widget scrolls instantly with the page.
  6. Absolute: Render the hub at fixed X and Y coordinates, relative to the document, without affecting the DOM. While scrolling, the In-App Hub 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.
  7. Fixed: Render the hub at fixed X and Y coordinates, relative to the window, without affecting the DOM. While scrolling, the In-App Hub 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 hub is displayed. 
  8. Click Save.

Bot position settings configured to open from a specific UI element using a CSS selector, with custom anchor, Z-index, and offset positioning options.

Design the Theme of In-App Hub

The Theme section enables you to customize the In-App Hub's visual style to ensure the hub aligns with your brand's identity. Customization options include  configuring accent and background colors, text colors for headers and body, typography settings, and more.  

The following configurations help ensure the hub feels native to your interface and visually consistent with your product design:

Section

Description

Customizable Options

Colors

The primary visual identity of the hub. These colors influence the hub's overall aesthetics and ensure it complements your brand’s theme. Choose from the available colors, or click the pencil icon for a custom color. 
  • Accent Color
  • Background Color
    • Solid
    • Gradient

Text Colors

The header and body text colors to enhance readability,  and create a clear visual hierarchy.
  • Header Color
  • Body Color

Typography

The text styles for the header and body to establish a consistent look  and tone of the content.
  • Header Textstyle
  • Body Textstyle

Card Colors

Define the visual style of content cards to ensure they provide a visually distinct experience.
  • Background Color
  • Border Color
  • Border Hover Color
  • Shadow Color

Corners

The shape of the hub's edges to add a subtle yet impactful customization that can make the hub feel modern.
  • Round
  • Squircle
  • Square

Spacing Between Widgets

The vertical spacing between widgets to best suit your design needs.
  • 32 px
  • 24px
  • 16px

 

Configure Icons of In-App Hub

The Icons section allows you to personalize the visual representation of the In-App Hub by customizing badge, close, and various function-specific icons to ensure the hub’s interface is intuitive, thus enhancing its usability.

Section

Description

Customizable Options

Badge Icon

The entry point to the hub, appearing on your application to give end-users access. This can also be used by users to drag hub around the application. 

Note: Only applicable if the hub opens from the widget. 

Select a badge icon from the available options, or upload a personalized icon.

Badge Close Icon

The close icon appears when the hub is open, allowing end-users to dismiss the hub. 

Select a badge close icon from the available options, or upload a personalized icon.

Type Icons

Type icons represent specific content types or icons used in the hub, such as search, guides, surveys, or articles. 

Leave the default icon selection, or upload personalized icons for the required ones.

 

Bot design settings panel with customizable badge and type icons, allowing users to select visual indicators for search, guide, dialog, and other widget types

The out-of-the-box icons automatically use the theme colors configured. However, custom icons do not inherit the theme colors and are used in its original colors. 

Design In-App Hub Notifications

The Notifications section allows you to customize how notifications appear in the In-App Hub for the Content Groups and Recommendations widgets. These notifications appear as badges on items newly added or unread items, helping users quickly spot new content while keeping alerts visually consistent.

Section Description Customizable Options
Notifications Color of background and text of notifications, ensuring they stand out and grab end-users' attention.
  • Turn on or off
  • Background Color
  • Text Color

Notification styling options in the Bot Designer, allowing users to customize background and text colors for in-app messages.

Configure In-App Hub’s Speech Bubble

The Speech Bubble section allows you to display text as a dialog to guide users and communicate the purpose of the widget effectively. You can customize the content of the speech bubble and control its visibility, ensuring it provides timely and relevant assistance to users. 

Section Description Customizable Options
Speech Bubble A dialog box that appears on the hub, designed to help end-users understand the purpose of the widget. 
  • Turn on or off
  • Background Color
  • Text Color
  • Content: The message that appears. You can use user or account attribute tokens to personalize the content. 

Speech Bubble customization settings for the Knowledge Center Bot, showing editable background and text colors along with welcome message content.