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.

1. Open the WordPress Editor for the desired Page or Post.
2. Add a Shortcode Block.
3. Paste the shortcode: [supervised_ai_bot id="1"].
4. 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:

1. Navigate to Appearance > Widgets.
2. Add a Shortcode Widget or Custom HTML Widget to your sidebar or footer area.
3. 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.