How to Add Click-to-Call to Your Carrot Website

Ever wanted to make it super simple for visitors to call you directly from your website? That’s exactly what “Click-to-Call” does!

Imagine someone is viewing your site on their phone. Instead of having to remember or write down your phone number, they can just tap a button or link, and their phone will automatically start dialing your number. It’s quick, easy, and helps you connect with potential leads faster.

Here’s how it works:

On a Smartphone or Tablet: When someone taps a “Click-to-Call” link, their phone’s calling app will pop up with your number already filled in. All they have to do is hit “Call.”
On a Computer: If someone clicks from their computer, their web browser might ask them to choose a calling app (like FaceTime or a browser-based calling service) if they have one installed.

In this guide, we’ll show you step-by-step how to add this helpful “Click-to-Call” feature to your Carrot site, with 3 options:

Add Click-to-Call in the Header
Add a Click-to-Call Button
Add Click-to-Call as Linked Text

Let’s get started!

Understanding the Click-to-Call Code

The Click-to-Call function is pretty easy to set up! It’s a simple HTML link tag, with the tel: command instead of an actual URL. Let’s break down the code in the below image:

It starts like any HTML with an opening tag, followed by the link (which in this case is the tel: command with your phone number), then the link text and a closing tag.

You can even set the color of the link using a style rule, which will set the link color to the color code you set. Here’s an example:

Below is a full example you can copy and add to your site, just be sure to change the example number with your phone number!

<a href="tel:+15555555555">+1 (555) 555-5555</a>

Next, let’s dive into how you can add this to your site.

Add Click-to-Call in the Header

The first and most common place Click-to-Call is added is in the header where your phone number is.

Click-to-Call is automatically implemented here on new header variations such as: Left Aligned, Right Aligned, Centered Logo and Inline Menu. You can change your header layout in your site’s Design settings.

You should only need to follow the steps below to add Click-to-Call to your Phone field if you are using the Default header variation:

Screenshot showing the header layout settings in the design tab for a Carrot site.

If you prefer to use the Default header variation, you can implement Click-to-Call here by adding the HTML code to your “Phone” field in your site’s General Settings:

Once you add your Click-to-Call code here, be sure to click the Save button at the bottom of the Settings section!

Add a Click-to-Call Button to Your Site

Another way you can add Click-to-Call to your site in other areas, is by using a button. To do this, first start by adding a button block:

Once your button block is added, add the text you want to it and style it, then insert a link:

In the link field, add: tel:+yournumber then insert the link:

And that’s it! You now have a Click-to-Call button on your site.

Add Click-to-Call as Linked Text

The last method of adding Click-to-Call to your site, is by embedding it as a link on plain text. This method is very similar to the button method, except instead of using a button block, you will highlight the text of your phone number on a page, then embed the tel: command as a link:

In the example above, we used Click-to-Call on the phone shortcode, which does work! If you do this however, make sure you are using the appropriate phone number if you are overriding the phone number on that page!

Conclusion

That’s all there is to it! All three of these methods can be used to implement Click-to-Call throughout your site, which will make it much easier for leads and visitors to call you, especially if they are viewing your site on a mobile device.

To learn more about making edits to your site content, check out the links below!