JavaScript SDK: AI chatbar

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

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.

.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;
}