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:
- Navigate to the Supervised AI Bots settings page in your dashboard.
- View the list of URLs you entered in the configuration textarea.
- 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.
- The URL on Line 1 corresponds to
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)
- Open the page or post where you want the bot to appear.
- Click the (+) icon to add a new block.
- Search for the Shortcode block.
- 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.