CSS Styling & Themes

CSS Styling & Customization

The Supervised AI Bot plugin is designed to be highly customizable. You can modify the appearance of the chatbot container and the launch button by overriding the default styles in custom-popup-style.css or by adding custom CSS to your WordPress theme.

Key CSS Selectors

To modify specific parts of the chatbot interface, target the following classes:

| Selector | Description | | :--- | :--- | | .circle-button | The floating circular button used to open/close the chatbot. | | .popup-container | The main wrapper for the chatbot window. | | .iframe-container | The container holding the chatbot iframe. | | .popup-body | The internal content area of the popup. |

Common Customizations

Changing the Launcher Button

By default, the launcher is a blue circle. You can change its color, size, or position:

/* Change the launcher button to a dark theme with a larger icon */
.circle-button {
    background-color: #333333; /* Dark background */
    width: 70px;               /* Custom width */
    height: 70px;              /* Custom height */
    line-height: 70px;         /* Center the icon vertically */
    bottom: 30px;              /* Distance from bottom */
    right: 30px;               /* Distance from right */
}

Adjusting Chat Window Dimensions

If you want the chatbot window to be larger or smaller, modify the .popup-container:

/* Increase the height and width of the chat window */
.popup-container {
    height: 800px; 
    width: 500px; 
    max-width: 90%; /* Ensures it doesn't break on small screens */
    border-radius: 15px; /* Softer rounded corners */
}

Repositioning the Chatbot

To move the chatbot to the left side of the screen:

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

Creating a Custom Theme

You can combine selectors to create a cohesive look. Below is an example of a "Modern Dark" theme:

/* Apply a dark theme to the chatbot container */
.popup-container {
    background-color: #1a1a1a;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
}

/* Style the launcher to match */
.circle-button {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

/* Ensure the iframe container fills the space correctly */
.iframe-container {
    height: 670px;
    border-radius: 10px;
}

Important Notes

• Z-Index: The launcher button has a z-index of 9999 and the container has 1001. If your site headers or other elements overlap the chatbot, you may need to increase these values.
• Mobile Responsiveness: The default max-width: 800px and width: 400px are designed to work on most screens. For mobile-specific styles, use media queries:

  @media (max-width: 480px) {
      .popup-container {
          width: 95%;
          right: 2.5%;
          bottom: 80px;
      }
  }