HTML Mobile Call Button

Drive more phone calls from your website.

Mobile Call Button Features

Simple and Secure

Built with pure HTML and CSS, this click-to-call button is compatible with every platform that allows modifying files via FTP or an administrative backend, including WordPress, Bigcommerce, Shopify, Bootstrap, Joomla and hand-built HTML. Unlike PHP-based WordPress plugins that need updating, there is no security risk in using pure HTML and CSS on your site.

Finally Measure Mobile ROI

The click-to-call button comes with Google Analytics tracking code built in, meaning you can see how many times the button is clicked from mobile devices. This gives you a better idea of which marketing channels drive phone calls to your business.

Simple, Functional Design

It’s a transparent orange button with white lettering and an icon. The design can be customized by us or by your in-house developer.

HTML Call Button Installation Instructions

What You’ll Need to Install the Mobile Call Button

In order to install the HTML mobile call button on your website, you’ll need to have the ability to edit CSS and HTML files for your website, including the main CSS file (often called stylesheet.css or custom.css). This often is done through FTP access. If you’re on a content management platform, you can generally access your custom CSS file through the platform while logged in as an administrator. Please see documentation for your platform to find out how to edit stylesheets and files for it.

Step One: Add CSS to the Website

We’re going to copy and paste the code from the call-button.css file into your website’s stylesheet.

  1. Open the file ending in .css
  2. Select everything in the file and copy it
  3. Open the main or custom stylesheet for your website
  4. Paste the CSS into your stylesheet at the bottom
  5. Save the stylesheet

Step Two: Add the Font Awesome Stylesheet Code

We’re going to add a line of code to your website’s <head> area in order to show a phone icon on the call button.

  1. Open the file ending in .html
  2. Copy everything from <!–BEGINNING OF CODE FOR STEP 2–> to <!– END OF CODE FOR STEP 2 –>
  3. Paste that into the HTML of your site just before </head> on every page you want the button to show up on.

Step Three: Add the Call Button HTML to Your Website’s Footer

This is the final step; it places the mobile call button HTML into the footer of your website.


Important!
You need to edit the HTML to add your phone number. This way, your phone will ring when the button is clicked.

  1. Open the .html file
  2. Copy everything from <!– BEGINNING OF CODE FOR STEP 3 –> to <!– END OF CODE FOR STEP 3 –>
  3. Paste that code just before the </body> of your website.
  4. Replace 15555555555 with your phone number. You cannot use dashes, plus signs or parentheses. For example, 1-800-588-2300 becomes 18005882300.

Confused? Too Technical?

Get in touch with us about having a developer customize and install the button on your website. Contact us at hello@gaintap.com.

Download HTML & CSS Files

The mobile call button files are available to download for free. A download link is sent via email, so please enter an email address that you can receive email at. We won’t spam you, but may follow up with updates to the files (rarely).

Important: The download link is sent to your email!

You will be returned to the main mobile call button page after entering your email. Please check your email for the download link.

Download Files (free)

Not a Web Developer?

We’ll help you install the mobile call button on your site. Shoot us an email at hello@gaintap.com or call 773-242-9231.