CSS & Responsiveness

Visual Customization and Layout

The Supervised AI Bot uses a modern, floating "widget" design that remains accessible to users regardless of their scroll position. The interface consists of two primary components: the Trigger Button and the Chat Popup Container.

Default Positioning

The chatbot is configured to appear in the bottom-right corner of the browser window. This ensures it does not interfere with primary website navigation or content flow.

• Placement: Fixed 20px from the bottom and 20px from the right of the viewport.
• Layering (Z-Index): The bot uses a high z-index (up to 9999) to ensure the chat interface and toggle button appear above all other theme elements, including headers and sticky footers.

The Trigger Button

Users interact with a floating action button (FAB) to open and close the chat interface.

| Attribute | Default Value | Description | | :--- | :--- | :--- | | Shape | Circular | 60px x 60px dimensions with a 50% border-radius. | | Color | #007bff (Blue) | The primary background color of the toggle button. | | Icon | White Text | Centered text/icon logic for clear visibility. |

Popup Dimensions

The chat window is designed to provide a spacious conversational area while maintaining a compact footprint.

• Height: Fixed at 670px.
• Width: Defaults to 400px, providing ample space for text-heavy AI interactions.
• Constraints: Includes a max-width property of 800px to prevent the container from over-expanding on ultra-wide displays if modified.
• Shadow: A subtle box-shadow (0px 0px 10px) is applied to differentiate the chat window from the website background.

Responsiveness & Adaptability

The plugin uses a combination of fixed and relative styling to manage its presence across different devices.

Container Scaling

The iframe within the popup is set to 100% width and height of its parent container. This ensures that the AI chat interface scales perfectly to the boundaries of the popup window without scrollbars or clipping.

Mobile Considerations

In its default state, the popup maintains a fixed width of 400px. Users on mobile devices with smaller screens may wish to apply CSS overrides to ensure the bot occupies the full width of the screen for better readability.

Custom Styling (Overrides)

If you need to change the appearance (such as the button color or the widget's position) to match your brand, you can add custom CSS to your WordPress theme.

Example: Changing the Bot Color and Moving it to the Left

/* Change the floating button color to Green */
.circle-button {
    background-color: #28a745 !important;
    left: 20px !important; /* Move button to the left */
    right: auto !important;
}

/* Adjust the popup container to appear on the left */
.popup-container {
    left: 20px !important;
    right: auto !important;
}

Example: Making the Popup Mobile-Friendly To ensure the chat window fits on smaller mobile screens (e.g., under 480px), you can use a media query:

@media screen and (max-width: 480px) {
    .popup-container {
        width: 90% !important;
        right: 5% !important;
        left: 5% !important;
        bottom: 80px !important;
    }
}

Internal Style References

The following CSS classes are used by the plugin and can be targeted for advanced customization:

• .circle-button: The floating circular toggle button.
• .popup-container: The main wrapper for the chatbot window.
• .iframe-container: The wrapper ensures the AI content maintains the correct aspect ratio and overflow settings.
• .popup-body: The internal section housing the bot content.