Using Facebook Messenger as a Free Intercom Replacement

Up until yesterday I used Intercom to run a livechat experience on Fiercely Curious, an online art startup that I run. But it costs $50 / month and the mobile app for iOS was acting up not always delivering notifications so I decided to play around and see if I could replicate the functionality using Facebook Messenger.

The result - success! (with some quirks). Here’s the experience showing a Facebook chat call to action:

And here’s the experience when you engage with the button:

I had a few people asking how I did it so I wanted to share the code. It’s nothing complicated and I’m sure there are more efficient ways of presenting this so I hope by sharing it we can improve the experience!

Here’s the HTML code on every page of the site:

	<script>
	function OpenInNewTab() {
	var screenwidth = screen.width-500;
	window.open("http://m.me/fiercelycurious", '_blank',"width=500,height=800,left="+screenwidth);
	}
	</script>


	<a href="http://m.me/fiercelycurious" target="_blank" onclick="OpenInNewTab();"> <!-- m.me/facebookpage works for any facebook page -->
	<div class="fbmessenger">
	<img src="https://lh5.ggpht.com/0VYAvZLR9YhosF-thqm8xl8EWsCfrEY_uk2og2f59K8IOx5TfPsXjFVwxaHVnUbuEjc=w300" /> <!-- I host the file directly but I'm hotlinking from the Google Play store here for the png file -->
	<span class="tooltiptext mobilehidden">Message Us</span>
	</div>
	</a>

view raw facebookmessenger.html hosted with ❤ by GitHub

And the accompanying CSS:

	.fbmessenger{
	position:fixed;
	bottom:15px;
	right:15px;
	z-index:15;
	}

	.fbmessenger img{
	width:50px;
	filter: drop-shadow(2px 6px 4px rgba(0,0,0,.3));
	-webkit-filter: drop-shadow(2px 6px 4px rgba(0,0,0,.3));


	}

	.tooltiptext {
	width: 120px;
	background-color: white;
	color:#2c2c2c; ;
	text-align: center;
	padding: 5px 0;
	border:1px solid #eeeeee;
	border-radius: 6px;
	position: fixed;
	bottom:30px;
	right:75px;
	font-family:'abel';
	text-transform:uppercase;
	filter: drop-shadow(2px 6px 4px rgba(0,0,0,.3));
	-webkit-filter: drop-shadow(2px 6px 4px rgba(0,0,0,.3));


	}

	.tooltiptext:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent transparent #eeeeee;
	}

view raw fbmessenger.css hosted with ❤ by GitHub

I’m excited to play in this space - clearly the experience is subpar for those users who don’t have a Facebook account or even just aren’t logged in but that’s a sacrifice I’m willing to make for now. I think Facebook will build out more robust tools for businesses that want to use messenger as a tool for customer interaction.

Try it out right now: fiercelycurious.com!

Any feedback? Got a suggestion to improve the experience? Let me know!