How to add a click-to-call button to your website using HTML

Want to impress your customers and customers with an easy and quick way to get in touch with you? A click-to-call HTML button is an easy way to connect your customers directly to you.

By adding your business phone number to your website code, visitors can make a call to your business simply by tapping a button or link. All smartphone users and even desktop users (with FaceTime or Windows Phone app installed) can place an order or ask a question right away.

Reading: How to create a call now button on website

It’s also your chance to have real conversations with your customers so you can solve their problems in real-time and collect feedback.

In this article, we’ll cover different ways to add an HTML click-to-call button to your website. Also, we will talk about how to use your phone number for local SEO and some other click to call applications.

How to add a clickable phone number using HTML

You don’t need much HTML knowledge to add click-to-call functionality to your website.

Here are the basic steps you need to follow:

1. Open your HTML editor. Its name and location will change depending on Website builder you use.

For example, in the Gutenberg block editor on WordPress, click the “+” button and type “HTML” in the “Block Inserter” pop-up menu.

Then select “Custom HTML” to create an HTML block.

For Wix, click on “Settings” in your dashboard and then select “Custom Code”.

If you can’t find the HTML editor to add click-to-call HTML, search your website builder’s support center for “edit HTML” or “custom code”.

1. Enter the HTML link tag where you want to place your click-to-call link.

This is the same standard HTML link tag you would use to link to a different to link site.

1. Type “tel:” followed by your business phone number between the quotation marks, like so (this step is highlighted in yellow):

Do not include spaces or dashes in this part of your HTML code.

1. Write your call to action (CTA) between the start tag and the end tag. (This step is highlighted in yellow.)

Call us now!Copy to clipboard

See also: How to Make a Wood Log Planter for Succulents

This will serve as the display text for your click-to-call link, so make sure your CTA tells visitors exactly what to expect when they click the link.

1. Publish and test your click-to-call link. Push the changes live to your website and visit the updated page on your smartphone. Click the link to see if it dials the number you expect.

Would you like to offer an option to send text messages to your business from your website? Also check out our guide to SMS links. 💬

Embedding a clickable button in WordPress

You can add a click-to-call functionality with both a button and a text-based link.

To add a click-to-call HTML button in WordPress, follow these steps:

1. Navigate to the Gutenberg block editor.
2. Add a Buttons block from the Block Inserter menu.
3. Enter your button text. This is your CTA.
4. Click the hyperlink icon on the button toolbar.
5. Enter “tel:” followed by your business phone number. Do not include hyphens or spaces.

1. Preview, publish and/or test your click to call button on your WordPress site.

If you want, you can customize the look of your click-to-call button using the sidebar settings or by adding custom CSS.

Change the button color, font style or anything you want to fit your brand and style.

Add click-to-call HTML to your website header or footer

To make sure your customers can reach you easily, consider using a click-to-call Add a call button to your website header or footer. Adding a link gives you click-to-call capabilities on every page of your website.

Inserting a click-to-call button in the website header or footer is similar to the other click-to-call links we’ve created. Here’s a quick step-by-step guide to getting it done:

1. In your website builder, navigate to your header or footer menu. You’ll often find this separate from editing the main content on pages on your site.
2. Add new link.
3. Enter “tel:” followed by your business phone number (no spaces or dashes).
4. Edit the anchor text to a CTA that makes sense in your header or footer menu.
5. Publish and test your link.

If you have separate phone numbers for different needs, e.g. For example, one for the sales team and one for customer support, you can add both as click-to-call links in your header or footer.

Just make sure the link anchor text clearly states who visitors can reach when they click to call.

Adding your phone number for local SEO

If you are a local business, many of your potential customers may not even make it to your website thanks to local business listings on Google social media sites.

Business profiles on Google or Facebook can be incredible sources of new customers. To get the most out of these business listings, make sure your phone number is up to date on all major business profile websites.

To add or update your work phone number to your Google Business profile, follow these steps:

1. Sign in to your Google Business profile account.
2. Click Edit in the top right corner of the Home tab.
3. Scroll down to the phone number and click the edit icon.
4. Enter your business phone number. The country code and dashes are added automatically.
5. Click Apply.

Follow these steps to add or update your work phone number on Facebook:

1. Log in to your business Facebook page.
2. Navigate to your “About” tab.
3. Click the pencil icon next to the current or placeholder phone number line.
4. Enter your current business phone number.
5. Exit the menu to save.

If you use business profiles on other platforms such as Instagram have, you can I will find that the steps are largely the same. Usually all you have to do is edit your profile and look for the phone number field. Just don’t forget to click save!

Click to call with your customers in OpenPhone

See also: How to Create a Paywall in WordPress (with Preview Options)

Now that we’ve made your customers’ lives easier, how about, if we could make your life a little easier?

Windows and Mac users can now set the OpenPhone app as the default selection for outgoing phone calls.

Here’s how it works on PC:

1. Download and install the OpenPhone Windows app.

2. Click the bottom toolbar and look for “Default App”.

3. Select “Default app system settings”.

4. Scroll down and click “Choose default apps by protocol”.

5. Then scroll down to “TEL” and select OpenPhone to make it the default calling app in Windows.

To make OpenPhone the default calling app on your Mac:

1. Download and install the OpenPhone Mac app.
2. Go to the Applications menu and select FaceTime.
3. In FaceTime, select Preferences.
4. Select OpenPhone from the Default for calls dropdown menu at the bottom of the window.

The next time you click a phone number link, you will be prompted to make the call in OpenPhone.

For example, when contacting potential salespeople or calling potential customers, you can click on their phone number on their website or email signature and move the entire conversation to OpenPhone.

If you manage all your business calls and conversations in OpenPhone, your entire team stays on the same page. You can get input from your accounting team on your latest sale or manage a new supplier before committing.

With shared numbers, anyone on your team can jump in and review the full conversation history with all contacts.

Click-to-call brings you closer to your customers

Don’t make your customers wait hours or even days to hear from you after filling out a contact form or leaving a message have . Give them a quick and easy way to contact your business directly, no matter what they need from you, with a click-to-call HTML link.

If you use OpenPhone for your business phone number and service, you can contact customers even more easily. OpenPhone is packed with features that make it easy for you to collaborate with your team to offer customers the best possible experience.

Start your OpenPhone trial version today.

See also: 4 Easy Steps to Create & Add a Watermark in Lightroom

.