Can I add a 'tap to call' phone number or 'tap to email' on my website?

A phone number can be added to your website and it will automatically turn to a 'tap to call' button when viewing the website on a mobile phone. The best way to do this would be to use the contact bar feature. 

If you are on one of our original templates, setting up the contact bar will automatically enable the tap to call feature on a mobile phone. 

If you are on our dynamic header template, please keep following the guide to enable tap to call on a mobile phone. 

We have a guide detailing how to set up your contact bar, which can be found here.  

This guide contains:

Tap to call

• How to add a mobile phone icon - "Tap to Call"
• Add a 'Tap to Call' Button in the Body Text

Tap to Email

• Add a 'Tap to Email' Button in the Body Text 
• Add a 'Tap to Email' in a text block

Walk-through tutorial - Click "Next"

(To make this tour bigger, click the arrows on the right or zoom in)

When a mobile number is entered it will display as a phone button on the mobile website, when touched it will give the option for the client to call the number. See the images below to see what the outcome will look like.

How to add a mobile phone icon - "Tap to Call"

1. Log in to your Rocketspark dashboard
2. Go to "Change design" in the editor
   
3. Go to "Header and Menu"
   
4. Toggle to mobile view - click the mobile icon
   
    
5. Enable Tap to Call
   
6. Add phone number
    
7. Save changes (click "close" and then "Save changes")
   

Below are additional tap-to-call options:

Add a 'Tap to Call' Button in the Body Text 

You can also add a ‘tap to call’ button to the body of your website. The best way to do this is by adding a button block (here is a guide detailing How to add buttons to your website if you are unsure). 

Once you have created the button, select to link this button to a website and enter: 
“tel:your phone number” in the website URL field. See the image below. 

When you click the button on your mobile, you can tap to call directly.

Add a 'Tap to Email' Button in the Body Text

You can also add a 'Tap to Email" action button in the body of your website. The best way to do this is by adding a button block, (here is a guide detailing How to add buttons to your website if you are unsure).

Once you have created the button, select to link this button to a website and enter: 
“mailto:email@domain.com” in the website URL field.

When you click the button on mobile, you can tap to email directly. 

Add a 'Tap to Call' in a text block

You can also link text to make it tap to call. This is useful if you have your number in your footer for people to click. 

1. Head to the stack that has the contact number in
2. Click on the edit pencil for the block
   
3. Select the phone number
   
4. Click on the link symbol
5. Change this to 'Website'
6. Add in 'tel:' and then your phone number. It should look like the below:
   
    
7. Make sure to click save for the pop up and then save the block.
8. Then your phone number will become clickable
   

Add a 'Tap to Email' in a text block

You can also link text to make it tap to call. This is useful if you have your number in your footer for people to click. 

1. Head to the stack that has the contact email address in
2. Click on the edit pencil for the block
   
3. Select the email address
   
4. Click on the link symbol
5. Change this to 'Website'
6. Add in 'mailto:' and then your email address. It should look like the below:
   
    
7. Make sure to click save for the pop up and then save the block.
8. Then your email address will become clickable
   

Extra for Experts

If you want to specify a default email subject line, you can do this by adding ?subject=My Email Subject to the end of the URL, so the whole thing might look like this:

mailto:email@domain.com?subject=Product Enquiry

If the subject doesn't work, try replacing spaces with %20:

mailto:email@domain.com?subject=Product%20Enquiry

If you want the email button to send to multiple emails, you can separate the emails using a comma (,) like

mailto:first@example.com,second@example.com

FAQs

How should I format my tel link?

As long as you keep the phone number free of any spaces, this link should work. To make sure this works for international website viewers, make sure to include the country code in the link! So instead of tel:0800762538 it would be tel:+64800762538.

How can I update the "Tap to Call" or "Tap to Email" after it is already created?

In text: To update a tap to call/email link in text, click the edit text block icon, click on to the link, then click the "edit" option that comes up on the menu below it. Then, you can update either the link text or the email/phone number linked to it. 

Add a 'Tap to Call' in a text block

Buttons: You can update the phone number/email in a tap to call/email button by editing button, then clicking the edit link option. Ensure that you update the text link (the text showing on the button) to be the correct number/email, and make sure the link formatting is correct e.g. the mailto: and tel:

Add a 'Tap to Call' Button in the Body Text