facebook customer chat messenger positioning

问题

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

回答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;
}

回答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;
}

回答3:

Try Below Code

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

回答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;
    }
}

来源：https://stackoverflow.com/questions/54557444/facebook-customer-chat-messenger-positioning

标签

facebook

facebook-messenger

facebook-customer-chat