Do you have a WordPress website, that uses Visual Composer, for your business or service and would like more calls to your business? A great way to solve this problem is by adding a sticky click to call button to the bottom of your page that stands out to your users. Luckily with a few lines of HTML and CSS, you can quickly create a simple call button that scrolls along with the user as they view your page. We will go through a few easy steps to creating and adding the button to a specific page.

This will be the end result.

The user will be able to scroll through the page
while always having the ability to call you.

Here are a few necessities to follow this guide.

  • WordPress
  • Visual Composer or any visual builder
  • A Call button icon, example: 

Setting the page:

The first thing you want to do is create a test page on your WordPress website and add in some dummy text from Lipsum to allow for page height. Add an element to the page and insert a full row. Within the row, add a simple Text Block and paste in your demo text.

Once you have your page created, make sure to save it as a draft so that you can hit the preview button and check your progress. Now we have a page to work within and test our first call mobile call button.

With your test page created you can now upload your icon image to the server. The image should be no larger than 80px as it will take up too much view space and will prevent users from reading the content underneath.

Make sure to copy the image code and save it in a text file for our next steps.

Setting the code:

With our new test page created and our icon uploaded we can now start working with HTML and CSS to add in our button. In order for the code to work, you must create a section within your page to add in Raw HTML code.

Once you have this section added, copy and paste in the code below. Within the code are a few sections that must be edited to ensure that you have the correct phone number and image link source for it to work.

<!—Start Here —>
<div class=”cbtn_wrapper”>
<div class=”my_call_button”>
<a href=”tel:YourNumberWithNoSpaces”><img src=”Call Button Image Source.png” width=”80″ height=”80″/></a>
</div>
</div>
<style>
.cbtn_wrapper {
width: 90%;
height: 100px;
background-color: transparent;
padding: 0;
position: fixed;
bottom: 0;
z-index: 1000;
margin: 0px auto;
display:none;
}
.my_call_button a {
float: right;
cursor:pointer;
}
@media only screen and (max-width: 720px){
.cbtn_wrapper {
display:block;
}
}
</style>
<!–End Here —>

Copy and paste the code into the Raw HTML block as seen below:

That’s It! Once you paste in that code and hit Publish, your new call button should be seen within the mobile view of your page.

Now that you have a flashy new call button for users to take action on, just sit back and wait for calls. With adding this feature to your page, users will not hesitate to contact your business. With great user experience, your page will have a much better chance of converting as it requires fewer clicks to reach you.

Leave a reply