Page & Post Deployment

Embedding Chatbots in Pages and Posts

To display a Supervised AI chatbot on your WordPress site, use the built-in shortcode system. The plugin transforms the shortcode into a floating interactive widget that appears in the bottom-right corner of the browser window.

The [supervised_ai_bot] Shortcode

The primary method for deployment is the [supervised_ai_bot] shortcode. This shortcode requires an id attribute to determine which chatbot URL to load from your configuration list.

Basic Syntax:

[supervised_ai_bot id="1"]

Mapping Bot IDs

The id attribute corresponds directly to the order of the URLs you entered in the Supervised AI Bots settings page:

• id="1": Loads the URL on the first line.
• id="2": Loads the URL on the second line.
• id="3": Loads the URL on the third line, and so on.

Deployment Methods

1. Gutenberg / Block Editor

If you are using the modern WordPress Block Editor:

1. Open the page or post where you want the chatbot to appear.
2. Click the (+) icon to add a new block.
3. Search for and select the Shortcode block.
4. Enter your shortcode: [supervised_ai_bot id="1"].
5. Update or Publish the page.

2. Classic Editor

If you are using the Classic Editor:

1. Navigate to the post/page editor.
2. Paste the shortcode [supervised_ai_bot id="1"] directly into the text area.
3. Ensure the shortcode is on its own line for better visibility in the editor.

3. Site-Wide Deployment (Widgets)

To make a specific chatbot appear on every page of your site (such as a global support bot):

1. Go to Appearance > Widgets.
2. Add a Text or Shortcode widget to your Footer or Sidebar area.
3. Paste the shortcode into the widget and save. Note: Because the chatbot uses fixed positioning (bottom: 20px), it will always appear in the bottom-right corner regardless of which widget area it is placed in.

User Experience and Behavior

Once the shortcode is deployed, the following elements will appear on the frontend for your visitors:

• Floating Launch Button: A blue circular button appears in the bottom-right corner of the screen.
• Popup Interface: Clicking the button toggles a 400x670 pixel chat window.
• Responsive iframe: The chatbot content is loaded securely via an iframe, ensuring that your site's styles do not interfere with the bot's functionality.

Best Practices

• One Bot Per Page: Avoid placing multiple chatbot shortcodes on a single page, as this may cause overlapping UI elements.
• Test URL Validity: Ensure the URLs provided in the settings are full, valid addresses (including https://) to ensure the iframe loads correctly.
• Visibility: Since the bot is a "popup" style interface, you do not need to worry about creating specific layout space for it within your content; it will hover over your existing page design.