Skip to main content

​
What is the AI chatbar?

This intelligent assistant widget gives your website visitors a quick and easy way to get answers to their questions, driving engagement and boosting your sales. AI chatbar

​
Methods

​
Show AI chatbar

Shows the AI chatbar widget in your application. 
function showAiChatbar(): void;

​
Hide AI chatbar

Hides the AI chatbar widget from your application. 
function hideAiChatbar(): void;

​
askAI()

Pass a question directly to Kai. 
function askAI(question: string, showBackButton?: boolean): void;

​
setAiChatbarQuickActions()

Sets the quick action buttons that appear above the AI chatbar for faster user interaction. 
function setAiChatbarQuickActions(quickActions: string[]): void;
Parameters:
  • quickActions (string[], required): Array of quick action button labels
Example: 
// Set quick actions for the AI chatbar
Gleap.setAiChatbarQuickActions([
  "How to login?",
  "Reset password",
  "Contact support",
  "Check system status"
]);
Note: Quick actions provide users with common questions or actions they can tap to quickly interact with the AI assistant.

​
Customizing the appearance

The AI chatbar renders inside a Shadow DOM for style isolation. You can still override its styles from outside using CSS ::part(). The host element has the class gleap-ai-ui-widget. The following parts are exposed:
PartDescription
containerThe outermost container
input-containerWrapper around the input field
input-backgroundThe blurred background behind the input
inputThe <input> text field
send-buttonThe send button
quick-actionsThe quick actions row
Example: 
/* Change the input background color */
.gleap-ai-ui-widget::part(input-background) {
  background: #1a1a1a;
}

/* Style the input text */
.gleap-ai-ui-widget::part(input) {
  color: #ffffff;
  font-size: 14px;
}

/* Style the send button */
.gleap-ai-ui-widget::part(send-button) {
  background: #6c47ff;
}