Embedding Bots

Overview

The Supervised AI Bots plugin uses a simple shortcode system to render chatbots. Once you have configured your bot URLs in the plugin settings, you can embed them anywhere that supports WordPress shortcodes, including pages, posts, and widget areas.

The Shortcode Syntax

To display a bot, use the following shortcode:

[supervised_ai_bot id="X"]

Parameters

• id (Required): The numerical index of the bot URL you wish to display.
  • The ID corresponds to the line number in the Supervised AI Bots settings page.
  • Example: If you entered three URLs, use id="1" for the first, id="2" for the second, and so on.

Embedding in Posts and Pages

You can place a chatbot on specific landing pages or blog posts to provide context-aware assistance to your readers.

1. Open the Post or Page editor in your WordPress dashboard.
2. Gutenberg (Block Editor): Add a "Shortcode" block and paste [supervised_ai_bot id="1"].
3. Classic Editor: Paste the shortcode directly into the text editor where you want the bot trigger to initialize.
4. Publish/Update the page.

Note: Because the chatbot is designed as a floating popup (appearing in the bottom-right corner), the shortcode can be placed anywhere in the content body without affecting your page layout.

Embedding in Widget Areas (Global Display)

If you want a chatbot to appear sitewide (e.g., on every page of your site), the best practice is to add the shortcode to a Sidebar or Footer widget area.

1. Navigate to Appearance > Widgets.
2. Add a Custom HTML or Text widget to your "Footer" or "Sidebar" area.
3. Paste your shortcode: [supervised_ai_bot id="1"].
4. Save the widget.

The bot's floating launch button will now be visible across all pages that render that widget area.

User Experience & Interface

When the shortcode is active on a page:

• Launch Button: A blue circular button will appear in the bottom-right corner of the screen.
• Interaction: When a visitor clicks the button, the chatbot interface will slide up in a dedicated popup container (400px width).
• Dismissing: Visitors can toggle the button again to hide the chat interface.

Best Practices

• Avoid Conflicts: Avoid placing multiple different chatbot shortcodes on the same page. This can cause interface overlaps since all bots default to the same fixed screen position (bottom-right).
• URL Management: Ensure your URLs in the settings page are valid and start with https://.
• Testing: Always view your page in an Incognito/Private window after adding a shortcode to ensure the iframe loads correctly and does not conflict with your theme's existing z-index layers.