Integration Examples

Integration Examples

The Supervised AI Bots plugin is designed to be flexible, allowing you to deploy your AI agents across different parts of your WordPress site using a simple shortcode system.

Basic Shortcode Usage

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

Example: Displaying your primary bot If your bot URL is on the first line of the settings page:

[supervised_ai_bot id="1"]

Embedding in Pages and Posts

You can embed a chatbot directly into the flow of your content. This is ideal for "Contact Us" pages or dedicated "AI Assistant" sections.

1. Open the WordPress Editor for your page or post.
2. Add a Shortcode block.
3. Enter the shortcode for the desired bot:

   <h3>Chat with our Support Agent</h3>
   [supervised_ai_bot id="2"]
   

Adding to Sidebar or Footer Widgets

If your theme supports widget areas, you can place a chatbot in a sidebar or footer to make it accessible site-wide.

1. Navigate to Appearance > Widgets.
2. Add a Custom HTML or Shortcode block to your preferred widget area (e.g., "Main Sidebar").
3. Insert the shortcode:

   [supervised_ai_bot id="1"]
   

Advanced: Creating a Floating Popup Toggle

Using the provided styles and scripts, you can create a floating "Chat Bubble" that opens the bot in a professional popup window at the bottom-right of the screen.

1. Add the HTML Structure

Add this code to a "Custom HTML" block in your footer or a site-wide hook:

<!-- The Floating Button -->
<div class="circle-button" onclick="togglePopup()">💬</div>

<!-- The Popup Container -->
<div id="popup" class="popup-container">
    <div class="popup-body">
        <div class="iframe-container">
            [supervised_ai_bot id="1"]
        </div>
        <button onclick="closePopup()" style="position: absolute; top: 10px; right: 10px;">✕</button>
    </div>
</div>

2. Why this works

• The Button: The circle-button class creates a fixed blue circle. Clicking it triggers the togglePopup() function.
• The Container: The popup-container is hidden by default (display: none) and positioned at the bottom-right via CSS.
• The Shortcode: The [supervised_ai_bot] shortcode generates the iframe inside the iframe-container, ensuring the bot fits perfectly within the popup dimensions (670px height).

Implementation Logic for Multiple Bots

If you have configured multiple URLs in the settings, you can call them independently across your site:

| Scenario | Shortcode | | :--- | :--- | | Sales Bot (URL on Line 1) | [supervised_ai_bot id="1"] | | Technical Support (URL on Line 2) | [supervised_ai_bot id="2"] | | Billing Assistant (URL on Line 3) | [supervised_ai_bot id="3"] |

Note: Ensure that the ID used in the shortcode matches the line number of the URL in the "Supervised AI Bots" settings page. If you remove a line, IDs for subsequent bots will shift up.