Embedding Strategies

Embedding Strategies

The Supervised AI Bots plugin provides a flexible way to integrate AI chatbots into your WordPress site using a shortcode-based system. Depending on your goals—whether it’s a dedicated support page or a global site assistant—you can use the following strategies to embed your bots.

The Shortcode Structure

The primary method for embedding a bot is the [supervised_ai_bot] shortcode. This shortcode identifies which bot to display based on its position in your settings list.

[supervised_ai_bot id="1"]

• id: This corresponds to the row number of the URL provided in the plugin settings page. For example, use id="1" for the first URL and id="2" for the second.

1. In-Content Embedding (Posts and Pages)

This strategy is ideal for dedicated "Contact Us" or "Help Desk" pages where the chatbot is the primary focus of the content.

• How to implement: Paste the shortcode directly into the WordPress Block Editor (Gutenberg) using a Shortcode Block, or into the Text tab of the Classic Editor.
• Best Practice: Surround the shortcode with a <div> or a Container block to control the width and height of the bot's display area.

<!-- Example: Embedding in a specific layout container -->
<div class="my-custom-bot-container">
    [supervised_ai_bot id="1"]
</div>

2. Sidebar and Widget Areas

If you want the chatbot to appear alongside your blog posts or in the footer across multiple pages, use the Widget area.

• How to implement:
  1. Navigate to Appearance > Widgets.
  2. Add a Custom HTML or Shortcode widget to your Sidebar or Footer area.
  3. Enter the shortcode [supervised_ai_bot id="1"].
• Best Practice: Use this for smaller, more compact chatbot interfaces. Ensure your theme's sidebar width is at least 300px to maintain readability within the iframe.

3. Creating a Floating Popup Bot

To create a professional "Chat Bubble" experience that stays fixed as the user scrolls, you can utilize the plugin's built-in popup styles and scripts.

Step 1: Add the HTML Structure Add the following structure to your theme's footer.php or via a "Header and Footer" plugin:

<!-- 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>
    </div>
    <button onclick="closePopup()" style="position: absolute; top: 10px; right: 10px;">Close</button>
</div>

Step 2: Behavior and Appearance

• The .circle-button is fixed to the bottom-right corner by default.
• The .popup-container is hidden initially and toggles visibility when the button is clicked.
• The bot will occupy a fixed height of 670px and a width of 400px within the popup, as defined in the plugin's stylesheet.

Best Practices for Bot Placement

• Contextual Relevance: Place specific bots on specific pages. For example, put a "Sales Bot" (id="1") on product pages and a "Support Bot" (id="2") on documentation pages.
• Mobile Responsiveness: The plugin uses iframes. While the CSS provides a standard width (400px), ensure you test the display on mobile devices. You may need to add custom Media Queries to your WordPress CSS to reduce the width on smaller screens:

  @media (max-width: 480px) {
      .popup-container {
          width: 90%;
          right: 5%;
      }
  }
  

• Load Order: To ensure a smooth user experience, place the shortcode towards the bottom of the page or inside a popup to prevent the iframe loading from slowing down the initial rendering of your primary text content.