Introduction

HTML5 includes a protocol for making an element clickable and opening the phone app and adding the number to call. This makes it very easy to add a Click-to-Call button in your Decision Tree.

Take note, make sure to include target=”_blank” as this is the only way that this would work for IOS users.

The basic code

Simply copy the code below and add it to the body of your Decision Tree. Make sure to update the phone number and feel free to change the text as well.

<a href="tel:123-456-7890" target="_blank">CLICK TO CALL</a>

Add an extension

If your phone number has an extension, simply add “p” and the extension number after the phone number as shown below

<a href="tel:123-456-7890p123" target="_blank">CLICK TO CALL</a>

Add country code

Country codes can be added by adding “+” together with the country code before the phone number as shown below.

<a href="tel:+1123-456-7890" target="_blank">123-456-7890</a>

Add CSS styling

You can also add CSS styling to your code to make it look like a button. Add an “id” and target the id for styling. You can check the sample below.

<style type="text/css">
#click_to_call {
  background-color: #2ea44f;
  border: 1px solid rgba(27, 31, 35, .15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 6px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

#click_to_call:hover {
  background-color: #2c974b;
}
</style>
<p style="text-align: center;"><a href="tel:123-456-7890" id="click_to_call">CLICK TO CALL</a></p>