Add a Facebook Messenger chat to your site.
If you'd live to allow your site's visitors to contact you via Facebook Messenger without leaving your site, then you've come to the right place. Facebook only allows Messenger to be embedded via the Facebook Page plugin. This project is a wrapper for the Facebook Page plugin that styles it as a live-chat popup.
There's one severe limitation to this method: Visitors can only send one message. Any back-and-forth conversation must take place in a Facebook-owned app or website. If this is a deal-breaker, just direct people to m.me/YOURBRANDPAGEHERE. There's also an issue with mobile Safari that's unfixable. When a user selects an input field in Safari on iOS, Safari zooms the website until the text is sized to at least 16px. Facebook's chat widget font-size is only 14px.
This project gracefully falls back to a mailto:
link if the visitor's browser doesn't support javascript. It's also mobile-first and doesn't load Facebook's javascript until the user clicks on the button. I've added a loading spinner to the background in case Facebook's SDK takes a white to load. If the visitor has an adblocker that blocks Facebook's SDK, then the spinner will continue to spin indefinitely, but the visitor will still have access to the email and m.me links.
<link rel="stylesheet" type="text/css" href="path/to/messengerPopup.min.css">
<a id="messengerButton" href="mailto:YOUREMAILHERE@GMAIL.COM" data-messengerPage="YOURBRANDPAGEHERE" onclick="toggleVisibility();">Message Us</a>
<body>
tag add:
<script src="path/to/messengerPopup.js"></script>