Customizing Visuals (CSS)

The Supervised AI Bot widget is designed to be flexible and can be styled to match your website's branding. You can modify the appearance by overriding the styles in the custom-popup-style.css file or by adding custom CSS to your WordPress theme.

Targeting Layout Components

The widget consists of two main visual elements: the Launcher Button (the circle used to open the chat) and the Chat Container (the popup window containing the bot).

1. Styling the Launcher Button

The launcher is controlled by the .circle-button class. You can change its size, color, and position.

/* Example: Changing the launcher color and size */
.circle-button {
    background-color: #ff5722; /* Change to your brand color */
    width: 70px;               /* Increase width */
    height: 70px;              /* Increase height */
    line-height: 70px;         /* Match height to center the icon */
    bottom: 30px;              /* Move further from the bottom */
    right: 30px;               /* Move further from the right */
}

2. Styling the Chat Container

The chat window itself is controlled by the .popup-container class. You can adjust the dimensions to better fit your chatbot's interface.

/* Example: Adjusting the chat window dimensions */
.popup-container {
    width: 450px;              /* Set custom width */
    height: 700px;             /* Set custom height */
    border-radius: 15px;       /* Round the corners more */
    box-shadow: 0px 5px 20px rgba(0,0,0,0.2); /* Soften the shadow */
}

Positioning the Widget

By default, the widget appears in the bottom-right corner. To move it to the bottom-left, you must update both the launcher and the container:

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

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

Responsive Adjustments

On smaller screens, you may want the chatbot to occupy more width. Use media queries to ensure a good mobile experience:

@media screen and (max-width: 480px) {
    .popup-container {
        width: 90%;            /* Scale to screen width */
        right: 5%;             /* Center horizontally */
        bottom: 90px;          /* Shift up to stay above the launcher */
    }
}

CSS Class Reference

Note: The .popup-header and .popup-footer classes are set to display: none by default to provide a clean, "headless" chatbot experience. If you wish to add a custom header, you must change the display property to block and provide content within the plugin's template files.