Displaying Bots on Pages

Displaying Bots on Pages

Once you have configured your bot URLs in the plugin settings, you can display them on any WordPress page or post using a shortcode. The plugin handles the rendering of the chatbot interface, including the trigger button and the chat window.

Using the Shortcode

The primary way to display a bot is via the [supervised_ai_bot] shortcode. This shortcode requires an id attribute to identify which bot URL to load.

Syntax:

[supervised_ai_bot id="YOUR_BOT_ID"]

Determining the Bot ID

The id corresponds to the row number of the URL you entered in the Supervised AI Bots settings page:

• id="1": Displays the bot from the first URL (first line) in your settings.
• id="2": Displays the bot from the second URL (second line), and so on.

Example: If you want to display the first bot on your "Contact Us" page, paste the following into the WordPress editor:

[supervised_ai_bot id="1"]

Placement Best Practices

Because the chatbot is rendered as a floating popup interface, its placement within your content editor behaves differently than standard text or images:

• Global Access: While you can place the shortcode anywhere in the post body, the bot's toggle button will appear by default at the bottom-right corner of the browser window.
• One Bot Per Page: It is recommended to use only one shortcode per page to avoid overlapping interface elements and ensure a clean user experience.
• Page-Specific Targeting: If you have different bots for different services (e.g., a "Sales Bot" and a "Support Bot"), place the specific ID on the corresponding WordPress pages to provide contextual assistance to your visitors.

Visual Appearance and Behavior

When the shortcode is active on a page, the following elements are added to the public interface:

1. Launch Button: A floating blue circular button appears in the bottom-right corner.
2. Chat Window: Clicking the button opens a popup container (400px wide) that loads your Supervised AI interface.
3. Responsive Design: The chat window is optimized for height (670px), ensuring it fits within most modern desktop and tablet viewports without obstructing the entire screen.

Troubleshooting Tip

If the chatbot does not appear after adding the shortcode:

1. Navigate to the Supervised AI Bots settings menu.
2. Ensure there is a valid URL on the line corresponding to your ID.
3. Check that the URL begins with https:// to ensure secure communication between your site and the AI service.