Iframe Security & Rendering

Iframe Rendering and Security

The Supervised AI Chatbot plugin utilizes a specialized iframe-based architecture to embed external chatbot interfaces into your WordPress site. This ensures that the AI functionality remains isolated from your site's core styles while providing a seamless overlay experience.

Rendering Architecture

When you use the [supervised_ai_bot id="X"] shortcode, the plugin generates a fixed-position container at the bottom-right of the viewport. This container wraps an iframe-container that loads the Supervised AI URL provided in the settings.

Default Dimensions

The chatbot is rendered with the following default constraints to ensure optimal visibility on both desktop and mobile devices:

• Width: 400px (with a max-width of 800px for larger displays).
• Height: 670px.
• Position: Fixed, 20px from the bottom and 20px from the right of the screen.

/* Core rendering styles for the chatbot container */
.popup-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 670px;
    width: 400px;
    z-index: 1001;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

Security Considerations

Because the plugin loads content from the external supervised.co domain (or your specific AI instance), several security protocols are in place:

1. Cross-Origin Resource Sharing (CORS) & Frame Headers

The external chatbot URL must permit being "framed" by your WordPress domain. Supervised AI URLs are pre-configured to allow this embedding. If you are using a custom domain, ensure your server does not send a X-Frame-Options: DENY or SAMEORIGIN header, as this will prevent the bot from rendering.

2. Protocol Security (HTTPS)

To maintain the security integrity of your website, it is strongly recommended (and often required by modern browsers) that your WordPress site and the Chatbot URL both use HTTPS.

• If your site is running on HTTPS and you attempt to load an http:// chatbot URL, the browser will block the "Mixed Content," and the chatbot will not appear.

3. Sandbox Isolation

The iframe serves as a security sandbox. The chatbot's scripts and styles are contained within the iframe, preventing them from interfering with your WordPress theme's JavaScript or global CSS variables.

Customizing the UI Rendering

While the plugin provides standard styles, developers can override the rendering behavior by adding custom CSS to their theme.

Example: Adjusting the Chatbot Height If your bot requires more vertical space, you can target the popup classes:

/* Increase height for specific bot requirements */
.popup-container, 
.popup-body, 
.iframe-container {
    height: 800px !important;
}

Visibility Control

The rendering engine uses a simple state-toggle mechanism. The iframe is always present in the DOM once the shortcode is triggered but remains hidden (display: none) until the circle button is clicked. This ensures the chatbot is pre-loaded and ready for immediate interaction when the user opens the popup.