Assets & Enqueueing
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.
| Asset Type | File Name | Purpose |
| :--- | :--- | :--- |
| CSS | custom-popup-style.css | Defines the layout, positioning, and responsiveness of the chat container and the launcher button. |
| JavaScript | custom-popup-script.js | Manages the toggle states (open/close) for the chatbot iframe. |
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 az-indexof9999to ensure it stays above most theme elements..popup-container: The main wrapper for the chatbot iframe. It uses az-indexof1001..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.