Hi guys,
Today we’re going to see how you can add the Facebook messenger
chat to your WordPress website.
Let’s say you have a website.
And you want to give your visitors a way to contact you using messenger chat,
You can do that easily by watching this video,
So after watching this video, you’ll be able to add the messenger chat like this.
And anyone who is visiting your website can contact you,
Just by clicking this icon,
And now if the visitor types their message & sends it,
you’ll receive that message on your messenger account.
And now if you want to reply to the message,
you can simply click here
and then reply to your visitor.
Okay! so let’s get started,
I’m Bryan from website learners,
And let’s add the facebook messenger chat to our website.
First, let’s look at the site where we want to add the messenger chat,
Here it is,
Now to add the messenger chat,
We’re going to do two steps,
The first step is to Create a messenger chat for your website.
So to create the chat,
Let’s open a new tab,
And then go to Facebook.com
Now login to your Facebook account.
Once you’ve logged in,
Go to pages
And here, you can see we have a page for our site,
Now this is the Facebook page which I’ve created for my website
If you don’t have a page for your site,
Make sure you create one before you continue,
Okay, now to create a messenger chat for your website,
Just click here,
And go to settings,
And click messaging,
Now, if you scroll down,
You can see that, we’ve got an option to add messenger to our site,
So let’s click get started,
And then click next,
Now here you can see that, we have a live preview of the chat,
which we’re going to create.
And as you can see, we have a default text here, which will appear
when a visitor opens this chat.
Now, if you want to change this text,
Just click here,
And then enter your text,
So I’m going to enter “welcome to Quicktechy”
Once you’ve entered it,
Click save,
And you can see that, the text has been changed
And then click next
Now, if you want to change the color of your chat to match with your site
You can click here,
And choose the colour you want.
And as you can see the colour has been changed
Once you’ve done that, Click next
Now to complete creating the chat,
Here you need to enter the domain name of your site,
So to do that, Let’s go to our site,
And then copy this domain name,
Now go back to this tab,
And paste it here.
Once you’ve done that,
Just click save.
And now, our messenger chat will be successfully created,
Once you’ve created the chat,
We can go to the final step, which is to ‘Add this chat to our site.’
Now in order to add the messenger chat to our website,
We need to copy this code and paste it on our website
So to do that,
Let’s go to our site,
Now let’s say you want to add the chat to your homepage,
Just go to ‘edit with elementor,’
Now as we want to add the chat in the footer area,
Let’s click footer,
Now to add the chat, go here and click this plus icon,
Now just drag this HTML element,
And drop it here,
Once you’ve done that,
Now to add the messenger chat,
All you have to do is,
Just go back to this tab,
Now copy this code,
then go back,
And paste the code in this box,
As soon as you paste it,
You can see that our messenger chat has appeared here,
So now to save the changes,
Just click update,
And our messenger chat will be successfully added to our site,
So to check that,
Let’s go to our site,
Now if we click refresh,
You can see that we’ve now got our messenger chat on our site,
Now, if a visitor wants to contact you,
All they have to do is,
Just click on this icon,
Now if the visitor has already logged into messenger,
Now to chat with you
They can just click continue,
And if they type their message,
And click send,
You can see that, their message is sent,
Now if you go to your Facebook account,
You can see that we’ve received a new message notification,
And if we open it,
You can see we’ve received the message from our visitor,
Now to reply to your visitor,
All you have to do is,
Just enter your message here,
Click send,
And the visitor will receive your message like this
Okay, so this is how you can add messenger chat to your WordPress website,
Now let’s say a visitor is visiting your site from their mobile,
Now how can they contact you using messenger chat?
So next, let’s see how your visitors can contact you using
messenger chat from their mobile,
Now when a visitor opens your site on their mobile,
You can see that we’ve got our messenger chat here,
Now, if the visitor wants to contact you,
All they have to do is,
Just click this icon,
And then click ‘chat in messenger’,
Now, if they enter their message,
And click send,
Their message will be sent,
And if you open the messenger app on your mobile,
You can see we received the message from our visitor
Now to reply to your visitor, All you have to do is,
Just open it,
And then send your reply,
And as you can see the visitor has got your reply
Okay, so now you know how your visitors can contact you using
messenger from their mobile,
Now what if your visitors do not have a messenger account,
How can they contact you using messenger chat?
So next, let’s see how your visitors can contact you
without logging into messenger.
Let’s go to our site,
And let’s say your visitor wants to contact you, and clicks this icon,
Now, if your visitor does not have a messenger account,
Instead of logging in to messenger
They can use this guest option to chat with you,
So let’s click it,
As soon as you click it,
You can see the chat has been opened,
Now the visitor can send their message here,
And if you go to Facebook,
You can see that, we’ve received a notification,
And if we open it,
You can see that we’ve got a new message from our visitor in the name of guest
And you can send your reply from here,
Okay, so this is how your visitors can contact you
without logging into messenger.
Next, let’s see how you can add the messenger chat if you don’t
have elementor on your site,
Now this is the site which doesn’t have elementor,
So To add messenger chat to this website,
Like we did before,
We need to copy this code and paste it on our site,
So to do that.
Just go here and click dashboard,
Now go to appearance and click widgets,
Now as we want to add the chat in the footer area
Just drag the HTML widget and drop it on ‘footer.’
Now here we have to enter a name for your chat,
I’m going to enter Facebook messenger
Once you’ve done that,
Now to add the chat, All you have to do is,
Just go to this tab, And then copy this code,
Now go back to your dashboard, And paste it here,
Once you’ve done that,
To save the changes,
Just click save,
And then click done,
And the messenger chat will be added to our site,
now if we go to your site,
And click refresh,
You can see that,
We’ve got the messenger chat on our site.
that’s it, guys,
So now you know how you can add a facebook messenger chat to your wordpress website
Now if you want to add a instagram feed to your Wordpress site, you can watch this video
And also, make sure you subscribe to website learners to get more videos like this one.
Thanks for watching,
I’ll see you in the next video,
Take care, Bye-bye