How to move messenger bot right to left in custom website? - messenger

Question

I have this code for my chatbot. It's showing by default right-bottom on my website. But I want it on the left-bottom side. I am unable to do it. Can anyone give me the code ?
My Code :
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
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/en_US/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="384557738790994">
</div>

Answer 1

The best way would be to use the fb-customerchat class to style the chat box.
You would put the styles into your css file, or if you don't have one inside a style element.
<style>
.fb-customerchat {
position: absolute;
left: 0;
bottom: 0;
};
</style>
at the top of your html file.
Depending on the hierarchy of the styles that already exist you may need to use left: 0 !important; instead.

Answer 2

.bottom-left {
position: fixed;
bottom: 0;
left: 0;
}
.alert {
border: 2px solid red;
background: white;
font-weight: bold;
padding: 1em;
}
<div class="bottom-left alert">
Look at me!
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
<p>Sed vel dolor lectus. Nulla sed blandit lacus. </p>
<p>Donec sagittis, dolor sed fermentum dapibus, justo ipsum porttitor purus, sed fermentum mi nulla non lorem.</p>
This will solve your problem

Answer 3

You can take left side the popup section by follow this simple css tricks. Add the following css code then check it by refresh your browser by ctrt+F5
<style>
.fb_dialog {
left: 18pt;
};
iframe.fb_customer_chat_bounce_in_v2{
left:36pt!important;
}
iframe.fb_customer_chat_bounce_out_v2{
left:36pt!important;
}
</style>

Answer 4

<style>
.fb_dialog {
left: 18pt;
};
</style>
Its work for me. By the way thanks to everyone.

Answer 5

This is full customised facebook chatbot and really easy to use
<script type="text/javascript">
(function () {
var options = {
facebook: "your_facebook_page_id", // Facebook page ID like 598880463493066
call_to_action: "Your_message", // Call to action that user seen like "Message us"
position: "left", // Position may be 'right' or 'left'
};
var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>