How to add a tap to text bar on your Divi website

May 8, 2019

Making it easy for your website visitors to get in touch with you is a crucial part to having a website which turns those visitors into actual customers.

Most websites will have a contact page with all the details of how to get in touch. But what about the people who don’t think to navigate to this page? And even if they do, emailing a business can feel a bit impersonal at times, and not everyone is ready to get on a phone call straight away, especially if they just want to ask a quick question.

A great way around this is to add a tap to text bar at the bottom of your pages on mobile, which when a person clicks it, it opens up their SMS app with your number there ready to go.

It really lowers the barrier to contacting you, and make the interaction feel a lot friendlier, as texting is something people generally do with their friends and family.

In this tutorial I’ll show you how to add a text to SMS button to the your Divi website.

Checkout the demo here → – it only shows on mobile so if you’re on desktop drag your screen thinner until it appears.

Here’s how…

Step 1: Add the CSS
In your dashboard, navigate to your “Theme Options”, then scroll down to the “Custom CSS” box. Paste the following CSS into this box:
/*===== TAP-TO-TEXT BAR =====*/
.tap-to-text {
position: fixed;
bottom: 0;
width: 100%;
padding: 20px;
background: #F56640; /* Change this to your branding colour */
color: white;
text-align: center;
z-index: 99999;
}

/* Add space to bottom of site so bar doesn't cover footer */
@media (max-width: 980px) {
#et-main-area {
margin-bottom: 60px; /* Might need to adjust site if you change font size or padding */
}
}

/* Hide on desktop */
@media (min-width: 980px) {
.tap-to-text {
display: none;
}
}

Step 2: Customise the CSS
Change the “background-color” value to be inline with your branding. If you’re unsure which exact color hex you use, a good trick is to use the ColorPick Eye Dropper chrome extension, which allows you to click any part of a webpage and it’ll then tell you the color hex of that pixel.

Step 3: Add the HTML
In your “Theme Options”, navigate to “Integrations” in the top purple bar. Scroll down to the “Add code to the < body >” box, and paste the following HTML, replacing “00000000000” with your phone number:

<a href="sms: 00000000000" class="tap-to-text">Got a question? <u>Text us!</u></a>

Step 4: Save!
Click the green “Save changes” button at the bottom and you’re done!

BONUS: Tap to call
What if you’d prefer to have people call you when they press the button?

All you need to do is swap out the “sms:” in the link above with “tel:”, so it looks something like this:

<a href="tel: 00000000000" class="tap-to-text">Get a question? <u>Call us!</u></a>

And that’s it!

Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: hello@andyhooke.co.uk

You can also checkout more Divi tutorials below.

Get FREE Divi tutorials and layouts each month!