Customizing Styles

To ensure the Supervised AI Chatbot aligns with your website's branding, you can modify the custom-popup-style.css file. This file controls the appearance of both the floating launcher button and the chat window container.

Adjusting the Launcher Button

The launcher button (the circular icon users click to open the chat) is controlled by the .circle-button class. You can change its color, size, and position on the screen.

/* Example: Changing the launcher button color and position */
.circle-button {
    background-color: #007bff; /* Change this to your brand color */
    bottom: 30px;              /* Distance from the bottom of the screen */
    right: 30px;               /* Distance from the right of the screen */
    width: 60px;               /* Width of the button */
    height: 60px;              /* Height of the button */
    font-size: 24px;           /* Size of the icon/text inside */
}

Modifying the Chat Window

The chat window container is controlled by the .popup-container class. You can adjust its dimensions, border radius, and shadow to match your site's UI.

/* Example: Customizing the chat window dimensions */
.popup-container {
    width: 400px;              /* Width of the chat window */
    height: 670px;             /* Total height of the chat window */
    bottom: 90px;              /* Positioned above the launcher button */
    right: 20px;
    border-radius: 15px;       /* Roundness of the corners */
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2); /* Shadow depth */
}

Adjusting Chat Content Height

If you change the height of the .popup-container, you must also update the .popup-body and .iframe-container classes to ensure the chatbot iframe fills the space correctly.

/* Ensure the internal containers match your custom height */
.popup-body, 
.iframe-container {
    height: 670px; /* Match the height set in .popup-container */
}

CSS Selector Reference

Use the following selectors for targeted styling:

Applying Changes

Navigate to the plugin folder: /wp-content/plugins/supervised-ai-bots/css/.
Open custom-popup-style.css in a text editor.
Save your changes and refresh your website. (You may need to clear your browser cache to see the updates).