If you want to create a sticky call now Button in WordPress then continue reading.<\/p>\n
A call now button can increase your conversions or show your users an easy & fast way to contact you. For a funeral institute we use this button to get instant help when a death occurred.<\/p>\n
First open your functions.php file and add the following code there:<\/p>\n
function custom_load_font_awesome() {\r\n wp_enqueue_style( 'font-awesome-5', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.9.0\/css\/all.min.css' );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );<\/pre>\nThis will make sure the call now phone icon will show. We use font awesome icons for this.<\/p>\n
The Call Now Button HTML Code<\/h2>\n
Next is to add the html code, that will be rendered on the footer of your WordPress installation. We use the wp_footer hook for this, so the script will render at the very end of your site. This avoids SEO issues, because text will be rendered before the call now.<\/p>\n
So go ahead and add the next lines of code, which is the skeleton without styling of the flyout button:<\/p>\n
function we_sticky_call() {\r\n\t?>\r\n\r\n\t<a href=\"tel:05911234\" class=\"we-sticky-call-container\">\r\n\t\t<div class=\"we-sticky-call-icon\">\r\n\t\t\t<i class=\"fas fa-phone-alt\"><\/i>\r\n\t\t<\/div>\r\n\t\t<div class=\"we-sticky-call-content\">\r\n\t\t\t<div class=\"we-sticky-call-title\">\r\n\t\t\t\t0591 1234\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"we-sticky-call-description\">\r\n\t\t\t\t24\/7 Accident Phone \r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/a>\r\n\t<?php\r\n\r\n}\r\nadd_action( 'wp_footer', 'we_sticky_call' );<\/pre>\nMake sure you replace the phone numbers with the one of yours.<\/p>\n
Styling the Button<\/h2>\n
Of course the button needs some styling and should work on mobile devices right? So for the basic styling add the following lines of CSS to your styles.css file:<\/p>\n
.we-sticky-call-container {\r\n background: #f39200;\r\n display: block;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n position: fixed;\r\n bottom: 20%;\r\n left: 20px;\r\n text-align: center;\r\n line-height: 50px;\r\n color: #fff;\r\n z-index: 999;\r\n}\r\n\r\n.we-sticky-call-content {\r\n position: absolute;\r\n top: 0;\r\n left: 25px;\r\n width: 250px;\r\n padding-left: 25px;\r\n background: #f39200;\r\n height: 50px;\r\n z-index: -1;\r\n border-radius: 0 25px 25px 0;\r\n opacity: 0;\r\n transition: all 0.5s ease;\r\n font-size: 16px;\r\n line-height: 20px;\r\n}\r\n\r\n.we-sticky-call-title {\r\n margin-top: 5px;\r\n}\r\n\r\n.we-sticky-call-description {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.we-sticky-call-container:hover .we-sticky-call-content {\r\n\topacity: 1;\r\n}<\/pre>\nNow your button is styled and has some nice animations when hovering over the icon.So what about responsive? Additionally place the following CSS that will apply on mobile devices only:<\/p>\n
@media (max-width: 768px) {\r\n\r\n\t.we-sticky-call-container {\r\n\t bottom: 0;\r\n\t width: 100%;\r\n\t border-radius: 0;\r\n\t left: 0;\r\n\t}\r\n\r\n\t.we-sticky-call-icon {\r\n\t\tdisplay: none;\r\n\t}\r\n\r\n\t.we-sticky-call-content {\r\n\t\topacity: 1;\r\n\t\twidth: 100%;\r\n\t\tleft: 0;\r\n\t\tpadding-left: 0;\r\n\t}\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"If you want to create a sticky call now Button in WordPress then continue reading. A call now button can increase your conversions or show your users an easy & fast way to contact you. For a funeral institute we use this button to get instant help when a death occurred. First open your functions.php…<\/p>\n","protected":false},"author":1,"featured_media":993,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts\/992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/comments?post=992"}],"version-history":[{"count":9,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts\/992\/revisions"}],"predecessor-version":[{"id":4317,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/posts\/992\/revisions\/4317"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/media\/993"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/media?parent=992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/categories?post=992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/tags?post=992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}