Email Post to a Friend: [VIDEO] Tech Tuesday Add the Facebook Messenger Widget to your Agent Website

The information you provide on this form will not be used for anything other then sending the email to your friend. This feature is not to be used for advertising or excessive self-promotion.

In this episode of Tech Tuesday, Harley Wolfarth demonstrates how to add a Facebook Messenger chat widget to your agent website.

Video Transcription

Hello and welcome to this week's edition of Tech Tuesday, presented by Delta Media Group, where we're not afraid to venture into the unknown. Today we're going to take a look at Facebook Messenger and how you can get it added to your website. The nice thing about Facebook Messenger is it is a kind of quick, easy way to get chat functionality added to your website, and because it works through your Facebook business account, there's not really any additional charge to it. Also, it works through Facebook Messenger. So if you already have the Facebook Messenger app on your mobile device, you don't have to download anything extra or add any more apps, it'll just already work. So it can be kind of a nice, convenient way to get that chat functionality in there.

To set it up, the first thing we're going to do is go over to our Facebook account, and this is just the regular Facebook home page. And now we are going to go over to our business page. I have my business page right here, but if you have multiple business pages, you might have to go to the arrow here and open up that menu, and then you just select your business page and that'll take you over there. Once your business page loads up, we're going to click on settings, and that'll put us on general. So on the general settings, there are a couple of things we'll just want to kind of double check. First, page visibility. It's set to page published here, so you want to make sure your page is published. If it is not, you can just click on edit and switch that over to page published and hit save.

Generally, if you've been using your Facebook business page for a while and it's visible publicly, then it will already be published. However, if you just set this page up and you haven't gone and published it yet, because maybe you haven't finished configuring it, you want to make sure to get everything all set up and get it published. And now the next thing, if we go down here to messages, you can see people can contact my page privately. You'll want that setting to be turned on as well. So if that's not what it says there, just click on edit and you can see a check box here. You'll just check that box and click on save changes. Once you have that all set up, we're going to go to messaging, just the next tab down. And now under messaging, as we scroll down here, there is a section that says Add Messenger to your website.

Now, if you are not set as an admin for this business page, you won't have access to this setting. So if, for example, you're helping someone else set this up and they have just set your privileges to their business page as an editor, for example, instead of a page admin, you won't be able to get to this setting and set up this messenger widget. So as long as you have access to this, we're going to click on Get Started, and that'll take us into this nice little wizard process. So I'm going to click on next, and the first step here will allow us to set up a custom greeting message. So by default, it's set to, "Hi, how can we help you?" But if I want to change that, I can just click on change, change that text to whatever I'd like and hit save, and that'll save my new text. You also have the option to change the default language up here, though I would imagine most of you will probably be using English, which is what it is on by default.

So once this is set up, we'll click on next. And now here in step two, this allows us to use custom colors for our widget. I picked yellow, but if you click on this, you can select from colors here, or if you have a specific color you want to use that is not in this list, you can actually paste in the hex code for it here. If you don't know what a color hex code is, you can go to Google and just search for color hex codes and it'll take you to a picker pretty easily, where you can choose a color and it will give you what the hex code is for it, so you can just paste it in. Once your color is all set, we'll click on next. And now here, it will have us basically white list a domain for this widget.

What we'll want to do here is put your agent domain in here. The biggest thing is it must be a secured domain, so it must be HTTPS. It will not work otherwise. So if you are using the company domain, so your website, something like So in my case, it would be the The company domains or subdomains are already secured, so you don't have to do anything special there. So we would just, I'll just go into the DeltaNet, and you can get to your website however you'd like, but I'll go down to website and then overviews. Then I'm just going to click on this preview website button here. There we go, you can see that this opens up my website in another window. What you should see is a URL, something like this in your address bar, and it should have a little lock or a green lock off to the side of it that indicates that it's secured.

So you'll just click on that, and we actually just want the domain, so we don't need anything after that. So you can see what I have highlighted there, just to the end of the .com. I'm going to copy that, and now we're going to go back into our Facebook settings and paste that in here. There we go, you can see it adds it to the list. And if you have multiple domains, you can put multiple domains in here also, and that just makes sure that the widget will show up on all of them. If you are using your own custom domain to go to your agent website, like if I had and I was using that domain, I would want to make sure that it is secured, otherwise it won't work here. And we have another video on setting that up, but you can set that up through the DeltaNet. So you would add your domain to the DeltaNet, and there's an option to add a security certificate to it.

So once you have your domain pasted in here, we're going to click on save. There we go, and now we'll make sure that I'll install the code myself is selected, and then just go over here and click on our code, and you can see it copies to the clipboard, and now we can click on finish. It'll thank us, and done. We're done. That's created the widget, but we still have to add it to the webpage. So now I'm going to go back into the DeltaNet, and to add that I'm going to go under website and then down to custom code. So there we go. Now you can see if you don't have any custom code snippets already, it's going to take you straight to this page. If you do, it'll take you to a page that shows what they are, and there'll be a button at the top that says add new code snippet.

However, most of you will probably see a page just like this, because you probably won't have any custom code in there. So we're just going to give it a name. We're going to call it Facebook Chat because that's what it is. All the rest of these default settings are fine. So that's all of my domains, all of my pages. We want it to appear at the top of the page. This isn't actually where the widget is going to appear. This is just where the code kind of goes in. And then we're not going to use any of these search engine settings here. Now I'm just going to paste in the code that I copied from Facebook, so I just hit control V, or actually command V to paste it, and click on save. There we go. Your changes have been saved. Now our code is in place, so now if I go over to my, there we go, go over to my agent website and I'm just going to go ahead and refresh it.

There we go. See, now it refreshed and my widget popped up down here in the corner. So there it is. Now if I click on it, well, there we are. And if I could click the button, I would log into Facebook Messenger. It knew, well, it picked up after me clicking it the first time that I'm already logged into Facebook, so I can continue as who I am, and then I can start a chat. The idea is that any customer would come to your website. If they're already logged into Facebook, they'll click on this. It'll say, "Continue as," whatever account they're logged into. They click on it and then they can open up a chat with you.

So there you go. That's all there is to it. That is how you can get Facebook Messenger attached as a chat feature to your website so that you can very quickly and easily communicate with customers. As always, thanks a lot for joining me this week. If you have any questions, comments, concerns about this, or anything else, feel free to send an email into or just give us a call and we'll walk you through whatever you need. Thanks a lot.

Schedule a Demo

Schedule a Demo