Skip to content

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

How to add click to call HTM to your website

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

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

Plus, it’s 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 a few different ways to add an HTML click-to-call button to your website. Plus, we’ll talk about how to use your phone number for local SEO and some other applications for click-to-call

How to add a clickable phone number with HTML

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

Here are the basic steps you’ll need to follow: 

  1. Open your HTML editor. Its name and location will change depending on the website builder you’re using. 

For instance, in the Gutenberg Block Editor on WordPress, you’ll click the “+” button and type in “HTML” inside the pop-up Block Inserter menu. 

adding an HTML block in WordPress

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

On Wix, you’ll click “Settings” in your dashboard and then choose “Custom Code.” 

Adding click-to-call HTML code in Wix

If you’re having trouble finding the HTML editor to add click-to-call HTML, try searching for “edit HTML” or “custom code” in your website builder’s support center. 

  1. Type the HTML link tag wherever you’d like your click-to-call link to go. 

<a href=” “></a>

This is the same standard HTML link tag you’d use to link to another website. 

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

<a href=”tel:5551234567“></a>

Don’t include any 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.)

<a href=”tel:5551234567″>Call us now!</a>
Copy to Clipboard

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 on your site and visit the updated page on your smartphone. Click the link to see if it dials the number you expect. 

Looking to provide an option to text your business from your site? Be sure to also check out our guide to SMS links. 💬

How to embed a clickable button with WordPress

You can add click-to-call functionality with a button as well as a text-based link. 

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

  1. Navigate to the Gutenberg Block Editor. 
  2. Add a Buttons block from the Block Inserter menu. 
  3. Type your button text. This is your CTA. 
  4. Click the hyperlink icon in the Buttons toolbar. 
  5. Type “tel:” followed by your business phone number. Don’t include any dashes or spaces. 
Embedding a click-to-call HTML button in WordPress
  1. Preview, publish, and/or test your click-to-call button on your WordPress site. 

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

Changing the click to call button's color

Change the button color, font style, or anything you like to align with your brand and style. 

To make sure your customers can easily reach you, consider adding a click-to-call button in your site’s header or footer. By adding one link, you’ll gain click-to-call abilities on every page of your website. 

Including a click-to-call button in the site’s header or footer is much like the other click-to-call links we’ve done. Here’s a quick step-by-step guide to getting it done: 

  1. Navigate to your header or footer menu in your website builder. You’ll often find this listed separately from editing the body content within pages of your website. 
  2. Add a new link. 
  3. Type “tel:” and then 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, such as one for the sales team and one for customer support, you can add both of those as click-to-call links in your header or footer. 

Adding a click to call html link to the top navigation of a website

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

Adding your phone number for local SEO

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

Clickable call link from a Google my Business listing

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 any popular business profile sites. 

To add or update your business phone number on 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 your Home tab. 
  3. Scroll down to the phone number and click the edit icon. 
  4. Type in your business phone number. It will automatically add the country code and dashes. 
  5. Click “Apply.”

To add or update your business phone number on Facebook, follow these steps: 

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

If you have business profiles on other platforms like Instagram, you’ll find the steps are largely the same. Usually, you just need to edit your profile and look for the phone number field. Just don’t forget to click save!

Click-to-call your customers in OpenPhone

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

Windows and Mac users can now set the OpenPhone app as their default choice for making outbound phone calls

Here’s how to do it on PC:

1. Download and install the OpenPhone Windows app.

2. Click into the bottom toolbar and search by “default app”.

3. Select “Default app System settings”.

selecting OpenPhone as the default click to call app within the system settings in Windows

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.

Here’s how 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 choose FaceTime
  3. In FaceTime, select Preferences. 
  4. Choose OpenPhone from the “Default for calls” drop-down menu toward the bottom of the window. 
Making OpenPhone your default calling app on a computer so you can click to call customers

The next time you click a phone number link, you’ll be prompted to complete the call in OpenPhone.

For instance, if you’re contacting potential new vendors or calling prospective clients, you can click their phone number on their website or email signature and move the entire conversation to OpenPhone. 

When you manage all your business calls and conversations in OpenPhone, your entire team stays on the same page. You can get input on your latest sales deal or run a new vendor by your accounting team before committing.

Using shared numbers, anyone on your team can jump in and review the full conversation history with any 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 they submit a contact form or leave a message. Give them a fast, easy way to contact your business directly, no matter what they need from you, with an HTML click-to-call link. 

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

Start your OpenPhone trial today.

4.9/5 - (16 votes)