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). 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 page, or from the widget options of sleekAi_render_chatbot():

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.

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:

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:

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

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.