How to move Facebook chat box above/below or right/left?

Question

Facebook chat box (Customer Chat SDK) overlaps one of the buttons on my website. How I can to move it above?

Answer 1

You can inspect the CSS and override to reposition, but this isn't recommended as it can possibly lead to unexpected breakage when future updates to the plugin occur.

Answer 2

It is original code:

<div id="fb-root"></div>



<script>`enter code here`
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v3.2'
    });
  };

  (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/lt_LT/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="0000000"
  theme_color="#0084ff"
  greeting_dialog_display="hide"
>
</div>

Answer 3

You can writing add css of website:

.fb_dialog, .fb_customer_chat_bounce_in_v2, .fb_customer_chat_bounce_out_v2 {
right: auto !important;
left: 10pt !important;
bottom: 10pt !important;}

In it you can change left: 10pt !important; bottom: 10pt !important; at your discretion.

Good Luck !