Asset Enqueueing
Asset Enqueueing
To ensure optimal performance and prevent unnecessary bloat on your WordPress site, the Supervised AI Bots plugin conditionally loads its styling and functional assets. This ensures that the CSS and JavaScript required to render the chatbot interface are only present when the plugin is active and utilized.
Included Assets
The plugin relies on two primary asset files to manage the chatbot's UI/UX:
| Asset Name | Type | Description |
| :--- | :--- | :--- |
| custom-popup-style.css | CSS | Handles the layout, positioning (fixed bottom-right), and responsiveness of the chatbot container and the floating toggle button. |
| custom-popup-script.js | JavaScript | Manages the interaction logic, such as opening and closing the chatbot popup when the user clicks the trigger button. |
Automatic Integration
The plugin automatically hooks into the standard WordPress wp_enqueue_scripts action. You do not need to manually add link tags or script tags to your theme's header or footer.
The assets are enqueued with the following characteristics:
- Style Specificity: The CSS is scoped to the chatbot container (
.popup-container) and the trigger button (.circle-button) to avoid conflicts with your theme's existing styles. - Script Loading: The JavaScript is lightweight and provides global functions for popup management.
Technical Usage for Developers
While the plugin handles enqueueing automatically, developers can interact with the popup using the following JavaScript functions available in the global scope once the script is loaded:
togglePopup()
Toggles the visibility of the chatbot window. If the window is currently hidden (display: none), it will be shown; otherwise, it will be hidden.
// Example: Trigger the chatbot popup from a custom button
document.querySelector('#my-custom-button').addEventListener('click', function() {
togglePopup();
});
closePopup()
Explicitly closes the chatbot window regardless of its current state.
// Example: Close the popup after a specific user action
closePopup();
CSS Customization
The chatbot interface uses a fixed-position container. If you need to override the default dimensions (Width: 400px, Height: 670px) or the button color, you can target the classes in your theme's "Additional CSS" section:
/* Example: Changing the trigger button color */
.circle-button {
background-color: #ff5733 !important; /* Your custom color */
}
/* Example: Adjusting the popup width on larger screens */
.popup-container {
width: 450px;
}