Shortcode Usage Reference

Shortcode Usage Reference

The Supervised AI Bots plugin provides a simple shortcode to embed your configured chatbots into any WordPress post, page, or widget area.

Basic Syntax

To display a chatbot, use the following shortcode structure:

[supervised_ai_bot id="YOUR_BOT_ID"]

Attributes

| Attribute | Required | Description | | :--- | :--- | :--- | | id | Yes | The numerical ID corresponding to the specific chatbot URL you wish to display. |

How to Determine the Bot ID

The id attribute is based on the row number of the URL entered in the plugin settings.

1. Navigate to the Supervised AI Bots settings page in your WordPress dashboard.
2. Look at the textarea where you pasted your chatbot URLs.
3. The first URL in the list is id="1", the second URL is id="2", and so on.

Example Configuration: If your settings contain the following:

https://supervised.co/bot/marketing-assistant
https://supervised.co/bot/customer-support

• To display the Marketing Assistant, use: [supervised_ai_bot id="1"]
• To display the Customer Support bot, use: [supervised_ai_bot id="2"]

Usage Examples

In a Page or Post

Simply paste the shortcode directly into the Gutenberg block editor (using a Shortcode block) or the Classic Editor.

<h2>Contact Our Assistant</h2>
<p>If you have questions, click the chat icon below to start a conversation.</p>

[supervised_ai_bot id="1"]

In a Sidebar or Footer Widget

You can add the shortcode to a Text or Shortcode widget to make the chatbot available site-wide or on specific sidebar-enabled pages.

Display Behavior

When the shortcode is processed:

1. Floating Launcher: A circular blue chat button will appear in the bottom-right corner of the screen.
2. Popup Interface: Clicking the button toggles a 400px wide (max 800px on large screens) popup window containing the AI interface.
3. Responsive Design: The chatbot interface is fixed to the viewport, ensuring it remains accessible as the user scrolls.

Note: Only one chatbot should typically be loaded per page to ensure the UI elements (like the floating action button) do not overlap.