> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gleap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# AI chatbar

## 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.

<img src="https://mintcdn.com/gleap-1d346ffa/B50Koyg6QLL_CjhQ/images/aichatbar.png?fit=max&auto=format&n=B50Koyg6QLL_CjhQ&q=85&s=b55a70dfa683be3216aa93123c0bc446" alt="AI chatbar" width="1812" height="1088" data-path="images/aichatbar.png" />

## Methods

### Show AI chatbar

Shows the AI chatbar widget in your application.

```js theme={null}
function showAiChatbar(): void;
```

### Hide AI chatbar

Hides the AI chatbar widget from your application.

```js theme={null}
function hideAiChatbar(): void;
```

### askAI()

Pass a question directly to Kai.

```js theme={null}
function askAI(question: string, showBackButton?: boolean): void;
```

***

### setAiChatbarQuickActions()

Sets the quick action buttons that appear above the AI chatbar for faster user interaction.

```js theme={null}
function setAiChatbarQuickActions(quickActions: string[]): void;
```

**Parameters:**

* `quickActions` (string\[], required): Array of quick action button labels

**Example:**

```js theme={null}
// 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](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_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:

| Part               | Description                             |
| ------------------ | --------------------------------------- |
| `container`        | The outermost container                 |
| `input-container`  | Wrapper around the input field          |
| `input-background` | The blurred background behind the input |
| `input`            | The `<input>` text field                |
| `send-button`      | The send button                         |
| `quick-actions`    | The quick actions row                   |

**Example:**

```css theme={null}
/* 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;
}
```