Facebook customer chat plugin override on top of website

Question

My website has Facebook Customer Chat Plugin from this guide for 2 months.

But today, it override my website element instead stand behind or display:none.

I think, facebook is trying to add some effect to their facebook chat, and they are using opacity: 0; instead of display: none; . This makes our customers unable to click on website's elements.

So what can I do with this now. I've removed it temporarily.

Can not click behind facebook, this is preview

Here is the demo link : https://laptop8x.com/

Answer 1

Just add this code.

.fb_customer_chat_bounce_out {
   z-index: -1 !important;
}

Answer 2

Same problem here. Negative z-index doesnt solve this problem, because initially doesnt have classes.

I tried with this:

.fb-customerchat iframe {
    pointer-events: none;
}

iframe.fb_customer_chat_bounce_in {
    pointer-events: inherit;
}

iframe.fb_customer_chat_bounce_out {
    pointer-events: none;
}

This is still not a perfect solution. If I open the customer chat and refresh the page, the chatbox is opened, but I can not catch this state without class. In my opinion, Facebook today caused this problem.

Answer 3

You can use this piece of code in your CSS to move it wherever you wish:

.fb_customer_chat_bubble_pop_in {top:20px!important}

Good Luck