Troubleshooting & FAQ

Troubleshooting

The shortcode displays as plain text instead of the chatbot

If you see [supervised_ai_bot id="1"] on your live page instead of the chat bubble, check the following:

• Plugin Activation: Ensure the "Supervised AI Bots" plugin is activated under the Plugins menu in your WordPress dashboard.
• Shortcode Syntax: Ensure you are using straight quotes (") and not "curly" or "smart" quotes (often caused by copying/pasting from word processors).

The chat bubble does not appear on the page

If the shortcode is processed but no icon appears:

• Verify the ID: The id attribute in the shortcode refers to the line number of the URL in the settings page. If you only have one URL, use id="1".
• Check the URL List: Go to Settings > Supervised AI Bots and ensure you have entered a valid URL. Each URL must be on its own line.
• JavaScript Errors: Open your browser's developer console (F12). If you see errors related to togglePopup, there may be a conflict with your WordPress theme’s JavaScript.

The chatbot window is blank or shows a "Refused to Connect" error

This is typically a security restriction:

• X-Frame-Options: Ensure the Supervised AI bot URL you are using allows embedding via iframes.
• Mixed Content: If your site uses HTTPS, your bot URL must also start with https://. Browsers will block insecure http content on secure pages.

The chat bubble is hidden behind other elements

The chatbot uses a default z-index of 9999 for the button and 1001 for the popup. If your theme's header or footer covers the bot:

• You may need to add custom CSS to your theme to increase the z-index of the .circle-button and .popup-container classes.

Frequently Asked Questions

How do I find the correct Bot ID?

The Bot ID is determined by the order in which you listed the URLs in the plugin settings:

• The URL on Line 1 corresponds to id="1".
• The URL on Line 2 corresponds to id="2", and so on.

Can I display multiple chatbots on the same page?

Currently, the plugin is designed to trigger a specific bot via the shortcode provided. If you place multiple shortcodes on one page, ensure they have different IDs. Note that the UI is optimized for a single floating popup interface per view.

How do I change the color of the chat bubble?

The chat bubble defaults to a blue color (#007bff). To change this, you can add custom CSS to your WordPress site (usually via Appearance > Customize > Additional CSS):

/* Change the bubble background color */
.circle-button {
    background-color: #ff5733 !important; /* Replace with your hex code */
}

Is the chatbot mobile-responsive?

Yes. The plugin uses a fixed-position popup container with a maximum width of 400px and a height of 670px. On smaller screens, the container will adjust to the width of the viewport.

Can I hide the header of the chat popup?

The header is hidden by default in the plugin's stylesheet to provide a cleaner "Supervised AI" experience. If you wish to show it or modify the body height, you would need to override the .popup-header and .popup-body classes in your CSS.

Where do I get my Bot URL?

Log in to your Supervised AI account, navigate to your specific bot's deployment settings, and copy the public sharing or embed URL provided in your dashboard.