Displaying Bots on Posts/Pages
Displaying Bots on Your Site
The Supervised AI Bots plugin uses a flexible shortcode system, allowing you to place specific chatbots on any post, page, or widget area within your WordPress site.
Using the Shortcode
The primary method for displaying a bot is the [supervised_ai_bot] shortcode. This shortcode requires an id attribute, which corresponds to the row number of the bot URL you entered in the plugin settings.
Basic Syntax:
[supervised_ai_bot id="1"]
How the ID works:
- ID "1": Displays the bot associated with the first URL in your settings list.
- ID "2": Displays the bot associated with the second URL in your settings list, and so on.
Embedding in Posts and Pages
You can embed a chatbot into any content type by following these steps:
Gutenberg (Block Editor)
- Open the post or page where you want the bot to appear.
- Click the (+) button to add a new block.
- Search for the Shortcode block.
- Enter your shortcode:
[supervised_ai_bot id="1"]. - Update or Publish the page.
Classic Editor
- Open the post or page editor.
- Paste the shortcode
[supervised_ai_bot id="1"]directly into the text editor where you want the bot logic to be initialized.
Note: The chatbot will not appear directly inside the content flow of your text. Instead, the shortcode initializes a floating "launcher" button in the bottom-right corner of the visitor's screen.
Deployment Best Practices
To ensure the best user experience for your visitors, consider the following placement strategies:
- Global Access via Widgets: If you want a specific bot to appear on every page of your site (such as a general support bot), navigate to Appearance > Widgets and paste the shortcode into a Custom HTML or Text block within your Footer or Sidebar widget area.
- Page-Specific Bots: Use different IDs for different pages. For example, place a "Sales Bot" (
id="1") on your product pages and a "Technical Support Bot" (id="2") on your documentation or help pages. - Theme Integration: Developers can hardcode a bot into specific theme template files using the WordPress
do_shortcodefunction:<?php echo do_shortcode('[supervised_ai_bot id="1"]'); ?>
Front-End Interface
Once the shortcode is active on a page:
- The Launcher: A blue circular chat icon will appear at the bottom-right of the browser window.
- The Interaction: When a user clicks the icon, the chat interface will expand upward in a sleek, non-intrusive popup window.
- Closing: Users can click the button again to toggle the chat window closed at any time.