Interaction Logic (JS)

Interaction Logic (JS)

The frontend interaction of the Supervised AI Chatbot is managed by a lightweight JavaScript script. This logic controls the visibility of the chatbot interface, allowing users to open and close the chat window through clicks on the launcher or within the popup itself.

Visibility Management

The core functionality relies on two main functions that manipulate the DOM to show or hide the chatbot container.

togglePopup()

This is the primary function used to switch the visibility state of the chatbot. When called, it checks the current display status of the chatbot container and toggles it between visible and hidden.

• Behavior:
  • If the chatbot is hidden, it sets the display to block.
  • If the chatbot is visible, it sets the display to none.
• Target Element: Requires an element with the ID popup.

closePopup()

This function specifically hides the chatbot interface. It is typically used for "close" buttons or dismissive actions within the chatbot UI.

• Behavior: Forces the chatbot container's display style to none.
• Target Element: Requires an element with the ID popup.

Implementation Example

The functions are designed to be attached to event listeners on the frontend. In a standard implementation, togglePopup() is bound to the floating action button (launcher), while closePopup() can be used for internal navigation or close triggers.

<!-- The Launcher Button -->
<div class="circle-button" onclick="togglePopup()">
    <!-- Icon or Label -->
    💬
</div>

<!-- The Chatbot Container -->
<div id="popup" class="popup-container">
    <div class="iframe-container">
        <!-- Chatbot Iframe resides here -->
        <iframe src="YOUR_BOT_URL"></iframe>
    </div>
    <!-- Optional: Internal Close Button -->
    <button onclick="closePopup()">Close</button>
</div>

Technical Notes

• ID Dependency: The script explicitly looks for document.getElementById('popup'). If you are customizing the HTML templates, ensure the main container retains the popup ID for the interaction logic to function.
• Global Scope: These functions are defined in the global scope to ensure compatibility with inline onclick attributes used within the WordPress shortcode output.