How to Create a Sticky Call Now Button in WordPress

If you want to create a sticky call now Button in WordPress then continue reading.

A call now button can increase your conversions or show your users an easy & fast way to contact you. For a funeral institute we use this button to get instant help when a death occurred.

First open your functions.php file and add the following code there:

function custom_load_font_awesome() {
    wp_enqueue_style( 'font-awesome-5', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );

This will make sure the call now phone icon will show. We use font awesome icons for this.

The Call Now Button HTML Code

Next is to add the html code, that will be rendered on the footer of your WordPress installation. We use the wp_footer hook for this, so the script will render at the very end of your site. This avoids SEO issues, because text will be rendered before the call now.

So go ahead and add the next lines of code, which is the skeleton without styling of the flyout button:

function we_sticky_call() {
	?>

	<a href="tel:05911234" class="we-sticky-call-container">
		<div class="we-sticky-call-icon">
			<i class="fas fa-phone-alt"></i>
		</div>
		<div class="we-sticky-call-content">
			<div class="we-sticky-call-title">
				0591 1234
			</div>
			<div class="we-sticky-call-description">
				24/7 Accident Phone 
			</div>
		</div>
	</a>
	<?php

}
add_action( 'wp_footer', 'we_sticky_call' );

Make sure you replace the phone numbers with the one of yours.

Styling the Button

Of course the button needs some styling and should work on mobile devices right? So for the basic styling add the following lines of CSS to your styles.css file:

.we-sticky-call-container {
    background: #f39200;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 20%;
    left: 20px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    z-index: 999;
}

.we-sticky-call-content {
    position: absolute;
    top: 0;
    left: 25px;
    width: 250px;
    padding-left: 25px;
    background: #f39200;
    height: 50px;
    z-index: -1;
    border-radius: 0 25px 25px 0;
    opacity: 0;
    transition: all 0.5s ease;
    font-size: 16px;
    line-height: 20px;
}

.we-sticky-call-title {
    margin-top: 5px;
}

.we-sticky-call-description {
	font-size: 12px;
}

.we-sticky-call-container:hover .we-sticky-call-content {
	opacity: 1;
}

Now your button is styled and has some nice animations when hovering over the icon.So what about responsive? Additionally place the following CSS that will apply on mobile devices only:

@media (max-width: 768px) {

	.we-sticky-call-container {
	    bottom: 0;
	    width: 100%;
	    border-radius: 0;
	    left: 0;
	}

	.we-sticky-call-icon {
		display: none;
	}

	.we-sticky-call-content {
		opacity: 1;
		width: 100%;
		left: 0;
		padding-left: 0;
	}
}