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:

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;
}