Common Issues & FAQ

Common Issues

Bot Not Appearing After Adding Shortcode

If the chatbot toggle button (the blue circle) does not appear on your page after inserting the shortcode, check the following:

• Verify the ID: Ensure the id attribute in your shortcode matches the row number of the URL in the plugin settings. For example, the first URL in your list is id="1".
• URL Format: Ensure the URL entered in the settings page is a valid, full URL (including https://).
• Draft Status: Ensure the page or post where you added the shortcode is published and not in "Draft" mode.

The Popup Window is Blank

If the popup opens but the content is blank or shows a "Refused to connect" error:

• X-Frame-Options: This is usually a security restriction on the bot's host side. The URL you are embedding must allow iframe embedding. Ensure that the Supervised AI bot URL is configured to allow display on your domain.
• Mixed Content: If your site uses https but the bot URL is http, most modern browsers will block the content. Always use secure https links.

Floating Button Overlaps Site Content

The chatbot button is fixed to the bottom-right of the screen by default. If it overlaps critical site elements (like a "Back to Top" button or a mobile menu):

• CSS Adjustment: You can override the position by adding custom CSS to your theme's "Additional CSS" section:

  .circle-button {
      bottom: 80px !important; /* Raise the button higher */
      right: 30px !important;  /* Move it further from the edge */
  }
  .popup-container {
      bottom: 80px !important;
  }
  

Shortcode Displays as Plain Text

If you see [supervised_ai_bot id="1"] literally on your website instead of a button:

• Plugin Activation: Verify that the "Supervised AI Bots" plugin is active in your WordPress Plugins menu.
• Syntax Check: Ensure you are using straight quotes (") rather than curly "smart quotes" often created by word processors.

FAQ

How do I find the "ID" for my chatbot?

The ID is determined by the order of the URLs you entered in the plugin settings.

• Line 1 = id="1"
• Line 2 = id="2"
• ...and so on.

Can I display multiple bots on the same page?

Currently, the plugin is optimized for one bot per page. Adding multiple shortcodes with different IDs to a single page may cause display conflicts because the popup container uses a fixed ID in the template. If you need to switch bots, it is recommended to use different bots on different pages.

How do I change the color of the chat button?

The default color is blue (#007bff). You can change this by adding the following CSS to your WordPress Customizer:

/* Change button background and shadow */
.circle-button {
    background-color: #ff5733 !important; /* Your hex code here */
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2) !important;
}

Is the chatbot mobile-friendly?

Yes, the chatbot is designed to be responsive. The popup has a fixed maximum width of 400px and a height of 670px. On smaller mobile screens, if the height of the device is less than 670px, some content may be cut off. You can adjust the height for mobile users using media queries:

@media only screen and (max-height: 700px) {
    .popup-container, .popup-body, .iframe-container {
        height: 80vh !important; /* Adjust to 80% of the screen height */
    }
}

Why does the header of the popup not show?

By design, the plugin hides the popup header and footer to provide a "Full Canvas" experience for the AI bot interface. This ensures the chat interface occupies the maximum available space within the 670px container.

Where do I get the Supervised AI Bot URL?

You must generate the bot URL from your Supervised AI dashboard. Once you have created and published a bot, copy its public sharing/embed URL and paste it into the plugin settings in your WordPress admin area.