Common Issues & Fixes

Shortcode and ID Configuration

The Chatbot is Not Appearing

If you have placed the shortcode on a page but nothing is visible, ensure you are using the correct ID format.

• The Problem: The id attribute refers to the row number of the URL you entered in the plugin settings.
• The Fix: Go to Settings > Supervised AI Bots. Count the lines in the URL textarea. If your bot URL is on the first line, use id="1".

  [supervised_ai_bot id="1"]
  

Wrong Bot Loading

• The Problem: The wrong chatbot appears on a specific page.
• The Fix: Each shortcode is tied to the line order in your settings. If you remove a URL from the middle of your list in the settings page, the IDs for all subsequent bots will shift up by one. Double-check your settings to ensure the row numbers match your shortcode IDs.

---

Connection and Loading Issues

Blank Iframe or "Connection Refused"

If the popup opens but remains white or displays a connection error:

• SSL/HTTPS Mismatch: Ensure your WordPress site and the Supervised AI URL both use https://. Most modern browsers block "Mixed Content" (loading an insecure http bot on a secure https site).
• X-Frame-Options: The Supervised AI bot URL must allow "iframing." If you have restricted your bot's security settings on the Supervised AI dashboard, ensure your WordPress site's domain is whitelisted.

---

Visual and Layout Issues

Chat Button Hidden or Overlapping

The chatbot button and popup use a fixed position and high z-index.

• The Problem: The button is hidden behind your theme's footer or a "back to top" button.
• The Fix: You can adjust the positioning or layer priority by adding Custom CSS to your theme:

  /* Adjust the layer priority if the bot is hidden */
  .circle-button {
      z-index: 99999 !important;
  }
  
  /* Move the button higher if it overlaps other elements */
  .circle-button, .popup-container {
      bottom: 100px !important;
  }
  

Popup Looks Cut Off on Mobile

The popup is set to a fixed height of 670px.

• The Problem: On smaller mobile devices, the popup might exceed the screen height.
• The Fix: Use a media query in your theme's CSS to make the popup responsive:

  @media (max-width: 480px) {
      .popup-container {
          width: 90%;
          height: 80vh;
          right: 5%;
      }
      .iframe-container, .popup-body {
          height: 80vh;
      }
  }
  

---

Functionality Issues

The Popup Won't Open

If clicking the blue circle button does nothing:

• JavaScript Conflict: Another plugin may be causing a JavaScript error that prevents the togglePopup() function from running.
• Check: Open your browser's Developer Tools (F12) and look at the "Console" tab. If you see errors related to togglePopup is not defined, ensure that the plugin's script is being loaded in your site's footer.
• Theme Compatibility: Ensure your WordPress theme includes the <?php wp_footer(); ?> call in its footer.php file, as this is required for the plugin to load its scripts.

Multiple Bots on One Page

• The Problem: Currently, the plugin UI is optimized for displaying one bot per page.
• The Fix: If you place multiple shortcodes on the same page, the popup containers may overlap because they share the same CSS classes. It is recommended to use only one [supervised_ai_bot] shortcode per page or post.