Embedding on Pages & Posts

Overview

The Supervised AI Bots plugin uses a standard WordPress shortcode to integrate chatbots into your content. When the shortcode is processed, it renders a floating trigger button in the bottom-right corner of the screen, which users can click to open the chat interface in a popup overlay.

Shortcode Syntax

The primary method for embedding a bot is the [supervised_ai_bot] shortcode. This shortcode requires a specific id attribute to identify which chatbot URL to load.

[supervised_ai_bot id="YOUR_BOT_ID"]

Locating the Bot ID

The id corresponds to the line number of the URL you entered in the Supervised AI Bots settings page:

• Line 1 = id="1"
• Line 2 = id="2"
• Line 3 = id="3"

Implementation Examples

Standard Page Embedding

To add a chatbot to a specific page or post, simply paste the shortcode anywhere within the Gutenberg "Shortcode" block or the Classic Editor text area.

[supervised_ai_bot id="1"]

Global Embedding (via Theme)

If you want the chatbot to appear on every page of your site (such as in the footer), you can call the shortcode within your theme's template files (e.g., footer.php) using the WordPress do_shortcode function:

<?php echo do_shortcode('[supervised_ai_bot id="1"]'); ?>

Layout & Behavior Notes

When embedding chatbots, keep the following behavioral rules in mind to ensure a smooth user experience:

• Fixed Positioning: Regardless of where you place the shortcode within your content, the chat trigger (the circular blue button) and the popup window are fixed to the bottom-right corner of the browser viewport.
• One Bot Per Page: It is recommended to use only one shortcode per page. Including multiple shortcodes with different IDs may cause UI overlaps between the trigger buttons.
• Mobile Responsiveness: The chat popup is designed with a max-width of 800px and a default width of 400px. On smaller mobile screens, the widget remains fixed to the bottom-right to maintain accessibility.
• Z-Index Priority: The chatbot is configured with a high z-index (9999) to ensure it appears above other page elements, including sticky headers and navigation menus.

Troubleshooting

If the chatbot does not appear after adding the shortcode:

1. Verify the ID: Ensure the id matches the correct row number in your plugin settings.
2. Check the URL: Confirm that the URL provided in the settings is a valid Supervised AI chatbot link.
3. Clear Caches: If you are using a caching plugin (e.g., WP Rocket, W3 Total Cache), clear the page cache to reflect the new shortcode addition.