Scripts and Styles Enqueueing
Scripts and Styles Enqueueing
To ensure a seamless user experience, the Supervised AI Bots plugin automatically manages the delivery of necessary frontend assets. These files control the visual presentation of the chatbot interface and the interactive behavior of the popup window.
Frontend Assets
The plugin enqueues two primary files on the frontend of your WordPress site:
custom-popup-style.css: Defines the layout, positioning, and aesthetics of the chatbot container and the floating launch button.custom-popup-script.js: Handles the logic for opening and closing the chatbot interface.
Stylesheets (custom-popup-style.css)
The CSS is responsible for the "Floating Widget" look. Key UI components styled include:
- Floating Button: The circular blue button (
.circle-button) fixed to the bottom-right of the viewport. - Chat Container: The popup window (
.popup-container) which is hidden by default and transitions into view when triggered. - Iframe Responsiveness: The container for the Supervised AI bot (
.iframe-container), which ensures the bot content fits within the designated dimensions (defaulting to 400px width and 670px height).
Overriding Styles
If you wish to customize the appearance (e.g., changing the button color or position), you can add custom CSS to your theme's stylesheet using higher specificity or !important flags to target classes like .circle-button or .popup-container.
JavaScript (custom-popup-script.js)
The JavaScript file provides the functional triggers required for the chatbot to operate without reloading the page. It exposes the following functions to the global scope:
| Function | Description |
| :--- | :--- |
| togglePopup() | Checks the current state of the chatbot window. If hidden, it displays it; if visible, it hides it. |
| closePopup() | Explicitly hides the chatbot window by setting the display property to none. |
Loading Logic
These assets are enqueued using standard WordPress hooks (wp_enqueue_scripts). This ensures that:
- Scripts are loaded in the footer to prevent render-blocking.
- Styles are loaded in the header for a "flash-of-unstyled-content" (FOUC) free experience.
- The assets are only loaded when the plugin is active, maintaining site performance.
<!-- Example of how the assets appear in the site source -->
<link rel="stylesheet" href=".../css/custom-popup-style.css" type="text/css" />
<script src=".../js/custom-popup-script.js"></script>
Dependency Management
The scripts are designed to be lightweight and do not require external libraries like jQuery, ensuring compatibility with most modern WordPress themes and minimizing potential script conflicts.