Having a website nowadays is all about accessibility and ease of use. You want your website visitors to feel at home and smoothly navigate your site.

Adding a tap-to-call button allows all visitors accessing your website using their smartphones to contact you quickly, and in turn – this helps improve their experience on your site. 

If you’re a small business owner, your customers probably reach out for different reasons – presale information, support, quotes, etc. While it’s useful to have a contact form on your website – sometimes (depending on the type of business you have), it’s more convenient for your visitors to contact you directly and immediately. 

Since most internet traffic comes from mobile phones (50.88% mobile vs. 46.39% desktop in 2022), it’s more convenient for your visitors to tap-to-call and receive information they need right away. 

With that in mind, let’s learn how to add a click-to-call button to your WordPress website!

We’ll cover 2 different methods and cover the steps in each one.

Plugin method

The first method is through using a plugin called WP Call Button. It’s free and the most straightforward method to create a click-to-call button on your WordPress website. 

The WP Call Button lets you create a click-to-call button in the WordPress Classic editor, Gutenberg, WordPress sidebar widget or a sticky floating button with a few clicks.

Install the WP Call Button plugin

Log in to your WordPress dashboard, head to Plugins > Add New, fill in WP Call Button in the top-right search bar, and click Install Now:

Once installed, click Activate to activate the plugin:

Next, head to Settings > WP Call Button to configure the plugin.

The plugin is easy to configure and you can choose between the Sticky Call Button or a Statics Call Button. 

The Sticky Call button scrolls with the user as they browse your website. We recommend using this option to help with conversions since your customers can reach you faster, so you’ll get more calls and maybe even close deals faster.

Sticky call button

Start with filling in your phone number using the smart phone field (simply select your country, and it will add the country code in the correct format).

Next, adjust the call button text, and select the position where you want it to appear on your website. Finally, customize the button color using the plugin’s color picker, and choose if you want the button to show everywhere or have it only on specific pages/posts (or remove it from individual pages/posts). 

If you want to show the button only on smartphones, select the Show Call Button Only on Mobile devices? option. 

When ready, toggle the Call Now Button Status option to active and click Save Changes to save the changes.

You’ll then be able to see how the call button looks on your website:

Static call button

If you use the Classic editor in WordPress, head to Settings > WP Call Button and click the Static Call Button tab. Customize the button text and color, and choose if you want to hide the phone icon in the call button. Once ready, click Copy to copy the automatically generated shortcode:

Now, paste the copied shortcode inside a post or page of your website where you want to add the call button.

Additionally, you can add the button to your website sidebar using the sidebar widget.

Head to Appearance > Widgets, and drag the WP Call Button widget to the desired widget area:

Fill in the title and description, click Show Advanced Settings to configure the button text, colors, and if you want to display the phone icon in the button.

If you use the new Gutenberg editor, edit an existing one or add a new page.

Click + to add a new block, then click WP Call Button:

The block comes with many customization options that you can find on the right side of the page:

You can customize the font size, background, and text colors and hide the phone icon or center align the call button.

The WP Call Button plugin is straightforward to use and it has extensive options that allow you to customize your call button.

The best part is that it’s 100% free and has perfect integration with Google Analytics.

Code method

Another method is to add a call button to your website manually is by using a bit of code. 

Here’s an example:

<a href="tel:+19142130283">+1 (914) 213-0283</a> 

<a href="tel:19142130283">Call Us Anytime!</a>

On phones – these lines of code will open a phone app, while on Macs, they will open the link in FaceTime. On Windows, users will have an option to open it in Skype.

You can also use HTML to add the image/icon to the text. Let’s see how!

Head to Media > Add New and upload the image/icon you want to use.

Once completed, click Edit:

Next, on the Edit Media screen, click Copy URL to clipboard button to copy the image URL (we’ll need it on the next step):

Lastly, edit the existing post/page or a custom HTML widget and add the following code:

<a href="tel:+19142130283"><img src="https://examplesite.com/wp-content/uploads/2021/02/phone-icon-768x768-1.png" alt="Call Us Anytime!" /></a> 

(Adjust the phone number and paste the link you copied previously)

Once completed, you’ll be able to see the icon with the phone number in the post:

Call button in your navigation menu

If you want to add the click-to-call button to the WordPress navigation menu, head to Appearance > Menus and click the Custom Links tab on the left.

Add the phone number in the URL field in this format: 

tel:+1234567899

And the custom text in the Link Text field:

Click Add to Menu to finish the setup.

Once completed, visit your website to see the click to call button in action:

That’s it!