AI Chat Bot Embed Customization

🏔️ 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.

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.

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

Icon

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

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:

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:

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

📖 Learn more about CSS variables, the url() function, background, background-size, and border-radius

Position

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

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

📖 CSS position

Size

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

height:64px;width:64px;

📖 CSS height and 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

Branding in Slate