Customer Chat troubleshooting

You may encounter several issues installing Customer Chat widget on your website. In our experience, they are always easy to resolve - we'll show you how in this article.

Table of Contents

• Widget doesn't appear on your website
• Widget appears cropped, partially blocked, broken in other ways
• You and/or your customers can't interact with widget or close it once opened

In every case, we recommend that you follow our Installation Guide carefully, plus check our Diagnostic Tool for the problem's indication and solution - it will provide you with the steps for solution to each problem! If the tool doesn't help - don't worry, just read through this article to find a quick solution to your problem.

Widget doesn't appear on your website

There might be several reasons to why you don't see your widget:

1. Incorrect visibility settings

   Head to the Growth Tool's Setup tab and check Visibility settings section:

   

   If you entered something here, delete everything and test if the widget appears at all. If it does - problem solved; you will only need to set up correct visibility settings according to your needs. If it doesn't - head to the paragraph below.

2. Incompatibility issues with Facebook SDK code or another Customer Chat app

   Check the Developer Console on your website (F12 in Google Chrome or mouse right-click > Inspect Code). You might see the following error message:

   The CustomerChat plugin is no longer part of the main Facebook SDK.
   # To continue using it please use the correct SDK URL,
   # meaning replace sdk.js with sdk/xfbml.customerchat.js.
   # For more details see https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk/

   If you do have this error message, all you have to do is replace sdk.js with sdk/xfbml.customerchat.js in your website's code. If the error persists, simply delete all the code associated with Facebook SDK.

   If you have any other Customer Chat widgets installed along with ManyChat, choose only one widget and delete the code of every other widget.

3. Widget code installed incorrectly

   Go to your Growth Tool > Setup tab > Install JavaScript snippet > Install ManyChat snippet. You will see a code like this:

   <!-- ManyChat -->
   <script src="//widget.manychat.com/999999999999999.js" async="async"></script>

   Head to your website then and check the code you've installed. If you've edited or installed it through some application, another app or JS installer - it will not work and thus will not be displayed. You need to make sure that the code on your website is identical to the original ManyChat code.

   As there's a great variety of website platforms, it would be difficult to list how to install ManyChat widgets on all of them, but you should always be able to find the necessary info in your website platform's knowledge base or by reaching out to their support. There are lots of useful tutorials on the web also, like this one on Installing ManyChat Widgets on a WordPress website, or our guide on Adding Checkbox Widget on ClickFunnels pages.

4. Website CSS styles hide the widget

   Please read the next paragraph of this article right below to learn how to troubleshoot this issue!

Customer Chat widget appears cropped, partially blocked, broken in other ways

If you've noticed that the widget that appears properly on your website doesn't react to clicks, the issue might be caused by the website's layout.

Sometimes a layout is designed in such a way that some elements cover the widget which makes it unclickable, because it's located in the background. Often, it's difficult to notice this, especially with the Customer Chat widget if it's in the minimized state, but sometimes if you scroll through the website, you can see something like this:

How to solve such issues? Just follow the steps listed below:

1. Choose the element that covers the widget, hover over it with a cursor, then click with your right mouse button and choose Inspect element in the menu that appears.
   
   
   
2. When the Console opens, right-click on the selected element and choose Hide element:
   
   
   
3. Once the widget is uncovered, check if it's clickable and working properly. You'll also be able to see which elements were hiding the widget:
   
   

Sometimes it happens that ManyChat widget is installed properly on Shopify, but it isn't showing up for unknown reasons. The cause could be the styles conflict in the source code of the website.

1. Check the website's Console for errors.
2. Open Console tab, check if you see errors like these:
   
   
   
3. Open Network tab and click Request Blocking tab at the bottom. If there's no such button at the bottom, click here:
   
   
   
4. Click Enable request blocking, then click +, type in *css and click Add. Then, block *css by ticking it. After this, refresh the webpage and if the widget appears eventually - the issue was caused by the styles conflict.
   
   

If that's the case, you will need to edit your Shopify styles to the state where they are not blocking the widget. In case of any further questions about Shopify settings, please contact Shopify support.

You and/or your customers can't interact with widget or close it once opened

You might experience the issue when you can't close the Customer Chat or you can open it only once.

If it's the first case, check the code on your website to find the ManyChat code. It might be that you've installed it twice or there are simply more widget codes than there should be. Delete every copy and leave only one widget code - the problem should be solved!

If the case is that you can click the widget, then close it, but can't open it again - then we have to check the Console for conflicting JavaScripts. It's a bit different from checking the CSS - here's how it's done:

1. Check the website's Console for errors.
2. Open Network tab, click Request blocking at the bottom, then click + and add *js (the same way we did it with CSS).
   Important: don't mark *js with a tick - this will block all JS snippets on the website including our widget.
3. Open JS tab and block red JS scripts that you think may be causing the issue. Blocking is done by double clicking on the JS snippet and choosing Block Request URL.
   
   
   
   
4. After blocking, refresh the webpage and if the widget starts working properly - you've found the guilty JS snippet!