Display & Visibility

Embedding Chatbots

The Supervised AI Bots plugin utilizes a standard WordPress shortcode to display your chatbots. This allows you to precisely control which pages, posts, or sections of your site feature interactive AI functionality.

The Shortcode

The primary method for embedding a bot is the [supervised_ai_bot] shortcode.

[supervised_ai_bot id="1"]

Attributes

| Attribute | Required | Description | | :--- | :--- | :--- | | id | Yes | The row number corresponding to the Bot URL entered in the plugin settings. For example, use id="1" for the first URL in your list, id="2" for the second, and so on. |

Placement Options

Posts and Pages

You can add a chatbot to any individual post or page using the WordPress Editor:

1. Open the post or page editor.
2. Add a Shortcode block.
3. Enter your shortcode (e.g., [supervised_ai_bot id="1"]).
4. Update or Publish the page.

Widget Areas & Sidebars

To make a chatbot available across multiple pages (such as in a sidebar or footer):

1. Navigate to Appearance > Widgets in your WordPress dashboard.
2. Add a Shortcode widget or a Custom HTML widget to your preferred widget area.
3. Paste the shortcode into the widget content box.
4. Click Update to save your changes.

Visual Display & Behavior

When the shortcode is processed on a page, the chatbot does not render inline with the text. Instead, it initializes a floating interface designed for accessibility and persistence.

Floating Launch Button

A circular blue action button will appear in the bottom-right corner of the browser window. This button is fixed in place, meaning it remains visible to the user even as they scroll through your content.

Chat Popup Interface

Clicking the floating button toggles the visibility of the chat interface:

• Dimensions: The chat window is optimized at a width of 400px and a height of 670px.
• Overlay: The window appears as an overlay (z-index: 1001), ensuring it sits on top of other page elements.
• Persistence: Users can toggle the window open or closed at any time without losing their current page position.

Implementation Note

The chatbot is loaded via an iframe within a secure container. This ensures that the chatbot's styles do not conflict with your WordPress theme's CSS and provides a sandboxed environment for the AI interaction.