Styling & Themes

The appearance of the Supervised AI chatbot can be customized to match your website's branding. By modifying the CSS styles, you can adjust the dimensions, colors, and positioning of both the chat launcher button and the chat window.

Modifying the Launcher Button

The launcher is the floating circular button that users click to open the chat interface. You can customize its appearance by targeting the .circle-button class.

Common customizations:

Background Color: Change the button color to match your brand.
Position: Move the button to the left side of the screen.
Size: Increase or decrease the button dimensions.

/* Example: Changing button color and size */
.circle-button {
    background-color: #ff5733; /* Change to your brand color */
    width: 70px;
    height: 70px;
    line-height: 70px;
    bottom: 30px;
    right: 30px;
}

Customizing the Chat Window

The chat window (the container that holds the chatbot iframe) is styled using the .popup-container class. You can adjust its height, width, and border radius to fit your site's layout.

Key properties to adjust:

Dimensions: Control the height and width.
Corner Radius: Modify border-radius for a sharper or more rounded look.
Shadow: Adjust the box-shadow to change the depth of the window.

/* Example: Adjusting chat window dimensions */
.popup-container {
    height: 500px;  /* Default is 670px */
    width: 350px;   /* Default is 400px */
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}

Adjusting the Iframe Display

The chatbot content is loaded inside an iframe within the .iframe-container. While the content inside the iframe is managed by the Supervised AI platform, you can control the container's height to ensure it matches your popup window.

.iframe-container {
    height: 500px; /* Should match the height of .popup-container */
}

Positioning: Moving to the Left

By default, the chatbot appears in the bottom-right corner. To move it to the bottom-left, update the positioning properties for both the button and the container:

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

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

Implementation Tip

For best practices, do not modify the plugin's core files directly, as updates may overwrite your changes. Instead, add your custom CSS to the Additional CSS section in the WordPress Customizer (Appearance > Customize > Additional CSS) or within your theme's stylesheet.