Display Options

Shortcode Integration

The Supervised AI Bots plugin primarily utilizes shortcodes to render chatbots. The shortcode [supervised_ai_bot] allows you to trigger the chat interface on any specific page or post.

The id Attribute

The id attribute is required to identify which chatbot URL to load. This ID corresponds to the line number of the URL entered in the plugin settings page.

• Example: If you have three URLs saved, use id="1" for the first, id="2" for the second, and so on.

[supervised_ai_bot id="1"]

Placement Options

Embedding in Posts and Pages

To add a chatbot to a specific piece of content:

1. Open the WordPress editor (Block or Classic) for the desired Page or Post.
2. Paste the shortcode [supervised_ai_bot id="X"] into the editor.
3. If using the Block Editor (Gutenberg), use the Shortcode Block for best results.

Sidebar and Widget Areas

You can display a chatbot site-wide or on specific sidebars using WordPress Widgets:

1. Navigate to Appearance > Widgets.
2. Add a Custom HTML or Text widget to your preferred sidebar or footer area.
3. Paste the shortcode into the widget content area.
4. Save the widget.

User Interface & Behavior

When the shortcode is active on a page, the plugin initializes a floating interactive interface.

Floating Action Button

The plugin adds a circular blue action button to the bottom-right corner of the screen. This button remains fixed as the user scrolls, ensuring the chatbot is always accessible.

Chat Popup Dimensions

When clicked, the chatbot opens in a stylized popup container with the following default specifications:

• Position: Fixed at the bottom-right.
• Dimensions: 400px width and 670px height.
• Interaction: Users can toggle the chat window open or closed by clicking the floating button.

Best Practices

ID Verification

Before publishing a page, ensure the id in your shortcode matches the correct row in your Supervised AI Bots settings. If you remove a URL from the settings list, you may need to update your shortcodes to reflect the new row order.

Layout Considerations

Because the chatbot uses a fixed-position popup (position: fixed), the shortcode's physical location within your page content does not affect where the bot appears to the visitor—it will always dock to the bottom-right of the browser window. For a cleaner editing experience, place the shortcode at the very bottom of your post or page.

Mobile Responsiveness

The chatbot container has a maximum width of 400px. While this fits most modern smartphones, it is recommended to test the interface on smaller devices to ensure it does not obstruct critical navigation elements of your WordPress theme.