How to Add a Click to Call Now Button to Your Website

Adding a Green Click to Call Button to Your Website

Adding a click to make a phone call button that hovers on the mobile version of your website is essential if you are a service based business that is looking to convert your leads offline.

It is good UI (User Interface Design) to make it as easy as possible for your potential customers to reach you.

Take out the unnecessary buyers resistance by adding a call button to your website.

WordPress Website Click to Call Button

For WordPress, we recommend and use:

Call Now Button

from the makers website:

The plugin is basic, but has some essential features:

  • Conversion and goal tracking
  • Google Analytics Settings so you can attribute phone calls to a real world dollar value
  • Changing the button style
  • changing button hover location

Joomla Website Click to Call Button

For Joomla based websites, for website click to call button we use code that we place in the After <body> section of the template:

<style>#callnowbutton {display:none;} @media screen and (max-width:650px){#callnowbutton {display:block; height:80px; position:fixed; right:0; border-bottom-left-radius:40px; border-top-left-radius:40px; width:100px; bottom:-20px; border-top:2px solid rgba(51,187,51,1); background:url(https://www.YOURWEBSITE.COM/images/callbutton01.png) center 10px no-repeat #009900; text-decoration:none; box-shadow:0 0 5px #888; -webkit-box-shadow:0 0 5px #888; -moz-box-shadow:0 0 5px #888; z-index:9999;}}</style><a href="tel:YOUR_PHONE_NUMBER" onclick="_gaq.push(['_trackEvent', 'Contact', 'Call Now Button', 'Phone']);"  id="callnowbutton">&nbsp;</a>

OBVIOUSLY we change


Now save the following image and link it to the address above (It’s the telephone icon that will make the button – save it to your website and use the URL for the step above)

And we also change:


To the phone number of the businesses website we are working on.

Too easy!

Call Now Button