---
title: "AI Chat Bot Embed Customization"
slug: "ai-chat-bot-embed-customization"
status: "new"
updated: 2026-07-01T16:38:50Z
published: 2026-07-01T16:38:50Z
canonical: "knowledge.technolutions.net/ai-chat-bot-embed-customization"
---

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

# AI Chat Bot Embed Customization

> [!TIP]
> 🏔️ Summit 2026 Feature
> 
> Customize each embedded AI chat bot so it fits the site, audience, and brand where it appears.

AI chat bot embed customization lets you adjust how an embedded AI chat bot appears and behaves on a website. The same bot can use different embed settings on different sites, so a main admissions site, campaign page, or alumni portal can each use a presentation that fits that context.

![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Customize AI chatbot embed styles.gif)

## Customize a bot’s embed

1. Go to **Database** → **Bots**.
2. Select the AI chat bot that you want to embed, or [create a new one](/v1/docs/ai-chat-bots).
3. Select **Embed Chat**.

You’re brought to a page that previews the embedded chat bot interface.

## Configuring chat embed styles

On the **Embed Chat** page, you can customize the chat bot embed’s styling. As you make changes, you’ll see them reflected in real time in the **Embed Code** at the bottom of the page.

#### Primary color

Enter a color for the icon and the chat header bar.

📖 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value)

#### Icon

When you select **Custom,** a text box appears pre-populated with the following:

```css
background:var(--live-color) var(--live-icon) no-repeat center center;
background-size:50%;
border-radius:100%;
```

This CSS targets the `#live_launch` CSS ID.

Breaking down this default, we have:

- `background`: Includes two `var` functions:
  - `live-color`, which defaults to the value in the **Primary Color** field. Enter a color value here if you want the icon to be a different color than the chat header.
  - `live-icon`, which defaults to an SVG image that you can replace with an image at another URL.
- `background-size`:
- `border-radius`: Enter a percent value to determine how round the corners of the icon are (`100%` is a circle).

When using a custom icon, replace `var(--live-icon)` in the default CSS with a valid CSS image URL. This can be a hosted image URL, such as an SVG or PNG file:

```css
background:var(--live-color) url("https://slate.edu/assets/chat-icon.svg") no-repeat center center;
```

Or an inline data URL, such as a Base64-encoded SVG:

```css
background:var(--live-color) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...") no-repeat center center;
```

📖 Learn more about CSS [variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var), the [url() function](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/url_function), [background](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background), [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-size), and [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-radius)

#### Position

Select from one of the pre-defined options, or select **Custom** to configure your own positioning rules. Defaults to:

```css
position:fixed;bottom:25px;right:25px;
```

📖 [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position)

#### Size

Select one of the pre-defined size options, or select **Custom** to configure your own sizing rules. Defaults to:

```css
height:64px;width:64px;
```

📖 CSS [height](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/height) and [width](http://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/width) properties

## Testing the bot embed

Select **Preview** to review the embedded bot.

Copy the updated embed code and add it to the target website. Repeat the process when the same bot needs different styling on another site.

## Further reading

[AI chat bots](/v1/docs/ai-chat-bots)

[Branding in Slate](/v1/docs/branding-in-slate)