How to Add a Click-to-Call Button With HTML [step by step guide with example]



Let’s face it.
Click-to-call buttons are a must have for every business owner.
Customers want to call you, so it’s crucial for your business to make it easy for them to do so.
To achieve this, one of the simplest and most effective solutions is to include a click-to-call button on your website.

Click-to-call buttons operate exactly as their name implies. They offer your website visitors a clickable link to access your phone number. When a potential or existing customer clicks on the link, it instantly dials the number. Click-to-call is compatible with both desktop and mobile users.

In an age where many customers expect to fill out a form and wait for a callback, click-to-call buttons provide immediate access. As a result, it’s now quicker and more convenient for individuals to contact your company.

In this guide we will show you how to add a click-to-call button on your website, with no coding skills needed!

How to Add a Click-to-Call Button on your website

Adding a click-to-call button on your website is not hard and you don’t need to be a developer or even be tech savvy to do it!
Here are the steps:

Step 1: Access your HTML editor


Open the WordPress editor and click on the “+” button. Type HTML and click on the Custom HTML option.

How to add custom HTML in WordPress

Type the next steps in the HTML container.


  1. Go to Blog in your site’s dashboard.
  2. Click Edit on the relevant blog post, or Create New Post to write a new one.
  3. Click Add How to Add a Click-to-Call Button With HTML [step by step guide with example] 486a1db5 f7b6 455b b3ab 675f272f4b0b on the left side.
  4. Click HTML code.
How to add custom HTML in WIX

Type the next steps in the HTML container.


  1. In Shopify, create a custom content block.
  2. Inside the block editor, click the Add content+ button, search for Custom HTML, and then click to insert a Custom HTML block.


To add a code block:

  1. Edit a page or post, click Add Block or an insert point, then click Code. For help, visit Adding content with blocks.
  2. Open the block editor by clicking the pencil icon on the block.
  3. Add your code in the text field.
  4. If you’re using the code block to display code snippets, switch the Display Source toggle on.

Step 2: Enter the standard link tag

Simply paste this code into the page:

<a href=""></a> 

Step 3: Enter your company’s phone number.

Make sure that you enter your phone number minus the dashes and country code. Here is how you should enter the number:

<a href="6177787312"></a> 

Step 4: Add tel:

<a href="tel:6177787312"></a> 

Step 5: Add a call to action message

<a href="tel:6177787312">Call us at (617)-778-7312</a> 
It should show like this:

That’s it! Your click-to-call link is now ready and customers can click on it to call you!

Click-to-call Buttons can easily mess up your tracking. Why? Because not all clicks end up to quality phone calls. See how to accurately track calls from your website:


Adding a click-to-call link to your website can bring significant benefits to your business.

Firstly, it makes it easier for potential or existing customers to reach out to you, resulting in increased customer satisfaction and sales.

Secondly, it streamlines the communication process, reducing the time it takes to get in touch with your business.

Thirdly, click-to-call links work on both desktop and mobile devices, making it accessible to a wider audience.

Finally, adding click-to-call links using HTML is straightforward and can be done quickly, making it a cost-effective solution for businesses of any size. Pair this with call tracking – and you will also know exactly where each call came from!

Overall, incorporating click-to-call links on your website using HTML can be a valuable tool in improving customer communication and enhancing your business’s success.

Are you ready to let your customers easily reach you via phone?!