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
displayproperty of the chatbot container betweenblockandnone.
closePopup()
This function explicitly hides the chatbot popup.
- Input: None
- Behavior: Sets the
displayproperty of the chatbot container tonone.
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:
- Go to Appearance > Menus.
- Add a Custom Link.
- Set the URL to
#. - 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.