Shortcode Implementation

Shortcode Implementation

The Supervised AI Bots plugin uses a simple but powerful shortcode system to render your chatbots. This allows you to precisely control which bot appears on specific pages, posts, or custom post types across your WordPress site.

The [supervised_ai_bot] Shortcode

To display a chatbot, you must use the [supervised_ai_bot] shortcode paired with a specific id. When a page containing this shortcode is loaded, the plugin initializes a floating chat trigger (a blue circular button) at the bottom-right of the viewport, which opens the AI interface when clicked.

Understanding the ID Attribute

The id attribute is the core configuration parameter for the shortcode. It acts as a pointer to the specific bot URL you saved in the plugin settings.

The ID system follows a row-based mapping:

1. Navigate to the Supervised AI Bots settings page in your dashboard.
2. View the list of URLs you entered in the configuration textarea.
3. The order of these URLs determines their ID:
   • The URL on Line 1 corresponds to id="1".
   • The URL on Line 2 corresponds to id="2".
   • ...and so on.

Usage Examples

Displaying your primary chatbot: To embed the first bot URL in your list, use:

[supervised_ai_bot id="1"]

Displaying an alternative chatbot: If you have multiple bots configured for different departments (e.g., Sales vs. Support), use the corresponding row number:

[supervised_ai_bot id="2"]

Implementation Guidelines

In the Block Editor (Gutenberg)

1. Open the page or post where you want the bot to appear.
2. Click the (+) icon to add a new block.
3. Search for the Shortcode block.
4. Enter your code, for example: [supervised_ai_bot id="1"].

In Theme Template Files

If you want a chatbot to appear globally or within a specific template file, use the WordPress do_shortcode function in your PHP files:

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

Display Behavior

Once the shortcode is implemented:

• Trigger Button: A fixed blue circular button appears at the bottom-right of the screen (Z-index: 9999).
• Chat Window: Clicking the button toggles a 400px wide popup containing the Supervised AI interface.
• Responsiveness: The popup is optimized for vertical interaction with a fixed height of 670px, ensuring the chat remains usable across various screen sizes.