Tap to Call Buttons be gone: Here’s an alternative that converts much better!

By October 20, 2016 Web Design, WordPress

TL;DW version (too long, didn’t watch):

  • There are too many tap to call buttons breaking mobile designs.
  • Configure a tap to call sticky bar that stays on top at all times.
  • It keeps the content in focus, keeps the design clean.
  • No need to manually add tap to call buttons anymore.
  • Better conversion rate!
  • You can do it for free with the guide below.

How to add a sticky tap to call bar in WordPress

First, install the plugin WordPress Notification Bar, then head over to the settings under Settings > Notification Bar. The screenshot below are my current settings.

ttc1

Hit the Enabled checkbox, fill in the label (which is what will appear on the button itself), add in your phone number in the following format, tel:number, check the sticky position, then choose the bar background colour.

By default the bar itself is quite ugly (you’ll see it at the top in the settings) + actually shows on desktop as well (which we don’t want), so let’s clean it up & hide it on desktops by adding some custom css. You can add the css in a separate stylesheet if you’re using a style sheet, though most themes these days have a custom css section in the theme options.


#wnb-bar {
color: #ffffff !important;
text-shadow: none;
border-bottom: 3px solid #f85d36 !important;
background-image: none !important;
box-shadow: none;
}


.wnb-bar-button {
padding: 4px 6px;
border-radius: 1px;
font-size: 11px;
font-weight: 500;
text-shadow: none;
background-color: #f85d36 !important;
border: 1px solid #fff;
}


@media screen and (min-width: 737px) {
#wnb-bar {
display:none !important;
}
body {
padding-top: 0px !important;
}
}

The above code styles quite a few aspects of the bar and the button itself. The first thing I suggest is to replace the border-bottom and background-color colours with the primary one you chose in the plugin settings. Then just play around with it until you’re happy.

This is how mine looks with the custom css applied.

mobbar

And that’s it, now you can remove any stray tap-to-call buttons left on the site (aside from your main call to action bars/buttons leading to the contact page).

Tom De Spiegelaere

About Tom De Spiegelaere

I love everything visual, from photography to graphic design and special effects. I'm the founder of MangoMatter and specialise in creating sites that not only convert, but also easily outrank the competition in Google, giving my clients a website that markets itself!

Send this to friend