Simply Add a Floating CTA Image Button at Your WordPress Website

A floating Call-to-Action (CTA) button is a great way to draw attention to important links on your website, like a “Book Demo” or “Shop Now” button. It stays visible as visitors scroll, making it highly effective. In this guide, you’ll learn a simple way to add a floating CTA image button to your WordPress website using a free plugin and a small piece of code.

Step 1: Install the WPCode Plugin

To add the necessary HTML code without editing your theme files, we will use the free and powerful WPCode plugin. This plugin allows you to easily add code snippets to your site.

​

1. From your WordPress dashboard, navigate to Plugins > Add New.
2. Search for “WPCode”.
3. Click Install Now and then Activate.

Step 2: Add the HTML Code for Your Button

Now, let’s add the HTML code for your floating button.

1. In your WordPress dashboard, go to Code Snippets > + Add Snippet.
2. You’ll be taken to the WPCode snippet library. Click on the “Add Your Custom Code (New Snippet)” option.

​

On the “Create Custom Snippet” page, you will:

• Enter a title for your snippet, such as “Floating CTA Button”.
• Set the “Code Type” to “HTML Snippet”.
• In the “Code Preview” box, paste the following HTML code:​

<a href="YOUR_LINK_URL" class="floating-cta-button">
    <img src="YOUR_IMAGE_URL" alt="Book Demo">
</a>

Important: You need to replace two parts of this code:

• YOUR_LINK_URL: Change this to the actual web address you want the button to link to (e.g., your contact page or a booking form).
• YOUR_IMAGE_URL: Change this to the URL of the image you want to use. You can get this by uploading your image to the WordPress Media Library and copying the “File URL”.

Scroll down to the “Insertion” section. By default, WPCode will be set to “Auto Insert”. You can leave this as is.

​Change the “Location” from “Site Wide Header” to “Site Wide Footer”.

​At the top of the page, click the toggle switch to change the snippet from “Inactive” to “Active” and then click “Save Snippet”.

Step 3: Add the CSS to Position and Style the Button

Your HTML is now in place, but the button won’t float until you add some CSS.

Paste the following CSS code into the box:

From your WordPress dashboard, go to Appearance > Customize.

In the Customizer, find and click on the Additional CSS section.

.floating-cta-button {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 999;
}

.floating-cta-button img {
    width: 150px; 
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.floating-cta-button:hover img {
    transform: scale(1.1);
}

Click the Publish button to save your changes.

And that’s it! You should now see your floating CTA image button in the bottom-right corner of your website. This simple method allows you to add an engaging and effective CTA without needing to edit your theme’s files directly.