Placement Best Practices

Optimal Shortcode Placement

To display a Supervised AI chatbot on your site, you must use the [supervised_ai_bot] shortcode. While the shortcode can be placed anywhere within your content, its behavior is governed by fixed-position styling, meaning it will typically appear as a floating element in the bottom-right corner of the viewport.

Mapping Chatbots to IDs

Before placing your shortcodes, ensure you are referencing the correct bot. The id attribute corresponds to the line number of the URL entered in the plugin settings:

• [supervised_ai_bot id="1"] – Displays the bot from the first URL line.
• [supervised_ai_bot id="2"] – Displays the bot from the second URL line.

Strategic Implementation Strategies

1. Page-Specific Targeting

For a highly relevant user experience, place the shortcode only on pages where the bot's specific knowledge base is useful.

• Support Pages: Use a support-trained bot on your /help or /contact pages to deflect common tickets.
• Product/Service Pages: Place a sales-oriented bot on landing pages to answer feature-specific questions and drive conversions.

<!-- Example: Placing a sales bot on a landing page -->
<h3>Get Started Today</h3>
<p>Our AI assistant is available to help you choose the right plan.</p>
[supervised_ai_bot id="2"]

2. Global Footer Integration

If you want the chatbot to be available across your entire website (a "Global Assistant" approach), the most efficient method is to place the shortcode in a global footer widget or a site-wide hook.

• Navigate to Appearance > Widgets.
• Add a Custom HTML or Text block to your Footer area.
• Paste the shortcode: [supervised_ai_bot id="1"].

3. Sidebar vs. Content Area

Because the bot renders as a floating popup (via the circle-button class), it does not disrupt the visual flow of your text.

• Within Posts: You can safely drop the shortcode at the bottom of a blog post. It will not appear as an inline element but will activate the floating trigger for that specific post.
• Avoid Redundancy: Ensure you do not place two different bot shortcodes on the same page, as the floating UI elements may overlap.

Layout and Visibility Considerations

Z-Index and Overlays

The chatbot UI is configured with a high z-index (up to 9999) to ensure it stays above your theme's content. However, if you have other floating elements (like "Back to Top" buttons or Cookie Consent banners), ensure they do not occupy the same bottom: 20px; right: 20px; coordinates.

Mobile Responsiveness

The default styles for the bot container are:

• Width: 400px
• Height: 670px

On mobile devices, these fixed dimensions might exceed the screen width. If you find the bot is cut off on smaller screens, you may need to add custom CSS to your theme to adjust the .popup-container width:

/* Example Mobile Adjustment */
@media (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
        height: 80vh;
    }
}

Preventing Layout Shift

Since the bot is loaded via an iframe inside a hidden container by default, it will not cause Cumulative Layout Shift (CLS) issues. The assets (JS/CSS) are lightweight, but for optimal performance, only load the shortcode on the pages where active engagement is expected.