Behavior & Animation (JS)

Chatbot Interaction Logic

The wpai plugin uses a straightforward JavaScript implementation to manage how the chatbot interface appears and disappears on your WordPress site. The behavior is centered around a "Toggle" mechanism, allowing the chat window to remain hidden until the visitor chooses to engage.

Popup Visibility Management

The visibility of the chatbot is controlled by manipulating the display property of the popup container. By default, the chatbot is hidden to ensure a non-intrusive browsing experience. The interaction is handled by two main functions:

• Toggle Behavior: A single action that switches between showing and hiding the chatbot.
• Close Behavior: An explicit action to hide the chatbot, regardless of its current state.

Function Reference

togglePopup()

This is the primary function used to open and close the chatbot interface. It checks the current state of the element with the ID popup.

• Action: If the chatbot is currently visible (display: block), it hides it. If it is hidden, it makes it visible.
• Usage: Typically bound to the floating action button (the blue circle) at the bottom right of the screen.

// Example: Manual trigger from a custom button
<button onclick="togglePopup()">Chat with AI</button>

closePopup()

This function provides an explicit way to hide the chatbot window.

• Action: Sets the display style of the popup element to none.
• Usage: Useful for "Close" icons inside the chat window or for programmatically closing the chat after a specific user action.

// Example: Closing the popup programmatically
closePopup();

Integration with UI Elements

The behavior script is designed to work in tandem with the following UI components:

1. The Floating Button (.circle-button): Serves as the trigger for togglePopup(). It is fixed to the bottom right of the viewport to remain accessible as users scroll.
2. The Popup Container (#popup): The wrapper that holds the chatbot iframe. The JavaScript targets this ID specifically to change visibility.

Implementation Example

To ensure the behavior works correctly, your HTML structure should include an element with the ID popup. Below is the standard implementation pattern used by the plugin:

<!-- The floating trigger button -->
<div class="circle-button" onclick="togglePopup()">
    <span>?</span>
</div>

<!-- The chatbot container managed by the JS functions -->
<div id="popup" class="popup-container">
    <div class="popup-body">
        <div class="iframe-container">
            <!-- Supervised AI Chatbot Iframe -->
            <iframe src="YOUR_BOT_URL"></iframe>
        </div>
    </div>
</div>

Animation Notes

The current version utilizes instant state switching (display: block vs display: none). For developers looking to add custom CSS transitions (like fades or slides), it is recommended to modify the CSS .popup-container to use opacity and visibility properties in conjunction with the JavaScript toggle logic.