Assets & Enqueueing

To ensure a seamless user experience, the Supervised AI Bots plugin automatically loads the necessary styles and scripts required to render the chatbot interface on your WordPress site. This section provides details on the assets included and how they interact with your theme.

Frontend Assets

The plugin enqueues two primary files on the frontend of your site. These assets are responsible for the appearance of the floating chat button and the logic for opening/closing the chat popup.

Stylesheet Details (`custom-popup-style.css`)

The plugin uses fixed positioning to ensure the chatbot is always accessible to your visitors. By default, the chat launcher is positioned at the bottom-right of the viewport.

Key CSS Classes:

.circle-button: The floating trigger button. It uses a z-index of 9999 to ensure it stays above most theme elements.
.popup-container: The main wrapper for the chatbot iframe. It uses a z-index of 1001.
.iframe-container: Ensures the Supervised AI bot scales correctly within the popup dimensions.

Script Details (`custom-popup-script.js`)

The JavaScript is lightweight and dependency-free (it does not require jQuery). It provides two global functions used by the interface:

togglePopup(): Switches the visibility of the chat window.
closePopup(): Explicitly hides the chat window.

Theme Compatibility & Overrides

The plugin is designed to work with any standard WordPress theme. However, if you experience layout issues or wish to customize the appearance, you can override the default styles.

Adjusting Z-Index

If your theme has sticky headers or other floating elements that overlap with the chatbot, you can add custom CSS to your theme's "Additional CSS" section:

/* Example: Move the button higher if it overlaps with a 'Back to Top' button */
.circle-button {
    bottom: 80px !important;
}

/* Example: Ensure the chat stays above a specific theme element */
.popup-container {
    z-index: 10000 !important;
}

Customizing the Launcher Color

While the default launcher color is blue (#007bff), you can change it to match your branding:

.circle-button {
    background-color: #YOUR_HEX_CODE !important;
}

Loading Logic

Assets are enqueued using the standard WordPress wp_enqueue_scripts hook. To maintain site performance, these assets are typically only loaded when the [supervised_ai_bot] shortcode is present or based on the plugin's global configuration settings.

Assets & Enqueueing