Embedding on Posts & Pages

Embedding on Posts & Pages

The Supervised AI Bots plugin uses a shortcode system, making it easy to deploy specific chatbots anywhere within your WordPress content. This section covers how to use the shortcode and best practices for site integration.

The [supervised_ai_bot] Shortcode

To display a chatbot, you must use the [supervised_ai_bot] shortcode followed by the id attribute. The id corresponds directly to the line number of the URL you entered in the plugin settings.

Basic Syntax:

[supervised_ai_bot id="1"]

Determining the Bot ID

The ID is assigned based on the order of URLs in the Supervised AI Bots settings page:

• ID 1: The first URL in the list.
• ID 2: The second URL in the list.
• ID 3: The third URL in the list, and so on.

Placement Best Practices

Because the chatbot renders as a floating popup (triggered by a circular button in the bottom-right corner), your placement strategy should focus on visibility and user intent rather than visual layout flow.

1. Page-Specific Targeting

If you have different bots for different services (e.g., a "Sales Bot" for product pages and a "Support Bot" for documentation), place the corresponding shortcode only on those specific pages.

• How to add: In the WordPress Block Editor (Gutenberg), search for the Shortcode block and paste your code.

2. Using the Sidebar or Footer

If you want a specific chatbot to be available globally or across all blog posts, you can add the shortcode to a Sidebar or Footer widget.

• Navigate to Appearance > Widgets.
• Add a Text or Shortcode widget.
• Paste [supervised_ai_bot id="1"].
• The launcher button will appear on every page where that widget area is active.

3. Avoiding Conflict

The chatbot interface is fixed to the bottom-right of the viewport (bottom: 20px; right: 20px;). To ensure a professional look:

• Ensure you do not have other "Back to Top" buttons or third-party chat widgets overlapping the same corner.
• Test the placement on mobile devices to ensure the chat button does not obscure critical navigation elements.

Usage Examples

Single Bot Implementation

If you have a single general-purpose bot, place this at the bottom of your "Contact Us" page or in a global footer widget:

[supervised_ai_bot id="1"]

Multi-Bot Implementation

If you are managing multiple bots for different departments, your setup might look like this:

• Pricing Page:

  [supervised_ai_bot id="2"]  <!-- Sales Bot -->
  

• Knowledge Base/Help Center:

  [supervised_ai_bot id="3"]  <!-- Technical Support Bot -->
  

User Experience Notes

• Loading: The bot initializes via an iframe once the page loads.
• Interaction: When a user clicks the floating action button (the blue circle), the chat interface will expand upward. Users can close the chat at any time using the toggle.
• Visibility: The bot remains fixed as the user scrolls, providing constant access to AI assistance without interrupting the reading experience.