JavaScript Interactions

JavaScript Interactions

The Supervised AI Bots plugin exposes global JavaScript functions that allow you to programmatically control the chatbot interface. This is particularly useful for creating custom "Contact Us" buttons, floating action buttons, or triggering the chat window based on specific user behavior.

Global Functions

togglePopup()

This function switches the visibility state of the chatbot window. If the chatbot is currently hidden, calling this function will display it; if it is visible, the function will hide it.

• Parameters: None
• Use Case: Best used for a single toggle button or a floating icon that manages the chat state.

Example Usage:

<!-- A custom button to open/close the chatbot -->
<button onclick="togglePopup()">
  Chat with us!
</button>

closePopup()

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

• Parameters: None
• Use Case: Useful for "Dismiss" buttons, site navigation events, or closing the bot automatically after a specific user action on the parent page.

Example Usage:

// Close the chatbot window when a specific event occurs
function onFormSubmissionComplete() {
    closePopup();
    console.log("Chat closed after form completion.");
}

Element Targeting

The functions interact with the chatbot container using the ID popup. When creating custom triggers, ensure that the plugin's chatbot shortcode is present on the page, as these functions rely on the DOM structure generated by the plugin.

Advanced Implementation Example

You can combine these functions with standard JavaScript event listeners to trigger the chatbot based on site interactions:

// Automatically open the chat after 5 seconds of page load
window.addEventListener('load', function() {
    setTimeout(function() {
        // Check if the popup is already open before toggling
        var popup = document.getElementById('popup');
        if (popup && popup.style.display !== 'block') {
            togglePopup();
        }
    }, 5000);
});

CSS Requirements

For these functions to operate correctly, the chatbot container expects the following display states:

• Visible: display: block
• Hidden: display: none

If you are overriding the default styles in custom-popup-style.css, ensure the #popup ID maintains compatibility with these display properties.