{"id":14454,"date":"2019-10-09T07:19:43","date_gmt":"2019-10-09T07:19:43","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=14454"},"modified":"2021-02-19T12:03:16","modified_gmt":"2021-02-19T12:03:16","slug":"facebook-chat-for-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/facebook-chat-for-amp\/","title":{"rendered":"How to add Facebook Chat in AMP"},"content":{"rendered":"\n<p>Facebook Chat which allows you to put Facebook page chat on AMP so that visitors can chat with you via your Facebook page inbox. This is an easy way to offer support, turns visitors into your customers and chat with them anytime, anywhere on your phone.<\/p>\n\n\n\n<p>If you want to add Facebook Chat in AMP then first you need to purchase and install <a href=\"https:\/\/ampforwp.com\/facebook-chat-for-amp\/\">Facebook Chat Compatibility for AMP<\/a>&nbsp;plugin.<\/p>\n\n\n\n<p><strong>Follow these simple steps:<\/strong><br><\/p>\n\n\n\n<ul><li>You will find this option in the <strong>WordPress Dashboard<\/strong>&nbsp;-&gt; Navigate to&nbsp;<strong>AMP Option Panel<\/strong> -&gt; <strong>AMP Facebook Chat<\/strong> -&gt; <strong>Settings<\/strong> -&gt; Enable &#8220;<strong>Pop up Messages<\/strong>&#8221; option like below the screenshot.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"526\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/20-1024x526.png\" alt=\"\" class=\"wp-image-17942\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/20-1024x526.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/20-300x154.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/20-768x394.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/20-50x26.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/20-60x31.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/20-100x51.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/20.png 1219w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li><strong>Pop-up Message:<\/strong> Once you enable this option Pop-up Message display on Page load.<\/li><li id=\"fb_pg_url\"><strong>Facebook Page:<\/strong> In this field enter your Facebook Page name, for example,<strong> <\/strong>my Facebook page name is &#8220;<strong>facebookpagename<\/strong>&#8221; then you need to add this page name. Do not add a URL like this &#8211; https:\/\/www.facebook.com\/facebookpagename<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"816\" height=\"61\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/21.png\" alt=\"\" class=\"wp-image-17946\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/21.png 816w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/21-300x22.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/21-768x57.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/21-50x4.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/21-60x4.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/21-100x7.png 100w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/figure>\n\n\n\n<ul><li><strong>Page Logo:<\/strong> Upload a Facebook Page logo for the Facebook chat for AMP<\/li><li><strong>Greeting Message:<\/strong> Enter the Text to display the Welcome Message on Chat.<\/li><\/ul>\n\n\n\n<h3>Display<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"842\" height=\"521\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/17-1.png\" alt=\"\" class=\"wp-image-17935\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/17-1.png 842w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/17-1-300x186.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/17-1-768x475.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/17-1-50x31.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/17-1-60x37.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2021\/02\/17-1-100x62.png 100w\" sizes=\"(max-width: 842px) 100vw, 842px\" \/><\/figure>\n\n\n\n<ul><li><strong>Delay Pop-up in Secs:<\/strong>  Enable this option to delay popup <\/li><li><strong>Delay in Seconds<\/strong>:  You can place the delay time for popup as per your requirement in the text box. <\/li><li><strong>Exclude For Homepage:<\/strong> If you want to exclude the Facebook chat for Homepage then enable this option.<\/li><li><strong>Exclude For Specific Posts:<\/strong> In this field enter the specific Post ID to exclude the Facebook chat and if multiple posts then separate them with a comma<strong> &#8220;,&#8221;<\/strong><\/li><li><strong>Exclude For Specific Pages:<\/strong>  Enter the specific Page ID to exclude the Facebook chat and if multiple pages then separate them with a&nbsp;comma<strong> &#8220;,&#8221;<\/strong><\/li><\/ul>\n\n\n\n<h3>Translate Panel<\/h3>\n\n\n\n<ul><li>If your website is in the Default language, if you want to translate your website to your Default language, then you can use this Section. From this section, you can translate your website to any of your desired languages like below the screenshot. <\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"922\" height=\"264\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/5.png\" alt=\"\" class=\"wp-image-14465\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/5.png 922w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/5-300x86.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/5-768x220.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/5-50x14.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/5-60x17.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/5-100x29.png 100w\" sizes=\"(max-width: 922px) 100vw, 922px\" \/><\/figure>\n\n\n\n<h4>The Output of the Facebook Chat in AMP<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"278\" height=\"596\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/6-1.png\" alt=\"\" class=\"wp-image-14476\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/6-1.png 278w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/6-1-140x300.png 140w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/6-1-23x50.png 23w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/6-1-28x60.png 28w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/10\/6-1-47x100.png 47w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><\/figure><\/div>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n\n\n\n<p><br><\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Facebook Chat which allows you to put Facebook page chat on AMP so that visitors can chat with you via your Facebook page inbox. This is an easy way to offer support, turns visitors into your customers and chat with them anytime, anywhere on your phone. If you want to&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14454"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=14454"}],"version-history":[{"count":27,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14454\/revisions"}],"predecessor-version":[{"id":17948,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/14454\/revisions\/17948"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=14454"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=14454"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=14454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}