Implementing Shortcodes

Using the Chatbot Shortcode

The Supervised AI Bots plugin provides a simple shortcode to embed your configured chatbots anywhere on your WordPress site. This allows you to place specific bots on specific pages, or even include multiple bots across different sections of your website.

Basic Syntax

To display a chatbot, use the following shortcode format:

[supervised_ai_bot id="1"]

Shortcode Attributes

The [supervised_ai_bot] shortcode accepts one primary attribute:

| Attribute | Required | Description | | :--- | :--- | :--- | | id | Yes | The row number of the chatbot URL as defined in the plugin settings page. |

How to Find Your Bot ID

The id corresponds directly to the order in which you listed your chatbot URLs in the settings:

1. Navigate to Settings > Supervised AI Bots in your WordPress dashboard.
2. Look at the Chatbot URLs textarea.
3. The first URL in the list is id="1", the second URL is id="2", and so on.

Implementation Examples

Adding a Bot to a Post or Page

Simply paste the shortcode directly into the Block Editor (Gutenberg) using a Shortcode block, or into the text area of the Classic Editor.

<!-- This will load the first bot in your settings list -->
[supervised_ai_bot id="1"]

Using with Page Builders

If you are using page builders like Elementor, Divi, or Beaver Builder, drag a "Shortcode" or "Text" widget into your layout and paste the shortcode there.

Display Behavior

Once the shortcode is added to a page:

• Floating Launcher: A circular blue chat icon will appear at the bottom-right corner of the screen.
• Interactive Popup: Clicking the icon toggles a specialized popup window (400px wide by 670px high) containing your Supervised AI chatbot interface.
• Conflict Prevention: The bot uses a high z-index to ensure it stays above other page elements.

Troubleshooting

• Bot not appearing: Ensure you have entered a valid URL in the plugin settings and that the id matches the correct row.
• Layout Issues: The chatbot is designed to be fixed to the bottom-right of the viewport. If it overlaps critical site navigation, you may need to adjust your theme's footer padding.