Placement Strategies

Choosing where to place your Supervised AI Chatbot is critical for maximizing user engagement. The Supervised AI Bots plugin offers flexible implementation options via shortcodes, allowing you to integrate bots into various parts of your WordPress site layout.

Using Shortcodes

The primary method for placing a chatbot is through the [supervised_ai_bot] shortcode. The id attribute corresponds to the line number of the URL you entered in the plugin settings.

<!-- Display the bot associated with the first URL in your settings -->
[supervised_ai_bot id="1"]

<!-- Display the bot associated with the second URL in your settings -->
[supervised_ai_bot id="2"]

In-Content Embedding

Embedding a bot directly within a post or page is ideal for context-specific assistance.

Product Pages: Place a bot next to product descriptions to answer specific technical or pricing questions.
Documentation & Tutorials: Insert a bot at the end of a long guide to help users who may have follow-up questions.
Landing Pages: Use a full-width column to embed the chatbot as the central call-to-action (CTA) for lead generation.

Pro-Tip: Use the WordPress "Columns" block to place text on one side and the chatbot shortcode on the other for a professional, side-by-side layout.

Widget Areas (Sidebar and Footer)

To make a chatbot available across multiple pages without it being the central focus of the content, use the WordPress Widget interface.

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

This strategy is effective for "General Assistant" bots that provide site-wide navigation help or general FAQs.

Persistent Floating Popup

The plugin includes a built-in popup interface (configured via the custom-popup-script.js and custom-popup-style.css). This creates a floating circular button at the bottom-right of the screen.

Behavior: When clicked, the button toggles a fixed-position container (400px width) that displays the chatbot.
Best Use Case: Support-centric bots. This keeps the bot accessible at all times while the user scrolls, without obstructing the main content.
Visual Specifications: The popup is designed to appear 20px from the bottom and 20px from the right of the viewport, ensuring it stays within the "thumb zone" for mobile users.

Best Practices for Bot Placement

To ensure the best user experience, consider the following strategies:

Design Considerations

Height & Width: The default popup height is set to 670px. Ensure your page container or sidebar is tall enough to accommodate the iframe if you are embedding it inline.
Mobile Responsiveness: The floating popup uses a fixed width of 400px. Ensure you test the appearance on mobile devices; for very narrow screens, you may want to use a standard inline embed instead of the popup.
One Bot Per Page: To avoid confusing users and impacting page load speeds, it is recommended to limit placement to one active chatbot per page.