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
idattribute in the shortcode refers to the line number of the URL in the settings page. If you only have one URL, useid="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 insecurehttpcontent 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-indexof the.circle-buttonand.popup-containerclasses.
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.