Styling & Customization

The Supervised AI Bots plugin is designed to be easily styled to match your website's branding. All visual elements are controlled via standard CSS classes. You can apply these styles by adding them to your WordPress theme's style.css file or via the Appearance > Customize > Additional CSS section in your WordPress dashboard.

Core CSS Selectors

To modify the chatbot interface, target the following primary classes:

Customizing the Launch Button

The default launch button is a blue circle positioned at the bottom-right of the screen. You can change its color, size, or position.

/* Change the launch button color and size */
.circle-button {
    background-color: #28a745; /* Change to your brand color */
    width: 70px;               /* Increase size */
    height: 70px;              /* Increase size */
    line-height: 70px;         /* Match line-height to height to center icon */
    font-size: 30px;           /* Increase icon/text size */
}

/* Add a hover effect */
.circle-button:hover {
    background-color: #218838;
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

Adjusting Chat Window Dimensions

By default, the chatbot window is 400px wide and 670px tall. Use the following code to adjust the size for larger screens or specific layouts:

/* Increase the chat window size */
.popup-container {
    width: 450px;       /* Custom width */
    height: 750px;      /* Custom height */
    max-width: 90%;     /* Ensure responsiveness on mobile */
    border-radius: 20px; /* Rounder corners */
}

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

Repositioning the Chatbot

If you want the chatbot to appear on the left side of the screen instead of the right, you must update both the button and the container:

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

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

Mobile Responsiveness

The chatbot is fixed-position. To ensure it looks good on smaller mobile devices, you can use media queries to adjust the width:

@media (max-width: 480px) {
    .popup-container {
        width: 95%;
        right: 2.5%;
        bottom: 80px; /* Position above the launch button */
        height: 80vh; /* Use viewport height for better scaling */
    }
    
    .popup-body, 
    .iframe-container {
        height: 80vh;
    }
}

Advanced Styling

You can hide specific default elements or add custom shadows to the container to make it stand out:

/* Add a more prominent shadow and border */
.popup-container {
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #ddd;
}

/* The header and footer are hidden by default, 
   but you can enable them if you add custom HTML */
.popup-header {
    display: block;
    background: #f8f9fa;
    padding: 10px;
    border-bottom: 1px solid #eee;
}