# Styling

A chatbot has to look the same in every theme, so it stays apart from the
page. SleekAI prints a floating chatbot's button on the page and renders the
chatbot, its button included, inside a frame that theme styles do not reach.
The frame loads only once a visitor reaches for the button and then takes its
place ([when chatbots load](/docs/ai/chatbots/api.md#when-chatbots-load)). The
button's look comes from CSS custom properties, which both the page's button
and the framed button read.

## Widget settings

Six properties come from the chatbot's [Widget](/docs/ai/chatbots/widget.md)
page, or from the `widget` options of
[`sleekAi_render_chatbot()`](/docs/ai/chatbots/api.md#render-a-chatbot-from-php):

| Widget setting            | Option                   | CSS custom property                            | Fallback   |
| ------------------------- | ------------------------ | ---------------------------------------------- | ---------- |
| Position > Distance       | `position.distance`      | `--sleek-ai--chatbot-position--distance`       | `16px`     |
| Button > Text color       | `button.color`           | `--sleek-ai--chatbot-button--color`            | `#000000`  |
| Button > Background color | `button.backgroundColor` | `--sleek-ai--chatbot-button--background-color` | `#FFFFFF`  |
| Button > Border color     | `button.borderColor`     | `--sleek-ai--chatbot-button--border-color`     | `#E4E4E7`  |
| Button > Border radius    | `button.borderRadius`    | `--sleek-ai--chatbot-button--border-radius`    | `8px`      |
| Button > Font size        | `button.fontSize`        | `--sleek-ai--chatbot-button--font-size`        | `0.875rem` |

A chatbot created in the editor starts with its own values for these
settings; the fallback applies when a chatbot has no value, for example when
a `sleekAi_render_chatbot()` call leaves the option out, and when a value is
not one the property takes. The colours take a hex colour, an `rgb()`,
`rgba()`, `hsl()` or `hsla()` value, a `var()` reference or a colour name;
the distance, border radius and font size take a number with a unit, such as
`16px`, `1rem` or `50%`, `0`, or a `calc()` of those. SleekAI sets these
six on the chatbot itself, on the page and in the frame, so change them in the
widget settings rather than in CSS.

## Other properties

These properties have no widget setting. The framed button reads the four
marked "frame"; the placeholder on the page reads all of them.

| CSS custom property                                 | Default                                                         | Read in     |
| --------------------------------------------------- | --------------------------------------------------------------- | ----------- |
| `--sleek-ai--chatbot-button--box-shadow`            | `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)` | page        |
| `--sleek-ai--chatbot-button--font-feature-settings` | `normal`                                                        | page, frame |
| `--sleek-ai--chatbot-button--font-weight`           | `500`                                                           | page, frame |
| `--sleek-ai--chatbot-button--line-height`           | `1`                                                             | page, frame |
| `--sleek-ai--chatbot-button--padding`               | `12px 16px`                                                     | page, frame |
| `--sleek-ai--chatbot-button--position`              | `fixed`                                                         | page        |

To change them inside the frame, add a `<style>` element through the
`sleekAi/chatbot/markup` filter. SleekAI inserts that markup into each
chatbot's frame when it renders:

```php
add_filter('sleekAi/chatbot/markup', function ($markup) {
    return $markup . '<style>
        :root {
            --sleek-ai--chatbot-button--font-weight: 600;
            --sleek-ai--chatbot-button--padding: 14px 20px;
        }
    </style>';
});
```

Add only `<style>` elements to this markup: it is inserted into the frame as
it is, so visible content would show up beside the chat.

To change the placeholder the page shows before the frame takes over, set the
same properties in your theme's stylesheet on the chatbot's wrapper. A `:root`
rule does not work there, because SleekAI prints its defaults later in the
page:

```css
[data-sleek-ai-chatbot-index] {
  --sleek-ai--chatbot-button--font-weight: 600;
}
```

## One chatbot

The markup filter applies to every chatbot. Two more filters, which run after
it, add markup to one chatbot: `sleekAi/chatbot/id={id}/markup` for a saved
chatbot, by its post ID, and `sleekAi/chatbot/key={key}/markup` for one
rendered from PHP; see the [Chatbot API](/docs/ai/chatbots/api.md#add-markup-to-a-chatbot).

## The chat window

The chat window inside the frame uses SleekAI's own styles, and its themes
come from the widget's **Theme** setting. A `<style>` element added through
the markup filter can reach it too, but the class names inside the chat are
internal and can change between releases, so check such rules after updating.