Script Behaviors

Script Behaviors

The wpai plugin uses a lightweight JavaScript handler to manage how the chatbot interface interacts with user actions. This script controls the visibility of the chat window, allowing for a seamless transition between a floating action button and the active chat interface.

Core Interaction Functions

The following functions are available globally and can be used to programmatically control the chatbot popup from your WordPress theme or custom scripts.

togglePopup()

This is the primary function used to switch the visibility state of the chatbot. If the chatbot is hidden, this function displays it; if it is already open, it hides it.

• Behavior: Targets the element with the ID popup.
• Usage Example:

  <!-- Custom button to open/close the bot -->
  <button onclick="togglePopup()">Chat with us</button>
  

closePopup()

This function explicitly hides the chatbot interface, regardless of its current state. It is used for "close" buttons or "cancel" actions within the UI.

• Behavior: Sets the display style of the popup element to none.
• Usage Example:

  // Close the popup after a specific user action
  document.getElementById('my-custom-btn').addEventListener('click', function() {
      closePopup();
  });
  

Default Event Handlers

The plugin automatically wires these behaviors to the following UI components:

1. Floating Action Button (.circle-button): A fixed circular button positioned at the bottom-right of the screen. Clicking this triggers togglePopup().
2. Popup Container (.popup-container): The wrapper for the chatbot iframe. Its visibility is toggled by the script.

Customizing Interaction Logic

If you wish to modify how the bot responds to user clicks, you can override these behaviors in your theme's JavaScript files.

Example: Auto-opening the bot after a delay You can trigger the script behavior automatically to grab a visitor's attention:

// Automatically open the chatbot after 5 seconds
window.addEventListener('load', function() {
    setTimeout(function() {
        var popup = document.getElementById('popup');
        if (popup && popup.style.display !== 'block') {
            togglePopup();
        }
    }, 5000);
});

Display Constants

The script interacts with a UI that has the following fixed behavioral constraints (defined in the companion CSS):

| Property | Default Value | Description | | :--- | :--- | :--- | | Position | Fixed | Stays in the bottom-right corner during scroll. | | Height | 670px | The standard height of the chat window. | | Width | 400px | The default width (expandable via CSS). | | Z-Index | 9999 | Ensures the bot appears above other page elements. |

Technical Notes

• Target ID: The script specifically looks for an HTML element with the ID popup. If you are creating a custom template, ensure your container uses this ID for the functions to work.
• Iframe Loading: The script manages the container visibility only; the Supervised AI content is loaded via an iframe within the .iframe-container to ensure your site's performance is not impacted by the bot's processing.