{"id":15480,"date":"2019-12-19T11:34:56","date_gmt":"2019-12-19T11:34:56","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=15480"},"modified":"2019-12-19T12:48:13","modified_gmt":"2019-12-19T12:48:13","slug":"how-to-add-a-floating-button-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-a-floating-button-in-amp\/","title":{"rendered":"How to add a Floating Button in AMP"},"content":{"rendered":"\n<p> Floating button is one of the most crucial elements in UI and If you want a fixed floating button in AMP then you need to purchase this extension and with the help of that, you can easily create the floating button for the AMP version. <\/p>\n\n\n\n<p>If you want to add Floating Button in AMP then first you need to purchase and install <a href=\"https:\/\/ampforwp.com\/addons\/floating-button-for-amp\/\">Floating Button for AMP<\/a> plugin.<\/p>\n\n\n\n<p>After installing you will find this option in\u00a0<strong>WordPress Dashboard<\/strong>\u00a0->\u00a0<strong>AMP Option Panel<\/strong> ->  Navigate to <strong>Floating Button <\/strong>-> <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: <\/strong> We have icons of WhatsApp, Call now, and also you can choose from the custom icons and you can even upload your own custom image.<\/li><li><strong>Phone Number:<\/strong> In this field, you can enter the Phone number<\/li><li><strong>Color:<\/strong> In this field, you can change the color of the Floating Button<\/li><li><strong>Background Color:<\/strong> In this field, you can change the background color of the Floating Button. <\/li><li><strong>Position:<\/strong> In this option, you can change the position of the Floating Button<\/li><\/ul>\n\n\n\n<h4>The Output of the Floating Button in AMP<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/FotoJet-1-1024x1024.jpg\" alt=\"\" class=\"wp-image-15498\" width=\"518\" height=\"518\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/FotoJet-1-1024x1024.jpg 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/FotoJet-1-150x150.jpg 150w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/FotoJet-1-300x300.jpg 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/FotoJet-1-768x768.jpg 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/FotoJet-1-50x50.jpg 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/FotoJet-1-60x60.jpg 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/FotoJet-1-100x100.jpg 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/12\/FotoJet-1.jpg 1200w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\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><br><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>Floating button is one of the most crucial elements in UI and If you want a fixed floating button in AMP then you need to purchase this extension and with the help of that, you can easily create the floating button for the AMP version. If you want to add&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[175],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/15480"}],"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=15480"}],"version-history":[{"count":18,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/15480\/revisions"}],"predecessor-version":[{"id":15505,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/15480\/revisions\/15505"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=15480"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=15480"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=15480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}