---
title: "JavaScript SDK: AI chatbar"
description: "Embed the AI chat bar in your application with the Gleap JavaScript SDK. Follow the integration code examples."
url: https://docs.gleap.ai/en/articles/397-javascript-sdk-ai-chatbar
collection: "JavaScript"
updated: 2026-11-01
language: en
---

# JavaScript SDK: AI chatbar

Embed the AI chat bar in your application with the Gleap JavaScript SDK. Follow the integration code examples.

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

![Current AI chatbar settings in the Pied Piper demo project.](https://staticfiles.gleap.io/p613b5dd730aed737108f87ab/1ABM1Cvst7oWHbJCCjQm2MaEEuYJbmTWvmNYv0TfHclF8AGv8DTkfOa9RlO4SI0CLISbGLr6eVw.png)

## `Gleap.showAiChatbar()`

Show the chatbar.

```js
Gleap.showAiChatbar();
```

## `Gleap.hideAiChatbar()`

Hide the chatbar.

```js
Gleap.hideAiChatbar();
```

## `Gleap.setAiChatbarQuickActions(quickActions)`

Set the suggested action buttons shown above the input.

```js
Gleap.setAiChatbarQuickActions([
  "How do I reset my password?",
  "Contact support",
  "Check system status",
]);
```

## `Gleap.setAiChatbarPlaceholder(placeholder)`

Override the input placeholder text.

```js
Gleap.setAiChatbarPlaceholder("Ask about billing...");
```

## Customizing the appearance

The chatbar renders inside a [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) for style isolation. Override styles from outside using CSS `::part()`. The host element has class `gleap-ai-ui-widget`.

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Part</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>container</code></p></td><td colspan="1" rowspan="1"><p>Outermost container</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>input-container</code></p></td><td colspan="1" rowspan="1"><p>Wrapper around the input field</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>input-background</code></p></td><td colspan="1" rowspan="1"><p>Blurred background behind the input</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>input</code></p></td><td colspan="1" rowspan="1"><p>The <code>&lt;input&gt;</code> text field</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>send-button</code></p></td><td colspan="1" rowspan="1"><p>The send button</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>quick-actions</code></p></td><td colspan="1" rowspan="1"><p>The quick actions row</p></td></tr></tbody></table>

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

## Related

- [JavaScript SDK setup](https://docs.gleap.ai/en/articles/393-javascript-sdk-setup.md)
- [JavaScript SDK: Code snippet](https://docs.gleap.ai/en/articles/394-javascript-sdk-code-snippet.md)
- [JavaScript SDK: User identity](https://docs.gleap.ai/en/articles/395-javascript-sdk-user-identity.md)
- [JavaScript SDK: Callbacks](https://docs.gleap.ai/en/articles/396-javascript-sdk-callbacks.md)
- [JavaScript SDK: Frontend tools](https://docs.gleap.ai/en/articles/398-javascript-sdk-frontend-tools.md)