{"id":33427,"date":"2021-08-19T14:34:54","date_gmt":"2021-08-19T08:49:54","guid":{"rendered":"https:\/\/rarathemes.com\/blog\/?p=33427"},"modified":"2024-08-21T13:00:55","modified_gmt":"2024-08-21T07:15:55","slug":"click-to-call-link-wordpress","status":"publish","type":"post","link":"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/","title":{"rendered":"How to Make a Click to Call Link in WordPress ( Step by Step)"},"content":{"rendered":"\n<p>Did you know that <a href=\"https:\/\/www.perficient.com\/insights\/research-hub\/mobile-vs-desktop-usage\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">68<\/a>% of web visits occurred from mobile phones in 2020?<\/p>\n\n\n\n<p>Likewise, in the first quarter of 2021 alone, mobile phones (excluding tablets) accounted for <a href=\"https:\/\/www.statista.com\/statistics\/277125\/share-of-website-traffic-coming-from-mobile-devices\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">54.8<\/a>% of global website traffic.&nbsp;<\/p>\n\n\n\n<p>As a result, many businesses have included a clickable contact number apart from email address on their websites. The idea is to allow visitors to make phone calls and get in touch with a single click. You, too, can add such a phone link to your website by making a click-to-call link.<\/p>\n\n\n\n<p>Don\u2019t know what we are talking about?&nbsp;<\/p>\n\n\n\n<p>Don\u2019t worry. This article will instruct step-by-step on how to make a click-to-call link in WordPress. As you go along, we will also explain what a clickable number in WordPress is and why you need it.&nbsp;<\/p>\n\n\n\n<p>Lets\u2019 begin with the introduction:&nbsp;<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#What_is_a_Click-to-Call_Link_in_WordPress\" >What is a Click-to-Call Link in WordPress?&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Why_Should_You_Add_a_Click-to-Call_Link_in_WordPress\" >Why Should You Add a Click-to-Call Link in WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#How_Does_a_Click-to-Call_Link_Work\" >How Does a Click-to-Call Link Work<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#How_to_Make_a_Click-to-Call_Link_in_WordPress\" >How to Make a Click-to-Call Link in WordPress&nbsp;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Method_1_Making_a_Click-to-Call_Link_Using_a_Plugin\" >Method 1: Making a Click-to-Call Link Using a Plugin<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Step_1_Installing_and_Activating_the_Plugin\" >Step 1: Installing and Activating the Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Step_2_Configuring_the_Plugin\" >Step 2: Configuring the Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Configuring_Sticky_Call_Button\" >#Configuring Sticky Call Button<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Configuring_Static_Call_Button\" >#Configuring Static Call Button<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Adding_Call_Button_to_Widget\" >Adding Call Button to Widget&nbsp;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Method_2_Adding_a_Click-to-Call_Link_With_HTML\" >Method 2: Adding a Click-to-Call Link With HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Method_3_Adding_Click-to-Call_link_in_WordPress_Header\" >Method 3: Adding Click-to-Call link in WordPress Header&nbsp;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Frequently_Asked_Questions\" >Frequently Asked Questions&nbsp;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#How_to_make_a_click_call_link_in_HTML\" >How to make a click call link in HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#How_does_click-to-call_work\" >How does click-to-call work?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#How_to_add_a_call-now_button_to_a_website\" >How to add a call-now button to a website?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rarathemes.com\/blog\/click-to-call-link-wordpress\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_a_Click-to-Call_Link_in_WordPress\"><\/span>What is a Click-to-Call Link in WordPress?&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Basically, a click-to-call link is a clickable link that lets your mobile users make a call to your company with a single click on the contact information you have added to your site. The number of mobile users is increasing and internet visits on mobile phones are considerably high. Thus, click-to-call links are widely used across most websites.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Should_You_Add_a_Click-to-Call_Link_in_WordPress\"><\/span>Why Should You Add a Click-to-Call Link in WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are various ways for your customers to communicate with your business, such as live chat, email, contact form, and support tickets.&nbsp;<\/p>\n\n\n\n<p>All these are reliable and helpful. However, when people have specific questions or queries, they prefer direct calls. This makes them feel attended to on a personal level and might increase their satisfaction.&nbsp;<\/p>\n\n\n\n<p>If you consider their point of view, being able to contact quickly with a single tap saves their time. In addition, the click-to-call link is more convenient as there is no need to remember and dial the number.&nbsp;<\/p>\n\n\n\n<p>Thus, a click-to-call telephone link is more convenient and an easy way for your visitors to get in touch with your company.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Does_a_Click-to-Call_Link_Work\"><\/span>How Does a Click-to-Call Link Work<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A click-to-call link is an HTML hyperlink that leads your visitors to connect with you in real-time. HTML 5 includes tel: and mailto: protocols that web browsers can use.<\/p>\n\n\n\n<p>Each browser responds differently to these protocols. For example, some browsers launch the phone app on the mobile phone and automatically add the number on display, awaiting you to click the mobile\u2019s call button. Some other browsers directly make the call, while others ask if making the call is okay when users click the phone number link.<\/p>\n\n\n\n<p>Since the click-to-call link is HTML, you can add it anywhere on your sites, such as the sidebar, header, footer, within widgets, or your content.<\/p>\n\n\n\n<p>Another important advantage of using the click-to-call link in WordPress is in making your marketing specific. You can track phone number clicks on your website and know where your visitors are coming from to your site. You can use this information to create personalized marketing campaigns and show the right information to the right people at the right time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Make_a_Click-to-Call_Link_in_WordPress\"><\/span>How to Make a Click-to-Call Link in WordPress&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>There are three ways to make and add a click-to-call link in WordPress. We have detailed them step-by-step. Read them below:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_1_Making_a_Click-to-Call_Link_Using_a_Plugin\"><\/span>Method 1: Making a Click-to-Call Link Using a Plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Plugins make it much easier to create and add a click-to-call button in Classic Editor, Gutenberg, sidebar, and sticky floating buttons. Here are the steps:&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Installing_and_Activating_the_Plugin\"><\/span>Step 1: Installing and Activating the Plugin<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to your WordPress dashboard. Click on the <strong><em>Plugins &gt; Add New option<\/em><\/strong>.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"665\" height=\"269\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard.png\" alt=\"add new plugin from dashboard\" class=\"wp-image-31787\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard.png 665w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard-300x121.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard-148x60.png 148w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Search for the \u201c<a href=\"https:\/\/wordpress.org\/plugins\/wp-call-button\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>WP Call Button<\/em><\/a>\u201d plugin. Install and activate it.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Installing-and-activating-the-WP-Call-Button-plugin.png\" alt=\"Installing and activating the WP Call Button plugin\" class=\"wp-image-33445\" width=\"730\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Installing-and-activating-the-WP-Call-Button-plugin.png 588w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Installing-and-activating-the-WP-Call-Button-plugin-300x216.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Installing-and-activating-the-WP-Call-Button-plugin-83x60.png 83w\" sizes=\"(max-width: 588px) 100vw, 588px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Configuring_the_Plugin\"><\/span>Step 2: Configuring the Plugin<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>After activating the WP Call Button plugin, you need to configure it. Go to <strong><em>Settings &gt; WP Call Button<\/em><\/strong> option on your dashboard.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"386\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/go-to-wp-call-button-setting.png\" alt=\"Configuring the WP Call Button plugin\" class=\"wp-image-33570\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/go-to-wp-call-button-setting.png 680w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/go-to-wp-call-button-setting-300x170.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/go-to-wp-call-button-setting-106x60.png 106w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/figure><\/div>\n\n\n\n<p>You can either configure the plugin with the Sticky Call Button or the Static Call Button option. The sticky button moves along with the user as they scroll and browse your site while the static button remains stationary.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"463\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/two-options-to-configure-the-WP-Call-Button.png\" alt=\"two options to configure the WP Call Button\" class=\"wp-image-33573\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/two-options-to-configure-the-WP-Call-Button.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/two-options-to-configure-the-WP-Call-Button-300x198.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/two-options-to-configure-the-WP-Call-Button-91x60.png 91w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Configuring_Sticky_Call_Button\"><\/span>#Configuring Sticky Call Button<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>First, toggle on the <strong>Call Now Button Status<\/strong> to activate your website&#8217;s sticky Call Button feature. You will find four standard settings while creating a Sticky Call Button. Fill in the information accordingly:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Call Button Text<\/strong> \u2013 Type in what your phone number will display as on your site. You can also add your country code.&nbsp;<\/li><li><strong>Button Position <\/strong>\u2013 Configure how the button appears on your website.<\/li><li><strong>Call Button Color<\/strong> \u2013 Select a color for your call button.<\/li><li><strong>Visibility <\/strong>\u2013 Hide the call button on certain pages.<\/li><\/ul>\n\n\n\n<p>If you want to show the Call Button on mobile devices, not on the desktop, you can toggle on the call button only for mobile devices. Save the change at the end.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"457\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/call-button-on-mobile-devices-only.png\" alt=\"call button on mobile devices only\" class=\"wp-image-33574\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/call-button-on-mobile-devices-only.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/call-button-on-mobile-devices-only-300x196.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/call-button-on-mobile-devices-only-92x60.png 92w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>Now, a call button appears on your site that moves along with the scroll.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"406\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Preview-of-sticky-call-button.png\" alt=\"Preview of sticky call button\" class=\"wp-image-33581\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Preview-of-sticky-call-button.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Preview-of-sticky-call-button-300x174.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Preview-of-sticky-call-button-103x60.png 103w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Configuring_Static_Call_Button\"><\/span>#Configuring Static Call Button<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>If you run on WordPress Classic Editor, you need to configure the Static Call Button.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to the Static Call Button tab at the top.&nbsp;<\/li><li>Now, enter the call button text and select the call button color<\/li><li>Doing so generates a shortcode at the end. You need to copy it.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"418\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/copying-shortcode-for-static-call-button.png\" alt=\"copying shortcode for static call button\" class=\"wp-image-33583\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/copying-shortcode-for-static-call-button.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/copying-shortcode-for-static-call-button-300x179.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/copying-shortcode-for-static-call-button-100x60.png 100w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>Now, paste the shortcode in your page\/post where you want to add the call button. We recommend pasting it on your <strong>Contact <\/strong>page. A static call button makes more sense there.<\/p>\n\n\n\n<p>It will look something like this:&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"381\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/preview-of-static-call-button.png\" alt=\"preview of static call button\" class=\"wp-image-33613\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/preview-of-static-call-button.png 699w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/preview-of-static-call-button-300x164.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/preview-of-static-call-button-110x60.png 110w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/figure><\/div>\n\n\n\n<p>You can also publish your call button using the block editor as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Click on the add icon on your block editor.&nbsp;<\/li><li>Select the <strong>WP Call Button<\/strong> option.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"441\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/adding-a-WP-Call-button-in-guterng-block.png\" alt=\"adding a WP Call button in block editor\" class=\"wp-image-33615\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/adding-a-WP-Call-button-in-guterng-block.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/adding-a-WP-Call-button-in-guterng-block-300x189.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/adding-a-WP-Call-button-in-guterng-block-95x60.png 95w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>You can adjust your call button color, font size, position, and more on the right-hand side.&nbsp;<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_Call_Button_to_Widget\"><\/span>Adding Call Button to Widget&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>You can also add your call button to widgets such as the sidebar, footer, header, and other places. Here is how:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to the <strong><em>Appearance &gt; Widgets<\/em><\/strong> on your dashboard.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"407\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/go-to-widget.png\" alt=\"go to widget\" class=\"wp-image-31895\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/go-to-widget.png 662w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/go-to-widget-300x184.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/go-to-widget-98x60.png 98w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Scroll to the <strong>WP Call Button <\/strong>widget.&nbsp;<\/li><li>Drag it to the footer, header, sidebar or other widget areas where you want to add the call button.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"398\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/add-WP-Call-Button-widget-to-sidebar.png\" alt=\"adding WP Call Button widget to sidebar\" class=\"wp-image-33619\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/add-WP-Call-Button-widget-to-sidebar.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/add-WP-Call-Button-widget-to-sidebar-300x171.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/add-WP-Call-Button-widget-to-sidebar-106x60.png 106w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>You can also click on it and select where you want to add the widget.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Click on the <strong>Edit <\/strong>button to adjust the title, description, color, and others.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"523\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/edit-the-WP-Call-Button-widget-to-the-sidebar.png\" alt=\"edit the WP Call Button widget \" class=\"wp-image-33621\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/edit-the-WP-Call-Button-widget-to-the-sidebar.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/edit-the-WP-Call-Button-widget-to-the-sidebar-300x224.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/edit-the-WP-Call-Button-widget-to-the-sidebar-80x60.png 80w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>So, this is how you make a click-to-click button using the <strong>WP Call Button plugin<\/strong>. It is the easiest and most convenient method to add a call button on your WordPress site. It is a free tool and also integrates with Google Analytics.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_2_Adding_a_Click-to-Call_Link_With_HTML\"><\/span>Method 2: Adding a Click-to-Call Link With HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can also add a click-to-call link manually using the HTML snippet. This method uses a simple HTML code snippet to open phone links on mobile phones. On Windows 10, it opens Skype, while on Mac, it opens Facetime.<\/p>\n\n\n\n<p>You can add the call button link with HTML as follows:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>First, open the post or page where you want to add your business phone number with your country code.<\/li><li>Add an HTML block.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"423\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-HTML-block.png\" alt=\"Adding HTML block\" class=\"wp-image-33624\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-HTML-block.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-HTML-block-300x181.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-HTML-block-99x60.png 99w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>Now, add the following code snippet in that HTML block:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!--This link will work on Android and iPhone. It will be visible to desktop users but will result in an error when clicked --&gt;\n&lt;a href=\"tel:+15555551212\"&gt;+1 (555) 555-1212&lt;\/a&gt;  \n&lt;a href=\"tel:15555551212\"&gt;Call Me&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Finally, publish it to see it on your website.<\/li><\/ul>\n\n\n\n<p>You can add an icon or image next to your click-to-call link. Here is how:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to <strong><em>Media &gt; Add New<\/em><\/strong> option on your dashboard.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"434\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-new-media.png\" alt=\"Adding new media\" class=\"wp-image-33539\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-new-media.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-new-media-300x186.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-new-media-97x60.png 97w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Upload your icon.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Now, edit the icon after the upload is complete.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Copy the file URL from the editing screen.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"394\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/copying-media-URL.png\" alt=\"copying media URL\" class=\"wp-image-33542\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/copying-media-URL.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/copying-media-URL-300x169.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/copying-media-URL-107x60.png 107w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>Finally, go to the post\/page where you want to add your call link with an icon. Add an HTML block as before and paste the following code snippet:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"tel:+15555551212\"&gt;&lt;img src=\"paste-url-here\" alt=\"Call us\" \/&gt;&lt;\/a&gt; <\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Don\u2019t forget to replace the URL here with the one you copied earlier. Then publish it.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_3_Adding_Click-to-Call_link_in_WordPress_Header\"><\/span>Method 3: Adding Click-to-Call link in WordPress Header&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can also opt to add your click-to-call link in your site\u2019s header or navigation menu. This way, the call button will be the first thing your visitors will notice. To add the call link using this method, follow these steps:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to the <strong><em>Appearance &gt; Menus<\/em><\/strong> option on your dashboard.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"669\" height=\"392\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/goto-menu.png\" alt=\"Go to menu\" class=\"wp-image-31891\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/goto-menu.png 669w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/goto-menu-300x176.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/goto-menu-102x60.png 102w\" sizes=\"auto, (max-width: 669px) 100vw, 669px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Click on the <strong><em>Custom Link<\/em><\/strong> option from the right-hand side column.<\/li><li>Enter your phone number in the <strong><em>URL <\/em><\/strong>in the \u201cTel:+144444444\u201d format.&nbsp;<\/li><li>In the <strong><em>Link Text<\/em><\/strong> field, enter the label you want to give to your call link.&nbsp;<\/li><li>Click on the \u201c<strong><em>Add to Menu<\/em><\/strong>\u201d button.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"382\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-custom-link-in-menu.png\" alt=\"Adding custom link in menu\" class=\"wp-image-33546\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-custom-link-in-menu.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-custom-link-in-menu-300x164.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/08\/Adding-custom-link-in-menu-110x60.png 110w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Frequently_Asked_Questions\"><\/span>Frequently Asked Questions&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1629349308126\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_to_make_a_click_call_link_in_HTML\"><\/span>How to make a click call link in HTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can make a click call link in HTML by adding the following code in your WordPress HTML block:\u00a0<\/p>\n<p>&lt;!&#8211;This link will work on Android and iPhone. It will be visible to desktop users but will result in an error when clicked &#8211;&gt;<br \/>&lt;a href=&#8221;tel:+<strong>15555551212<\/strong>&#8220;&gt;+1 (555) 555-1212&lt;\/a&gt;\u00a0\u00a0<br \/>&lt;a href=&#8221;tel:<strong>15555551212<\/strong>&#8220;&gt;Call Me&lt;\/a&gt;<\/p>\n<p>Replace the highlighted part with your business contact number.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1629349329985\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_does_click-to-call_work\"><\/span>How does click-to-call work?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Click-to-call is an HTML link that works with the tel: and mailto: protocols. These protocols allow the browsers to request calls and initiate conversations.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1629349343583\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_to_add_a_call-now_button_to_a_website\"><\/span>How to add a call-now button to a website?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can add a call-now button on your website using the <a href=\"https:\/\/wordpress.org\/plugins\/wp-call-button\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>WP Call Button<\/em><\/a> plugin or manually enter your WordPress HTML code snippet. We have explained these methods in detail. Check them out.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>So, these were the three easy methods of making a click-to-call link in WordPress. We recommend using the plugin as it is a faster, safer, and convenient method. Any level user will find it easier and convenient compared to other methods. However, the manual method also works just as fine. But, you need to work a bit more with the codes here and there.&nbsp;<\/p>\n\n\n\n<p>Which method did you find easy? Let us know in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you know that 68% of web visits occurred from mobile phones in 2020? Likewise, in the first quarter of 2021 alone, mobile phones (excluding tablets) accounted for 54.8% of &hellip; <\/p>\n","protected":false},"author":15,"featured_media":33659,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_be_single_description":"","_be_image_uploader":0,"_be_meta_button_label":"","_be_meta_button_url":"","_be_meta_button_newtab":false,"_be_meta_rel_attribute":"","footnotes":""},"categories":[5,3],"tags":[],"class_list":["post-33427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-beginners","category-tutorials","latest_post"],"_links":{"self":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts\/33427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/comments?post=33427"}],"version-history":[{"count":0,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts\/33427\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/media\/33659"}],"wp:attachment":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/media?parent=33427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/categories?post=33427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/tags?post=33427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}