{"id":16595,"date":"2020-02-22T11:24:43","date_gmt":"2020-02-22T11:24:43","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=16595"},"modified":"2020-02-22T11:34:26","modified_gmt":"2020-02-22T11:34:26","slug":"how-to-add-whatsapp-chat-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-whatsapp-chat-in-amp\/","title":{"rendered":"How to add WhatsApp Chat in AMP"},"content":{"rendered":"\n<p>If you want to add WhatsApp Chat in AMP then first you need to purchase and install\u00a0<a href=\"https:\/\/ampforwp.com\/addons\/floating-button-for-amp\/\">Floating Button for AMP<\/a>\u00a0plugin.<\/p>\n\n\n\n<p>After installing you will find this option in&nbsp;<strong>WordPress Dashboard<\/strong>&nbsp;-&gt;&nbsp;<strong>AMP Option Panel<\/strong>&nbsp;-&gt; Navigate to&nbsp;<strong>Floating Button&nbsp;<\/strong>-&gt;&nbsp;<strong>Settings<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"483\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/1-2-1024x483.png\" alt=\"\" class=\"wp-image-15484\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/1-2-1024x483.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/1-2-300x141.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/1-2-768x362.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/1-2-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/1-2-60x28.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/1-2-100x47.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/1-2.png 1232w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul><li><strong>Select a Button:\u00a0<\/strong>In this option need to select WhatsApp option.<\/li><li><strong>Phone Number:<\/strong>\u00a0In this field, you can enter the Phone number.<\/li><li><strong>Color:<\/strong>\u00a0In this field, you can change the color of the WhatsApp Chat Button.<\/li><li><strong>Background Color:<\/strong>\u00a0In this field, you can change the background color of the WhatsApp Chat Button.<\/li><li><strong>Position:<\/strong>\u00a0In this option, you can change the position of the WhatsApp Chat Button.<\/li><\/ul>\n\n\n\n<h4>The Output of the WhatsApp Chat in AMP<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/Desktop-2020-02-22-17-00-19.png\" alt=\"\" class=\"wp-image-16597\" width=\"258\" height=\"512\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/Desktop-2020-02-22-17-00-19.png 332w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/Desktop-2020-02-22-17-00-19-151x300.png 151w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/Desktop-2020-02-22-17-00-19-25x50.png 25w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/Desktop-2020-02-22-17-00-19-30x60.png 30w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/02\/Desktop-2020-02-22-17-00-19-50x100.png 50w\" sizes=\"(max-width: 258px) 100vw, 258px\" \/><\/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<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>If you want to add WhatsApp Chat in AMP then first you need to purchase and install\u00a0Floating Button for AMP\u00a0plugin. After installing you will find this option in&nbsp;WordPress Dashboard&nbsp;-&gt;&nbsp;AMP Option Panel&nbsp;-&gt; Navigate to&nbsp;Floating Button&nbsp;-&gt;&nbsp;Settings Select a Button:\u00a0In this option need to select WhatsApp option. Phone Number:\u00a0In this field, you can&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/16595"}],"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=16595"}],"version-history":[{"count":4,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/16595\/revisions"}],"predecessor-version":[{"id":16600,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/16595\/revisions\/16600"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=16595"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=16595"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=16595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}