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.

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:

Does your website pass the grunt test?

Related posts

The button hover animations which come with Divi are quite basic. The default animation where the button expands and the icon slides in to the right is also the quickest way to tell a sites been built with Divi. (Not that there's anything wrong with that, I just like...

It's really simple to centre text horizontally in Divi just using the builder settings. However there's no setting to vertically align the text within the column. This can cause layouts to look messy, especially if you try to centre things using padding or margin....

As Web Designers, we known that the mobile menu icon (or burger menu) is how you open the menu on mobile. However this isn't as obvious for everyone, especially for people who didn't grow up with the internet! This can be an issue if people viewing the website on...