JavaScript Event Handling

JavaScript Event Handling

The Supervised AI Bot plugin provides global JavaScript functions to programmatically control the chatbot interface. These functions allow you to create custom interaction flows, such as opening the chat window from a navigation menu link or closing it automatically after a specific user action.

Available Functions

togglePopup()

This function alternates the visibility of the chatbot popup. If the chatbot is currently hidden, calling this function will display it; if it is already visible, the function will hide it.

• Input: None
• Behavior: Toggles the display property of the chatbot container between block and none.

closePopup()

This function explicitly hides the chatbot popup.

• Input: None
• Behavior: Sets the display property of the chatbot container to none.

Usage Examples

You can use these functions within your WordPress theme's custom scripts or directly within HTML attributes to create custom triggers.

Triggering the Chatbot from a Custom Button

If you want to create your own "Chat with Us" button elsewhere on your page, you can call the togglePopup() function:

<!-- Custom HTML button in a page or widget -->
<button type="button" onclick="togglePopup()" class="my-custom-btn">
    Open Chat
</button>

Closing the Chatbot Programmatically

If you have a specific workflow (e.g., a user completes a separate form and you want to close the chat window), you can use closePopup():

// Example: Close the chat after a 5-second delay
setTimeout(function() {
    closePopup();
}, 5000);

Using with Navigation Menus

To trigger the chatbot from a WordPress navigation menu item:

1. Go to Appearance > Menus.
2. Add a Custom Link.
3. Set the URL to #.
4. In the OnClick attribute (or via a listener), call togglePopup().

Note: If your menu editor doesn't show the "Link Relationship (XFN)" or "CSS Classes" fields, enable them in the "Screen Options" tab at the top of the page.

Technical Considerations

The JavaScript functions target the element with the ID popup. Ensure that no other elements on your page use this specific ID to avoid conflicts. These functions are loaded via the custom-popup-script.js file and are available globally on any page where the chatbot shortcode is active.