Popup & Iframe Logic

Popup & Iframe Logic

The Supervised AI Bot plugin utilizes a floating popup mechanism to display chatbots without interrupting the user's browsing experience. This is achieved through a combination of a fixed-position container and an isolated iframe that loads the Supervised AI interface.

Overview

When a chatbot is embedded via shortcode, the plugin injects a responsive popup interface into the page. This interface consists of two main components:

1. The Trigger Button: A floating circular button located at the bottom-right of the screen.
2. The Popup Container: A hidden window that, when toggled, reveals the chatbot loaded within an iframe.

Interaction Methods

The visibility of the chatbot is controlled by the following public JavaScript functions. These are primarily triggered by user clicks on the UI, but can be referenced if manual integration is required:

togglePopup()

Toggles the visibility of the chatbot window. If the popup is currently hidden, this function displays it; if it is visible, it hides it.

• Behavior: Switches the CSS display property of the #popup element between block and none.

closePopup()

Explicitly hides the chatbot window.

• Behavior: Sets the #popup element to display: none.

Layout and Dimensions

The chatbot is rendered within an iframe to ensure that the bot's styles do not conflict with your WordPress theme. The default dimensions and positioning are as follows:

| Property | Default Value | Description | | :--- | :--- | :--- | | Position | Fixed (Bottom-Right) | The bot remains visible even as the user scrolls the page. | | Width | 400px | Optimized for chat interfaces. | | Height | 670px | Set to provide ample vertical space for conversation history. | | Z-Index | 1001 - 9999 | Ensures the bot and its trigger button appear above other site elements. |

Usage via Shortcode

The logic described above is automatically initialized when you use the [supervised_ai_bot] shortcode. The id attribute determines which URL from your settings is injected into the iframe src.

<!-- Example of how the shortcode renders the logic -->
[supervised_ai_bot id="1"]

CSS Customization

The popup appearance is defined via the custom-popup-style.css file. Users looking to modify the position or size of the bot can override these styles in their theme's "Additional CSS" section:

/* Example: Move the bot to the left side of the screen */
.popup-container, .circle-button {
    right: auto;
    left: 20px;
}

/* Example: Adjust the height for smaller screens */
.popup-container {
    height: 500px;
}

Important Considerations

• Iframe Isolation: Because the bot runs in an iframe, it cannot access the parent page's cookies or sensitive data, ensuring a secure environment for the user.
• Responsiveness: The popup is designed to be fixed to the viewport, ensuring the chatbot is always accessible to the visitor regardless of page length.