Interaction Logic

Interaction Logic

The custom-popup-script.js file handles the visibility of the chatbot interface on the frontend. It manages the state of the chatbot window, allowing users to open and close the chat interface via a floating button or close controls.

Overview

The interaction logic relies on manipulating the CSS display property of the main chat container. By default, the chatbot is initialized in a hidden state and is toggled into view using the following functions.

Functions

togglePopup()

This function serves as the primary switch for the chatbot interface. It is typically bound to the floating action button (.circle-button) visible on the WordPress site.

• Logic: It retrieves the element with the ID popup. If the element is currently visible (display: block), the function hides it. If it is hidden, the function displays it.
• Usage:

// Example: Manually triggering the popup toggle
togglePopup();

closePopup()

This function provides a explicit method to hide the chatbot interface, regardless of its current state.

• Logic: It targets the element with the ID popup and sets its display property to none.
• Usage:

// Example: Closing the popup via a custom 'X' button or event
closePopup();

DOM Requirements

For the interaction logic to function correctly, the following structure is expected within the rendered HTML (generated by the [supervised_ai_bot] shortcode):

| Element ID | Role | Required State | | :--- | :--- | :--- | | popup | Main Container | Must exist as the parent wrapper for the iframe. | | .circle-button | Trigger | Usually calls togglePopup() via an onclick event. |

Technical Implementation Detail

The script interacts directly with the style.display attribute of the DOM element. The transitions and positioning are governed by the accompanying custom-popup-style.css, which defines the fixed positioning at the bottom-right of the viewport and handles the dimensions of the iframe-container.

/* Corresponding display state managed by the script */
.popup-container {
    display: none; /* Initial state */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1001;
}