UI & Styling

Customizing UI & Styling

The Supervised AI Bots plugin provides a default, clean chat interface consisting of a circular launcher button and a popup iframe container. You can customize the appearance of these elements by adding custom CSS to your WordPress theme or via the "Additional CSS" section in the WordPress Customizer.

The Launcher Button

The floating launcher button is the entry point for your visitors. You can modify its color, size, and icon styling by targeting the .circle-button class.

Default Properties:

• Position: Fixed, 20px from the bottom and right.
• Size: 60px x 60px.
• Color: Blue (#007bff) with white text.

Customization Example: To change the button to a dark theme with a larger size:

/* Change launcher button color and size */
.circle-button {
    background-color: #222222; /* Custom brand color */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Match height to center icon vertically */
    font-size: 30px;   /* Increase icon/text size */
}

The Chat Window Container

The chatbot itself is housed within a popup container (.popup-container) that appears when the launcher is clicked. You can adjust the dimensions and border styling to better fit your site's layout.

Default Properties:

• Dimensions: 400px wide by 670px high.
• Border Radius: 10px.
• Shadow: Subtle 10px spread rgba(0,0,0,0.3).

Customization Example: To make the chat window wider and remove the rounded corners:

/* Adjust the chat window dimensions and corners */
.popup-container {
    width: 500px;         /* Increased width */
    height: 750px;        /* Increased height */
    border-radius: 0px;   /* Squared edges */
    bottom: 90px;         /* Position it higher above the launcher */
}

/* Ensure the iframe scales with the new container height */
.popup-body, .iframe-container {
    height: 750px;
}

Positioning and Visibility

Both the launcher and the chat window use fixed positioning. If the chatbot overlaps with other elements on your site (like "Back to Top" buttons or cookie banners), you can adjust the bottom and right values.

/* Move the entire chat interface to the left side of the screen */
.circle-button, .popup-container {
    right: auto;
    left: 20px;
}

Z-Index Management

The chatbot interface is set to a high z-index to ensure it stays above other content. If your theme's header or other overlays are appearing on top of the chatbot, you may need to increase these values:

• Launcher (.circle-button): Default 9999
• Chat Window (.popup-container): Default 1001

/* Ensure the chatbot is always on the very top layer */
.circle-button {
    z-index: 10000;
}
.popup-container {
    z-index: 10001;
}

Mobile Responsiveness

By default, the chat window has a fixed width. To ensure a better experience on smaller screens, you can add a media query to make the popup take up more screen real estate:

@media (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
        bottom: 85px;
    }
}

Interactive State Styling

You can also style the "hover" state of the launcher button to provide visual feedback to users:

.circle-button:hover {
    background-color: #0056b3; /* Darker shade on hover */
    transform: scale(1.05);    /* Slight growth effect */
    transition: all 0.2s ease;
}