How to add a clickable phone number - QAB

If you would like to add a phone number in your Quick Announcement Bar that customers can click to have their phone app open and dial, you can follow this process.

Copy this code and then paste it into your message where you want your number to appear:

<a href="tel:123-555-7890" style="color: white; text-decoration: none;">123-555-7890</a> 

This is an <a> tag. This tag is what tells the browser that the link is a phone number. You'll need to replace the numbers in that line with number you want to be called.

You'll notice the number in that line twice. The first is the number that is dialed by the phone app. The second is the number that is shown in the message.

So for instance, you could write:

<a href="tel:123-555-7890" style="color: white; text-decoration: none;">Call us</a> 

And the message would only be "Call us", but clicking it would open the app and called the number in the tag.

You'll also notice that I added some style code to that line:

style="color: white; text-decoration: none;"

Without that, the link would be blue and underlined, which is an old default for links. You can set the color to the same color as the rest of your text.

Simply copy the hex color code for your text color. For example, if my message has this blue color for the text, I'll copy the color code:

And set that as the color for my phone number link:

style="color: #0b65a3; text-decoration: none;"

Here's an example of the entire process: