facebook customer chat messenger positioning

Question

So i've installed the facebook customer chat messenger plugin on my website and it works fine, but i need to align it to the left of the website and if possible also change the size of the button (it's huge).

my code is:

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

<div class="fmessengerBtn">
<script>
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version : "v3.2"
        });
    };
    </script>
    <div id="fb-root"></div>
    <div class="fb-customerchat" 
        attribution=setup_tool 
        page_id="372545293082246" 
        theme_color="#0b9bb8" 
        greeting_dialog_display="fade" 
        greeting_dialog_delay="60" 
        ref="home" 
        logged_in_greeting="Fale conosco" 
        logged_out_greeting="Fale conosco">
    </div>
    </div>

i've tried just using CSS to align the container div but then the chat window will stay on the right side of the website... Is there some sort of attribute or option to set the thing to go to the left side instead? Surely this is something lots of other people have needed to do

also, the greeting_dialog_delay option doesn't seem to be working

Answer 1

The following CSS seems to work for now (since the classes may change) :

/* ***************
 * FB on left side 
 ******************/

/* This is for the circle position */
.fb_dialog.fb_dialog_advanced {
    left: 18pt;
}

/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
    left: 9pt;
}
iframe.fb_customer_chat_bounce_out_v2 {
    left: 9pt;
}

Answer 2

I tweaked the code a bit in case you want to keep the widget on the bottom right but just move it over to the left some (e.g., it is blocking another element)

.fb_dialog.fb_dialog_advanced {
    right: 18pt;
  margin-right: 50px;
}
iframe.fb_customer_chat_bounce_in_v2 {
    right: 9pt;
   margin-right: 50px;
}
iframe.fb_customer_chat_bounce_out_v2 {
    right: 9pt;
   margin-right: 50px;
}

Answer 3

Try Below Code

.fb_dialog {
position: -webkit-sticky !important;
position: fixed !important;
bottom: 95px !important;
right: 30px !important;
}

Answer 4

To add to @Cubakos' answer to get the bounce in and bounce out animation:

@keyframes fb_bounce_in_v2 {
    0% {
        opacity: 0;
        transform: scale(0, 0);
        transform-origin: bottom left;
    }

    50% {
        transform: scale(1.03, 1.03);
        transform-origin: bottom left;
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
        transform-origin: bottom left;
    }
}

@keyframes fb_bounce_out_v2 {
    0% {
        opacity: 1;
        transform: scale(1, 1);
        transform-origin: bottom left;
    }

    100% {
        opacity: 0;
        transform: scale(0, 0);
        transform-origin: bottom left;
    }
}

Answer 5

Combining @Cubakos & @Kuttoosan answers + made an adjust for positing the chat bubble as the posted methods here no longer work for me.

/* The following is for the chat bubble */
.fb_dialog_content>iframe {
  left: 18pt;
}

/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
  left: 9pt;
}

iframe.fb_customer_chat_bounce_out_v2 {
  left: 9pt;
}

/* The following are for the bounce in/out animations */
@keyframes fb_bounce_in_v2 {
  0% {
    opacity: 0;
    transform: scale(0, 0);
    transform-origin: bottom left;
  }

  50% {
    transform: scale(1.03, 1.03);
    transform-origin: bottom left;
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: bottom left;
  }
}

@keyframes fb_bounce_out_v2 {
  0% {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: bottom left;
  }

  100% {
    opacity: 0;
    transform: scale(0, 0);
    transform-origin: bottom left;
  }
}

Answer 6

After a while, I realize that we couldn't customize this plugin by CSS because

"it isn’t possible to style the elements contained within an iframe as you would with normal HTML elements on your site due to HTML limitations" https://wordpress.org/support/topic/resize-messenger-icon/

You can customize your chat plugin from Facebook Business Page only 3 things:

• Alignment
• Color
• Bottom Spacing (For mobile and desktop)

In the right page, there are preview pages for you to know how your customization will be like.

After customizing, don't forget to click on the button PUBLISH to save your changes.

It's a pain that you cannot resize the logo or styling it more easily, I hope that Facebook in the future can give us more power to do what we want with this.

Answer 7

Was Simple as below.

.fb_dialog.fb_dialog_advanced iframe {
    right: auto !important;
    left: 2rem;
    bottom: 2rem !important;
}

Answer 8

Here's how I edited it properly. Get ready for a fun navigation run! (learn from our wasted 4h)

1. Switch or login as your facebook professional account
2. Go to your facebook page
3. Click "Manage"
4. On the left menu, under "Your Tools" click "Messaging Settings" (Now it takes you to a new dashboard)
5. On the left menu click inbox again (even though you are already on it)
6. Click top gear icon.
7. Under "Inbox Modes", click "View all settings"
8. Select Chat plugin on the left
9. Scroll down and voila... now you can edit the chat positioning

Answer 9

For server-side rendering, if you are using Next.js, you can use its built-in server-side rendering capabilities to ensure that the chat box and its associated CSS styles are fully loaded and rendered before the page is served to the user

<Head>
    <style>{`
    @media screen and (max-width: 767px) {
  .fb_dialog_content > iframe {
    bottom: 144px !important;
    margin-right: -3px !important;
  }

  iframe.fb_customer_chat_bounce_in_v2 {
    bottom: 144px !important;
  }
  
  iframe.fb_customer_chat_bounce_out_v2 {
    bottom: 144px !important;
  }
}`}</style>
  </Head>