How to Add the Facebook Messenger Chat Widget in your Website
Facebook Messenger, with more than a billion monthly users. enables brands to have real-time one-on-one conversations with their customers. Businesses can also embed Facebook messenger buttons on their website and visitors, whether they have a pre-sales question or need to resolve an issue, can initiate a conversation with the simple click of a button.
The only downside with embedded buttons is that visitors will have to exit your website to send a message through Facebook Messenger. Wouldn’t it be nice if people could stay on your website and yet be able to message you through Facebook?
Well, that’s possible with the help of the Facebook chat widget (demo). The widget sits in the corner of your page and when someone clicks the Facebook Messenger icon, a non-intrusive chat window pops up where visitors can type and send you a private message.
Here’s a live demo of the Facebook chat widget.
Embed Facebook Chat Widget
It takes one easy step to integrate the Facebook Chat widget in your website.
All you to do is copy-paste the simple piece of code below anywhere in your website template and it will add the widget to all your pages. Remember to replace digitalinspiration with the vanity URL (name) of your own Facebook page.
<style>
.fb-livechat,
.fb-widget {
display: none;
}
.ctrlq.fb-button,
.ctrlq.fb-close {
position: fixed;
right: 24px;
cursor: pointer;
}
.ctrlq.fb-button {
z-index: 1;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+)
center no-repeat #0084ff;
width: 60px;
height: 60px;
text-align: center;
bottom: 24px;
border: 0;
outline: 0;
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
-webkit-transition: box-shadow 0.2s ease;
background-size: 80%;
transition: all 0.2s ease-in-out;
}
.ctrlq.fb-button:focus,
.ctrlq.fb-button:hover {
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09), 0 4px 40px rgba(0, 0, 0, 0.24);
}
.fb-widget {
background: #fff;
z-index: 2;
position: fixed;
width: 360px;
height: 435px;
overflow: hidden;
opacity: 0;
bottom: 0;
right: 24px;
border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
-o-box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
}
.fb-credit {
text-align: center;
margin-top: 8px;
}
.fb-credit a {
transition: none;
color: #bec2c9;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
border: 0;
font-weight: 400;
}
.ctrlq.fb-overlay {
z-index: 0;
position: fixed;
height: 100vh;
width: 100vw;
-webkit-transition: opacity 0.4s, visibility 0.4s;
transition: opacity 0.4s, visibility 0.4s;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.05);
display: none;
}
.ctrlq.fb-close {
z-index: 4;
padding: 0 6px;
background: #365899;
font-weight: 700;
font-size: 11px;
color: #fff;
margin: 8px;
border-radius: 3px;
}
.ctrlq.fb-close::after {
content: 'x';
font-family: sans-serif;
}
</style>
<div class="fb-livechat">
<div class="ctrlq fb-overlay"></div>
<div class="fb-widget">
<div class="ctrlq fb-close"></div>
<div
class="fb-page"
data-href="https://www.facebook.com/digital.inspiration/"
data-tabs="messages"
data-width="360"
data-height="400"
data-small-header="true"
data-hide-cover="true"
data-show-facepile="false"
>
<blockquote cite="https://www.facebook.com/digital.inspiration/" class="fb-xfbml-parse-ignore"></blockquote>
</div>
<div class="fb-credit">
<a href="https://www.labnol.org/software/facebook-messenger-chat-widget/9583/" target="_blank"
>Facebook Chat Widget by Digital Inspiration</a
>
</div>
<div id="fb-root"></div>
</div>
<a href="https://m.me/digital.inspiration" title="Send us a message on Facebook" class="ctrlq fb-button"></a>
</div>
<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var t = { delay: 125, overlay: $('.fb-overlay'), widget: $('.fb-widget'), button: $('.fb-button') };
setTimeout(function () {
$('div.fb-livechat').fadeIn();
}, 8 * t.delay),
$('.ctrlq').on('click', function (e) {
e.preventDefault(),
t.overlay.is(':visible')
? (t.overlay.fadeOut(t.delay),
t.widget.stop().animate({ bottom: 0, opacity: 0 }, 2 * t.delay, function () {
$(this).hide('slow'), t.button.show();
}))
: t.button.fadeOut('medium', function () {
t.widget
.stop()
.show()
.animate({ bottom: '30px', opacity: 1 }, 2 * t.delay),
t.overlay.fadeIn(t.delay);
});
});
});
</script>The widget would work across all sorts of websites including Blogger & WordPress blogs, WooCommerce stores, and most static HTML websites. It would however not work with the new version of Google Sites as they do not offer an option to embed JavaScript in pages.
When visitors send a message via the Facebook Chat widget, it goes right to the inbox of your Facebook Page. As the business owner, you can install the Facebook Pages Manager app on your mobile phone to view and respond to messages. The customer will be notified of your response inside their Facebook Messenger app.
The message history is preserved forever, there’s no limit on the number of messages you can receive in a day and your page can simultaneously receive pages from multiple visitors. The widget also invites the visitor to like your Facebook Page.
One more thing. If the web page is using an ad blocker or if they have disabled social plugins, the widget nicely defaults to the messenger button.
Amit Agarwal
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory
