Page & Post Integration

Using Shortcodes for Bot Integration

The primary way to integrate your Supervised AI chatbots into your WordPress site is through the use of shortcodes. This allows you to place a specific chatbot on any page, post, or widget area with minimal effort.

Shortcode Syntax

The plugin uses a single shortcode with an id attribute:

[supervised_ai_bot id="1"]

• id: This refers to the line number (row) of the chatbot URL you entered in the plugin settings. For example, if you entered three URLs, use id="1" for the first one, id="2" for the second, and so on.

Best Practices for Content Placement

While you can place the shortcode anywhere within your WordPress editor, following these best practices ensures an optimal user experience.

1. Dedicated Landing Pages

If you have a chatbot designed for a specific service or product, place the shortcode on that specific landing page. This ensures the AI context remains relevant to what the user is currently reading.

2. Global Footer Integration

If you want the chatbot to be accessible site-wide, you can place the shortcode within a Footer Widget or a global "Reusable Block" (in the Block Editor). Because the chatbot renders as a floating circular button in the bottom-right corner, it will not interfere with your main page content.

3. Usage in the Block Editor (Gutenberg)

When using the modern WordPress editor:

1. Click the + icon to add a new block.
2. Search for the Shortcode block.
3. Paste [supervised_ai_bot id="X"] into the field.
4. Update or Publish your page.

Visual Behavior & User Interface

When you add a shortcode to a page, the following elements are rendered for the visitor:

• Floating Launcher: A blue circular button appears at the bottom-right of the browser window.
• Chat Popup: Clicking the button toggles a 400px x 670px popup window containing the AI interface.
• Responsiveness: The popup is designed to stay fixed to the bottom-right of the viewport, ensuring it stays visible even as the user scrolls through long posts.

Display Considerations

• One Bot Per Page: It is recommended to use only one chatbot shortcode per page to avoid overlapping UI elements and potential performance lag.
• Fixed Dimensions: The chatbot popup is optimized for a width of 400px. Ensure your site's mobile theme does not have conflicting styles that might hide elements positioned at bottom: 20px; right: 20px;.

Integration Troubleshooting

| Issue | Potential Cause | Solution | | :--- | :--- | :--- | | Bot not appearing | Incorrect ID or missing URL | Verify that the id in your shortcode matches the row number in the plugin settings page. | | Popup is empty | Invalid URL or Header restrictions | Ensure the URL entered in settings is a valid Supervised AI public link and allows iframe embedding. | | Button overlaps content | CSS Conflict | If the floating button overlaps critical "Back to Top" buttons, you may need to apply custom CSS to adjust the bottom or right values of the .circle-button class. |