Modifying Behavior

Modifying Chatbot Behavior

The Supervised AI Bots plugin provides a set of JavaScript functions and CSS classes that allow you to control when and how the chatbot appears on your site. You can use these to trigger the bot from custom buttons, navigation links, or to change its default styling.

JavaScript Triggers

The plugin exposes global JavaScript functions that interact with the chatbot popup. You can call these functions from your own scripts or directly within HTML attributes.

togglePopup()

This function switches the visibility of the chatbot popup. If the bot is hidden, it will open; if it is open, it will close.

Usage Example:

<!-- Trigger the chatbot from a custom text link -->
<a href="javascript:void(0);" onclick="togglePopup();">Chat with our AI</a>

closePopup()

This function explicitly hides the chatbot popup regardless of its current state.

Usage Example:

<!-- A custom button to dismiss the chat -->
<button type="button" onclick="closePopup();">Close Assistant</button>

Customizing Display Logic

By default, the chatbot is triggered by a floating circular button in the bottom-right corner of the screen. You can modify the appearance and positioning by overriding the plugin's CSS in your theme's stylesheet or via the WordPress Customizer.

Adjusting Position and Size

The main chatbot window is contained within the .popup-container class. To move the bot or change its dimensions, target this class:

/* Move the popup to the left side of the screen */
.popup-container {
    right: auto;
    left: 20px;
}

/* Increase the height of the chatbot window */
.popup-container, 
.popup-body, 
.iframe-container {
    height: 800px;
}

Customizing the Launch Button

The floating toggle button uses the .circle-button class. You can change its color or hide it entirely if you prefer to use your own custom triggers:

/* Change the launch button color to green */
.circle-button {
    background-color: #28a745;
}

/* Hide the default launch button (if using custom links) */
.circle-button {
    display: none;
}

Script and Style Loading

The plugin's behavior is defined in custom-popup-script.js and custom-popup-style.css. If you are a developer looking to extend the functionality:

• Internal Logic: The togglePopup function checks the display property of the id="popup" element.
• DOM Dependencies: Ensure any custom elements you create are loaded after the plugin's shortcode to prevent "undefined" errors, or use standard event listeners:

document.addEventListener('DOMContentLoaded', function() {
    // Example: Open the bot automatically after 5 seconds
    setTimeout(function() {
        togglePopup();
    }, 5000);
});