AI chatbar - Gleap Documentation

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.

Part	Description
`container`	Outermost container
`input-container`	Wrapper around the input field
`input-background`	Blurred background behind the input
`input`	The `<input>` text field
`send-button`	The send button
`quick-actions`	The 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;
}

Callbacks Frontend tools

⌘I

​Gleap.showAiChatbar()

​Gleap.hideAiChatbar()

​Gleap.setAiChatbarQuickActions(quickActions)

​Gleap.setAiChatbarPlaceholder(placeholder)

​Customizing the appearance

`Gleap.showAiChatbar()`

`Gleap.hideAiChatbar()`

`Gleap.setAiChatbarQuickActions(quickActions)`

`Gleap.setAiChatbarPlaceholder(placeholder)`

Customizing the appearance