{"id":3974,"date":"2023-01-29T16:48:43","date_gmt":"2023-01-29T16:48:43","guid":{"rendered":"https:\/\/devclouds.io\/blog\/?p=3974"},"modified":"2023-01-30T09:28:59","modified_gmt":"2023-01-30T09:28:59","slug":"how-to-add-facebook-messenger-chat-in-wordpress-website","status":"publish","type":"post","link":"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/","title":{"rendered":"How To Add Facebook Messenger Chat in WordPress"},"content":{"rendered":"\n

Hi guys, Today we\u2019re going to see how to add Facebook messenger chat in WordPress website. Let\u2019s 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 reading this article.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"messenger<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So after reading this article, you\u2019ll be able to add the messenger chat like this. And anyone who is visiting your website can contact you, Just by clicking this icon. Now if the visitor types their message & sends it, you\u2019ll receive that message on your messenger account. And now if you want to reply to the message, you can simply reply to your visitor.<\/p>\n\n\n\n

Okay! so let\u2019s get started. Let\u2019s add the facebook messenger chat to our website. First, let\u2019s look at the site where we want to add the messenger chat. To add the messenger chat, We\u2019re going to do two steps, The first step is to Create a messenger chat for your website. So to create the chat, Let\u2019s open a new tab, And then go to Facebook.com<\/a>.<\/p>\n\n\n\n

Create messenger chat for your website<\/h3>\n\n\n\n
<\/div>\n\n\n\n
\"pages<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now login to your Facebook account. Once you\u2019ve logged in, Go to pages. Now this is the Facebook page which I\u2019ve created for my website.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"enabling<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Okay, now to create a messenger chat for your website, Just go to settings. And click messaging, Now, if you scroll down, You can see that, we\u2019ve got an option to add messenger to our site. So let\u2019s click get started And then click next.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"messenger<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now here you can see that, we have a live preview of the chat, which we\u2019re 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\u2019m going to enter \u201cwelcome to Quicktechy\u201d Once you\u2019ve entered it, Click save. And you can see that, the text has been changed And then click next.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"select<\/figure>\n\n\n\n
<\/div>\n\n\n\n

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\u2019ve done that, Click next.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"domain<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now to complete creating the chat, Here you need to enter the domain name of your site. So to do that, Let\u2019s go to our site, And then copy domain name, Now go back to this tab, And paste it here.<\/p>\n\n\n\n

Once you\u2019ve done that, Just click save. And now, our messenger chat will be successfully created. Once you\u2019ve created the chat, We can go to the final step, which is to \u2018Add this chat to our site\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"copy<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now in order to add the messenger chat to our website. We need to copy this code and paste it on our website.<\/p>\n\n\n\n

Adding Facebook chat on your website using Elementor<\/h3>\n\n\n\n

Let\u2019s go to our site, Now let\u2019s say you want to add the chat to your homepage. Just go to \u2018edit with elementor,\u2019 Now as we want to add the chat in the footer area, Let\u2019s click footer.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"html<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now to add the chat, go here and click this plus icon, Now just drag this HTML element, And drop it here. Once you\u2019ve done that, Now to add the messenger chat, All you have to do is. Just go back to Facebook tab, Now copy code, then go back, And paste the code in this box.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"html<\/figure>\n\n\n\n
<\/div>\n\n\n\n

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.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"messenger<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So to check that, Let\u2019s go to our site, Now if we click refresh, You can see that we\u2019ve 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.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"chat\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

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\u2019ve received a new message notification. And if we open it, You can see we\u2019ve 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.<\/p>\n\n\n\n

Okay, so this is How To Add Facebook Messenger Chat in WordPress Website.<\/p>\n\n\n\n

Using messenger chat from mobile<\/h4>\n\n\n\n

Now let\u2019s say a visitor is visiting your site from their mobile. Now how can they contact you using messenger chat?<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So next, let\u2019s 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\u2019ve 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 \u2018chat in messenger\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

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.<\/p>\n\n\n\n

Okay, so now you know how your visitors can contact you using messenger from their mobile.<\/p>\n\n\n\n

Now what if your visitors do not have a messenger account.<\/p>\n\n\n\n

How do visitors contact you as a Guest<\/h4>\n\n\n\n

How can they contact you using messenger chat? So next, let\u2019s see how your visitors can contact you without logging into messenger. Let\u2019s go to our site, And let\u2019s say your visitor wants to contact you, and clicks this icon. Now, if your visitor does not have a messenger account.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Guest<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Instead of logging in to messenger They can use this guest option to chat with you. So let\u2019s click it, As soon as you click it, You can see the chat has been open. Now the visitor can send their message here. And if you go to Facebook, You can see that, we\u2019ve received a notification.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Guest<\/figure>\n\n\n\n
<\/div>\n\n\n\n

If we open it, You can see that we\u2019ve got a new message from our visitor in the name of guest. And you can send your reply from here.<\/p>\n\n\n\n

Okay, so this is how your visitors can contact you without logging into messenger.<\/p>\n\n\n\n

Adding Facebook messenger chat using WordPress customize option.<\/h3>\n\n\n\n

Next, let\u2019s see how you can add the messenger chat if you don\u2019t have elementor on your site. Now this is the site which doesn\u2019t have elementor. So To add messenger chat to this website, Like we did before, We need to copy code and paste it on our site.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

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 \u2018footer\u2019. Now here we have to enter a name for your chat, I\u2019m going to enter Facebook messenger.<\/p>\n\n\n\n

Once you\u2019ve done that, Now to add the chat, All you have to do is, Just go to Facebook tab, And then copy code. Now go back to your dashboard, And paste it here. Once you\u2019ve done that, To save the changes, Just click save, And then click done.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"chat<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And the messenger chat will be add to our site, now if we go to your site. And click refresh, You can see that, We\u2019ve got the messenger chat on our site.<\/p>\n\n\n\n

that\u2019s it, guys, So now you know how to add Facebook messenger chat in WordPress website.<\/p>\n\n\n\n

If you want to learn more you can visit our blog page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Let\u2019s say you have a website. And you want to give your visitors a way to contact you using messenger chat.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3974","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"yoast_head":"\nHow To Add Facebook Messenger Chat in WordPress<\/title>\n<meta name=\"description\" content=\"How To Add Facebook Messenger Chat in WordPress Website | Create messenger chat for your website | How do visitors contact you as a Guest\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Add Facebook Messenger Chat in WordPress\" \/>\n<meta property=\"og:description\" content=\"How To Add Facebook Messenger Chat in WordPress Website | Create messenger chat for your website | How do visitors contact you as a Guest\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/\" \/>\n<meta property=\"og:site_name\" content=\"The Official DevClouds Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-29T16:48:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-30T09:28:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devclouds.io\/blog\/wp-content\/uploads\/2023\/01\/Screenshot_1-51-1024x553.jpg\" \/>\n<meta name=\"author\" content=\"hammad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hammad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/\",\"url\":\"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/\",\"name\":\"How To Add Facebook Messenger Chat in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/devclouds.io\/blog\/#website\"},\"datePublished\":\"2023-01-29T16:48:43+00:00\",\"dateModified\":\"2023-01-30T09:28:59+00:00\",\"author\":{\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d\"},\"description\":\"How To Add Facebook Messenger Chat in WordPress Website | Create messenger chat for your website | How do visitors contact you as a Guest\",\"breadcrumb\":{\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devclouds.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Add Facebook Messenger Chat in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devclouds.io\/blog\/#website\",\"url\":\"https:\/\/devclouds.io\/blog\/\",\"name\":\"The Official DevClouds Blogs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devclouds.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d\",\"name\":\"hammad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g\",\"caption\":\"hammad\"},\"url\":\"https:\/\/devclouds.io\/blog\/author\/hammad\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Add Facebook Messenger Chat in WordPress","description":"How To Add Facebook Messenger Chat in WordPress Website | Create messenger chat for your website | How do visitors contact you as a Guest","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/","og_locale":"en_US","og_type":"article","og_title":"How To Add Facebook Messenger Chat in WordPress","og_description":"How To Add Facebook Messenger Chat in WordPress Website | Create messenger chat for your website | How do visitors contact you as a Guest","og_url":"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/","og_site_name":"The Official DevClouds Blogs","article_published_time":"2023-01-29T16:48:43+00:00","article_modified_time":"2023-01-30T09:28:59+00:00","og_image":[{"url":"https:\/\/devclouds.io\/blog\/wp-content\/uploads\/2023\/01\/Screenshot_1-51-1024x553.jpg"}],"author":"hammad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hammad","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/","url":"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/","name":"How To Add Facebook Messenger Chat in WordPress","isPartOf":{"@id":"https:\/\/devclouds.io\/blog\/#website"},"datePublished":"2023-01-29T16:48:43+00:00","dateModified":"2023-01-30T09:28:59+00:00","author":{"@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d"},"description":"How To Add Facebook Messenger Chat in WordPress Website | Create messenger chat for your website | How do visitors contact you as a Guest","breadcrumb":{"@id":"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/devclouds.io\/blog\/how-to-add-facebook-messenger-chat-in-wordpress-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devclouds.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Add Facebook Messenger Chat in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/devclouds.io\/blog\/#website","url":"https:\/\/devclouds.io\/blog\/","name":"The Official DevClouds Blogs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devclouds.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d","name":"hammad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g","caption":"hammad"},"url":"https:\/\/devclouds.io\/blog\/author\/hammad\/"}]}},"_links":{"self":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/comments?post=3974"}],"version-history":[{"count":2,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3974\/revisions"}],"predecessor-version":[{"id":4035,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3974\/revisions\/4035"}],"wp:attachment":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/media?parent=3974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/categories?post=3974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/tags?post=3974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}