---
id: aikit-chatbot
title: Chatbot
slug: /ai-kit/chatbot
sidebar_position: 40
description: Configure and display the AI‑Kit chatbot on your site from the WordPress admin.
tags: [ai-kit, chatbot, wordpress, frontend]
hide_title: true
---

## AI‑Kit Chatbot

AI‑Kit includes an **AiChatbot** widget that can be displayed site‑wide.

Unlike **AI‑Kit Feature**, the chatbot is **not** added via a Gutenberg block or a shortcode. You configure it in the WordPress admin under **AI‑Kit Settings → Chatbot Settings**.

---

## Requirements

The chatbot currently runs in **backend‑only** mode.

To see it on the front‑end, make sure you have:

- An active **Pro** subscription
- A configured backend (your AI‑Kit backend endpoint)
- **Enable chatbot** turned on in **Chatbot Settings**
- Settings saved

---

## Preview vs live

The **Preview** toggle lets you try your current settings instantly **without saving**.

While previewing:

- The live site button is hidden
- A preview button appears instead

To apply the configuration on your site, **enable the chatbot** (if needed) and **Save** your changes.

---

## Settings reference

Chatbot Settings is split into a few groups.

### Chatbot configuration

- **Enable chatbot** — turns the widget on/off for the site.
- **Chat title** — title shown at the top of the chat modal.
- **Placeholder** — input placeholder text shown above the message box.
- **Language** — UI language used for labels. Leave empty to use defaults.
- **Direction** — text direction: `ltr | rtl | auto`.
- **History storage** — where to persist chat history:
  - `localstorage` (default)
  - `sessionstorage`
  - `nostorage`

:::note
When history storage is enabled, AI‑Kit clears stored chat history automatically after 24 hours.
:::

### Theme

These options customize the Mantine theme used by the chatbot UI:

- **Color mode** — `light | dark | auto`.
- **Primary color** — name of a Mantine color (or a custom named color).
- **Primary shade (light/dark)** — shade index `0…9` used for the primary color.
- **Custom colors** — add named hex colors that become available as `primaryColor` options.

### Advanced

Optional layout and limits:

- **Open button position** — where the launcher appears:
  - `bottom-right` (default)
  - `bottom-left`
  - `top-right`
  - `top-left`
- **Open button label** — launcher text.
- **Open button icon layout** — icon position relative to the title: `top | bottom | left | right`.
- **Open button icon (base64)** — Data URL (for example `data:image/svg+xml;base64,...`).
- **Show open button title** — show/hide the launcher title.
- **Show open button icon** — show/hide the launcher icon.
- **Max images** — maximum number of images allowed per message.
- **Max image bytes** — maximum size per image in bytes.

### Label overrides

You can override any built‑in label used by the chatbot UI (buttons, tooltips, errors, etc.).

- Only overridden labels are stored.
- Remove an override to fall back to the defaults.

---

## Theming with CSS variables

For CSS‑token based customization (spacing, radii, colors, launcher sizing, chat dimensions, etc.), see **[Theming (CSS variables)](./css-variables)**.