Styling the Popup

To ensure the Supervised AI Chatbot matches your website’s branding, you can modify the custom-popup-style.css file located in the plugin directory. This stylesheet controls the appearance of both the floating launcher button and the chat window itself.

Common Customizations

1. Changing the Launcher Button Color

By default, the floating circle button is blue. To change this to your brand's primary color, locate the .circle-button class and update the background-color property.

.circle-button {
    background-color: #FF5733; /* Change to your brand color */
    color: #ffffff;           /* Change icon color */
}

2. Adjusting Popup Dimensions

The chat window is set to a default width of 400px and a height of 670px. If you wish to make the chat interface larger or smaller, update the height and width properties in both the .popup-container and the .iframe-container.

.popup-container {
    width: 450px;  /* Adjust width */
    height: 750px; /* Adjust height */
}

.iframe-container {
    height: 750px; /* Ensure this matches the container height */
}

3. Repositioning the Chatbot

If the chatbot overlaps with other elements on your site (like a "Back to Top" button), you can move it from the bottom-right to the bottom-left by adjusting the position properties.

/* Move the launcher button */
.circle-button {
    right: auto;
    left: 20px;
}

/* Move the popup window */
.popup-container {
    right: auto;
    left: 20px;
}

CSS Class Reference

Use the following selectors to apply custom styles:

Adding Custom CSS

You can apply these changes in two ways:

Direct Edit: Edit the custom-popup-style.css file within the plugin folder.
WordPress Customizer: Navigate to Appearance > Customize > Additional CSS in your WordPress dashboard and paste your overrides there. Using the Customizer is recommended as it prevents your changes from being overwritten during plugin updates.