Troubleshooting & FAQ

Troubleshooting

Bot is not appearing on the page

If you have added the shortcode but the chatbot icon does not appear, check the following:

• Verify the ID: Ensure the id attribute in your shortcode matches the row number of the URL in the settings page. For example, the first URL listed is id="1".
• URL Formatting: Ensure the URL entered in the settings is a valid, full URL (including https://). Do not include quotes or extra spaces.
• Empty Rows: Do not leave empty lines between URLs in the settings textarea, as this can affect the row count/ID mapping.

Popup button is hidden or overlapping content

The chatbot button is fixed to the bottom-right of the screen by default. If it overlaps your site's "Back to Top" button or other floating elements:

• CSS Conflict: Your theme may have a higher z-index or its own fixed elements. You can override the position by adding custom CSS to your theme:

  /* Example: Move the button further up */
  .circle-button {
      bottom: 100px !important;
  }
  .popup-container {
      bottom: 100px !important;
  }
  

The Chatbot popup is blank

If the popup opens but shows a white screen:

• Mixed Content: Ensure your site is running on https. Most AI interfaces will not load over an insecure http connection within an iframe.
• X-Frame-Options: Ensure your Supervised AI instance allows embedding. If the header X-Frame-Options is set to DENY or SAMEORIGIN on the source server, the browser will block the chatbot from appearing.

Popup button does not respond to clicks

If clicking the blue circle does not open the chat window:

• JavaScript Conflicts: The plugin uses a function called togglePopup(). If another plugin or your theme uses a function with the exact same name, a conflict occurs.
• Check Console: Right-click your page, select Inspect, and look at the Console tab for red error messages. If you see "Uncaught TypeError" or "Function already defined," there is a script conflict.

Frequently Asked Questions

How do I determine the "ID" for my shortcode?

The ID refers to the line number where the URL is placed in the plugin settings textarea.

• Line 1 = [supervised_ai_bot id="1"]
• Line 2 = [supervised_ai_bot id="2"]

Can I display multiple chatbots on the same page?

While you can place multiple shortcodes on a page, the current version of the plugin is optimized for a single popup interface per page. Adding multiple shortcodes with different IDs may result in overlapping buttons or display conflicts.

How do I change the color of the chat button?

The button defaults to a blue color (#007bff). You can change this by adding the following CSS to your WordPress Customizer (Appearance > Customize > Additional CSS):

.circle-button {
    background-color: #ff5733; /* Replace with your hex code */
}

Can I change the size of the chat window?

Yes. The default dimensions are 400px wide and 670px high. You can adjust this with CSS:

.popup-container {
    width: 350px;  /* Adjust width */
    height: 500px; /* Adjust height */
}

.iframe-container, .popup-body {
    height: 500px; /* Must match the height above */
}

Is the chatbot responsive on mobile?

The popup has a max-width of 800px but a fixed width of 400px. On very small mobile devices, you may need to add a media query to ensure it fits the screen:

@media screen and (max-width: 480px) {
    .popup-container {
        width: 90%;
        right: 5%;
    }
}

Where do I get the Chatbot URL?

Log in to your Supervised AI account, navigate to your specific bot's settings, and look for the "Public URL" or "Shareable Link." Use this link inside the plugin settings.