Skip to main content
The AI chatbar is an inline assistant that lets visitors ask questions on any page. It appears automatically once the SDK is initialized. AI chatbar

​
Gleap.showAiChatbar()

Show the chatbar. 
Gleap.showAiChatbar();

​
Gleap.hideAiChatbar()

Hide the chatbar. 
Gleap.hideAiChatbar();

​
Gleap.setAiChatbarQuickActions(quickActions)

Set the suggested action buttons shown above the input. 
Gleap.setAiChatbarQuickActions([
  "How do I reset my password?",
  "Contact support",
  "Check system status",
]);

​
Gleap.setAiChatbarPlaceholder(placeholder)

Override the input placeholder text. 
Gleap.setAiChatbarPlaceholder("Ask about billing...");

​
Customizing the appearance

The chatbar renders inside a Shadow DOM for style isolation. Override styles from outside using CSS ::part(). The host element has class gleap-ai-ui-widget.
PartDescription
containerOutermost container
input-containerWrapper around the input field
input-backgroundBlurred background behind the input
inputThe <input> text field
send-buttonThe send button
quick-actionsThe quick actions row
.gleap-ai-ui-widget::part(input-background) {
  background: #1a1a1a;
}

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

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