How to Hide FB Customer Chat SDK plugin on Mobile

Ask the community
,
1

I’ll give anyone a big HIGH 5, if they can help me with my problem. Please!

So I installed the Facebook Customer Chat SDK code by pasting it in body-start of the Tracking Tools & Analytics section in Wix as recommended by many from my multiple forum searches. The plugin works great on desktop! However, when on mobile, the chat bubble is overblown and doesn’t really work the same. My goal is to hide the chat plugin for users using mobile devices.

I’ve seen some websites built on Wix that are successfully hiding the plugin on the mobile version. I’m wondering how I can go about doing this. I tried analyzing the code without any conclusion (I’m not a programmer). I tried calling wix support and they were very helpful on most of my questions, but could not help me with this third party code.

I know I’ve seen this question all over the place, but no clear information on how to solve it. I’ve search both Wix and Facebook support forums.

From my digging around on the Facebook developer site, I found that there is a function to hide the plugin, however, I’m not sure how to add an “IF” function to enable the hide function only to those users using mobile. Source: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk#hide_plugin

Here’s one example of a wix website I found that had solved the problem: https://www.anatbelinson.co.il/

Here’s some general information about the plugin from the Facebook Developer site: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/

Here’s my code:


<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>

<script>

  window.fbAsyncInit = function() {

    FB.init({

      xfbml            : true,

      version          : 'v3.3'

    });

  };



  (function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>



<!-- Your customer chat code -->

<div class="fb-customerchat"

  attribution=setup_tool

  page_id="1342776392518124"

  theme_color="#89B084">

</div>

#CustomerChatSDK #FacebookChat #WixMobile

Thank you,

Dave

2

Do you have the chat plugin installed on your site? If so, can you show me please.

Where did you put this code also? The body start or body end.

3

Body start. I have it on a few different websites at the moment, but here’s one of them: https://www.uniquerentalmanagement.com/

4
  • Detect Mobile Device: Use JavaScript’s window.innerWidth or media queries to identify mobile devices.
  • Hide Plugin: If device is mobile, call FB.CustomerChat.hide() to conceal the plugin.
  • Conditional Loading: Consider loading the Facebook SDK only on desktop devices to further optimize performance.
  • Test Thoroughly: Ensure the plugin is hidden correctly on various mobile devices and screen sizes. Also you can use 3rd part chat SDK the best chat sdk providers are mirrorfly, stream, sendbird