How to Create A Mobile Click-2-Call button Across Bottom of Screen

with No Comments
[Total: 0    Average: 0/5]

 

You need to install a few plugins:
wp mobile detect by Jesse Friedman
wp twitter bootstrap (be sure to activate and pick latest version of bootstrap)

In the video I mention adding Bootstrap Shortcodes.  THIS IS NOT NEEDED. I use them elsewhere.

Here is the code that is needed for your button to work.

CSS:

.floatingfooter {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}

.btn-block {
font-size: 28px;
border-radius: 0 !important;
}

 

HTML: (version 1)

[phone] <div class=”floatingfooter”>
<a href=”tel://+17755441112″
class=”btn btn-primary btn-lg btn-block btn-success”><span class=”glyphicon glyphicon-earphone” aria-hidden=”true”></span></a>
</div>
[/phone]

 

HTML: (version 2)

Put the code in a wrapper like this:

[phone] <div class=”floatingfooter”>
<a href=”tel://++17755441112″
class=”btn btn-primary btn-lg btn-block btn-success”>CLICK-2-CALL <span class=”glyphicon glyphicon-earphone” aria-hidden=”true”></span></a>
</div>
[/phone]

 

HTML: (version 3)

OR Put it in the Main Settings code box at bottom of page.

[phone]<div class=”floatingfooter”><a href=”tel://+1+17755441112″class=”btn btn-primary btn-lg btn-block btn-success”>CLICK-2-CALL<span class=”glyphicon glyphicon-earphone”></span></a></div>[/phone]

Leave a Reply