Chatbots – Styling

Last modified: August 21 2024.

Since the chatbot widget needs to behave and look the same on all possible WordPress configurations, it is built in a special way:

A chatbot button loads all necessary assets lazily on click
After loading, the actual widget loads inside an iframe, making sure that outer styles are not leaking into the chatbot styles
The original chatbot button is hidden and replaced with the iframe button

To make sure that the button will always look the same, before and after the iframe is loaded, SleekAI provides a sleekAi/chatbot/markup filter and a variety of CSS variables to customize the button.


            add_filter('sleekAi/chatbot/markup', function ($markup) {
      $markup .= '<style>
        :root {
          --sleek-ai--chatbot-button--background-color: #FFFFFF;
          --sleek-ai--chatbot-button--border-color: #E4E4E7;
          --sleek-ai--chatbot-button--border-radius: 8px;
          --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);
          --sleek-ai--chatbot-button--color: #000000;
          --sleek-ai--chatbot-button--distance: 16px;
          --sleek-ai--chatbot-button--font-size: 0.875rem;
          --sleek-ai--chatbot-button--font-weight: 500;
          --sleek-ai--chatbot-button--line-height: 1;
          --sleek-ai--chatbot-button--padding: 12px 16px;
          --sleek-ai--chatbot-button--position: fixed;
        }
      </style>';

      return $markup;
    });

      Copy

All of those options can also be configured in the widget panel of each chatbot.