Customizing Appearance

You can fully customize the look and feel of the Supervised AI Chatbot to match your website's branding by modifying the styles in custom-popup-style.css or by adding these CSS rules to your WordPress theme's "Additional CSS" section.

Launcher Button Customization

The launcher button is the floating circular icon users click to open the chat. You can modify its color, size, and position using the .circle-button class.

/* Change the launcher button color and size */
.circle-button {
    background-color: #007bff; /* Change to your brand color */
    width: 60px;
    height: 60px;
    line-height: 60px;
    bottom: 20px; /* Distance from bottom */
    right: 20px;  /* Distance from right */
}

Chat Window Dimensions

To change how large the chatbot appears when opened, modify the .popup-container. Note that the .iframe-container and .popup-body should generally share the same height to ensure the chat interface fills the window correctly.

/* Adjust the size of the chat window */
.popup-container {
    width: 400px;      /* Width of the popup */
    height: 670px;     /* Total height of the popup */
    max-width: 90%;    /* Ensures responsiveness on smaller screens */
    border-radius: 15px; /* Rounder corners */
}

/* Ensure the internal containers match the new height */
.popup-body, 
.iframe-container {
    height: 670px;
}

Positioning the Chatbot

By default, the chatbot is pinned to the bottom-right corner. If you want to move it to the bottom-left, update the positioning properties for both the button and the container:

/* Move the launcher and chat window to the left side */
.circle-button, 
.popup-container {
    right: auto;
    left: 20px;
}

Styling the Shadow and Borders

You can adjust the "pop" effect of the window by modifying the box shadow or removing the border.

.popup-container {
    box-shadow: 0px 10px 25px rgba(0,0,0,0.1); /* Softer shadow */
    border: 1px solid #eeeeee;               /* Light border */
}

Element Reference Table

Use the following classes as selectors for your custom styles:

Note: When adjusting the height of the chatbot, ensure you update .popup-container, .popup-body, and .iframe-container simultaneously to prevent layout overflow or empty spacing.