Bot Placement & Display
Using Shortcodes for Bot Integration
The primary method for displaying a Supervised AI chatbot on your WordPress site is through the use of shortcodes. This approach allows you to place a bot virtually anywhere that supports text or HTML input.
Shortcode Syntax
To display a bot, use the following shortcode format:
[supervised_ai_bot id="1"]
Mapping the Bot ID
The id attribute corresponds directly to the order of the URLs you provided in the plugin settings page:
- id="1": The chatbot associated with the first URL in your list.
- id="2": The chatbot associated with the second URL in your list.
- id="n": The chatbot associated with the $n^{th}$ URL in your list.
Placement Options
Pages and Posts
You can embed a chatbot within specific content areas to provide contextual assistance to your readers.
- Open the WordPress Editor for the desired Page or Post.
- Add a Shortcode Block.
- Paste the shortcode:
[supervised_ai_bot id="1"]. - Update or Publish the page.
Sidebar and Footer Widgets
If you want the chatbot to be accessible across multiple pages or within a specific layout area:
- Navigate to Appearance > Widgets.
- Add a Shortcode Widget or Custom HTML Widget to your sidebar or footer area.
- Enter the bot shortcode and save your changes.
Visual Display & Behavior
By default, the plugin renders the chatbot as a floating interactive widget to ensure it remains accessible while users scroll through your content.
- Trigger Button: A blue circular button appears in the bottom-right corner of the browser window.
- Popup Interface: Clicking the button toggles a 400px x 670px chat window.
- Responsive Design: The chat interface is contained within a fixed-position element, ensuring it stays in view at
bottom: 20px; right: 20px;.
Best Practices for Placement
To maximize user engagement and ensure a high-quality user experience, consider the following strategies:
1. Contextual Relevance
Deploy specific bots to specific pages. For example, place a "Sales Bot" (id="1") on your pricing and product pages, and a "Support Bot" (id="2") on your documentation or FAQ pages.
2. Avoid Layout Overlap
Since the bot resides in the bottom-right corner, ensure that critical site elements—such as "Back to Top" buttons or cookie consent banners—do not overlap with the chat trigger button.
3. Single Bot Execution
To prevent interface clutter and potential JavaScript conflicts, it is recommended to use only one chatbot shortcode per page. If multiple shortcodes are detected, they may stack visually in the same corner.
4. Testing on Mobile
The chat window has a fixed width. Always test your bot placement on mobile devices to ensure the chat window does not obstruct essential navigation or content for users on smaller screens.