Facebook Messenger plug-in

Hi there,

I would to use a Facebook Customer Chat inside our web site: https://goo.gl/ijeyzi. But with these codes I had some issues with the shopping cart widget on the right. Cart button and checkout button didn’t work anymore. It could be caused by the fact that I used that code inside footer.php?

<div class="fb-customerchat" page_id="***********" minimized="true"></div>

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '*****************',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.12'
    });
  };

  (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/it_IT/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Now I removed the code, so you can’t view it inside the web site. Maybe I should paste the code inside another page? Many thanks.

Hi,

Where should we check this problem on your website?

I re-upload the code in the footer. Please take a look asap 🙂

We don’t see any problems now.

With all these items inside the cart I can’t click on the buttons. Is like if there is an hidden layer over the buttons.

Attachments:

You must be logged in to view attached files.

Yes, this widget overrides a part of the website and blocks these buttons. We can’t change this in our theme scope.

Oh, no. It’s a pity. It can be a really nice method to communicate with customers.

But how do you want to solve it? We can try to prepare a CSS code to show shopping cart widget above the chat button if it is OK for you.

It would be great. As I told you we consider Messenger a really useful instrument to communicate with our customers. It would be a pity can’t use it.

We don’t see the button at the moment.

We removed it again. Ok, just uploaded.

Here you have it

.cart-widget-side {
    z-index: 9999999999!important;
}

Global CSS or only desktop in your opinion?

It’s not working. I see this link on a button.

Try this one

.basel-cart-opened #fb-root {
	display: none!important;
}

Yeah, now it works. That’s great 🎉

Great, you are welcome!

[Author]

Posts