Popup Logic (JS)

Popup Logic (JS)

The behavior of the chatbot interface is controlled by a lightweight JavaScript file, custom-popup-script.js. This script manages the visibility of the chatbot container, allowing users to open and close the chat interface dynamically without page reloads.

Overview

The script provides two primary functions to manipulate the chatbot's display state. These functions target a specific HTML element with the ID popup.

Functions

togglePopup()

This function acts as a switch to show or hide the chatbot. If the chatbot is currently hidden, calling this function will display it; if it is already visible, the function will hide it.

• Usage: Typically attached to the main floating action button (the "chat bubble").
• Parameters: None.
• Return Type: void

// Example usage in HTML
<div class="circle-button" onclick="togglePopup()">
    <!-- Icon or text here -->
</div>

closePopup()

This function explicitly hides the chatbot interface regardless of its current state. It ensures the display style of the popup is set to none.

• Usage: Typically attached to "Close" or "Dismiss" buttons located inside the chatbot header or overlay.
• Parameters: None.
• Return Type: void

// Example usage in HTML
<button onclick="closePopup()">Close Chat</button>

Integration Requirements

To ensure these functions work correctly, your HTML structure must include an element with the ID popup. This element should wrap your chatbot iframe and associated styling containers.

<!-- Required ID for JS interaction -->
<div id="popup" class="popup-container">
    <div class="popup-body">
        <div class="iframe-container">
            <!-- Chatbot Iframe -->
        </div>
    </div>
</div>

Event Handling

While these functions are global, it is recommended to trigger them via standard onclick event attributes or by adding event listeners in your theme's primary JavaScript file to maintain a clean separation of concerns.

// Adding a listener via JavaScript
document.querySelector('.my-custom-btn').addEventListener('click', togglePopup);