6 Two-Tap Floating Button Examples to Get More Engagement & Save Lost Conversions on Your Popups

Some visitors aren’t ready to take action at the specific moment a popup appears on your website.

Maybe they want to close it and browse around a little before recouping a discount code. Or finish reading a blog post before signing up for your email newsletter. Or maybe they even exited the popup by accident with an errant click. 

Whatever the reason, closing out a popup doesn't have to mean an offer is lost forever. All you need is a prominent yet non-invasive way that gives visitors a “second chance” to take action.

Enter: Two-tap floating buttons.

But, what even is a two-tap floating button? What does it look like? And how can you use it to achieve your business’ lead generation and sales goals?

You’ll find the answers in this post, along with six examples of brands using two-tap floating buttons on their websites. Finally, we’ll provide you with ready-to-use templates you can implement on your site in no time.

Let’s begin 👇

What is a two-tap floating button?

A two-tap button is a button that "floats" over your existing website content and displays a popup of some kind when clicked. They typically show either on the initial page load or after a popup was closed out by someone without them taking the desired action.

Two-tap floating buttons are great for discounts and other lead capture purposes as they give people a “second chance” to get the offer if they weren’t ready to fill out the form when it first showed.

So how can you create a two-tap floating button popup? Let’s find out.

Floating button best practices

Here are some of the best practices for creating two-tap floating buttons that convert well.

• Use benefit-driven copy. Since the ultimate goal of these floating buttons is to make your website visitors take action, you need to use benefit-driven copy. This means your copy should tell the users exactly what they will get from clicking the button. For instance, use “Get X% Off” instead of “Subscribe” or “Sign Up.”
• Make the buttons stand out. Since two-tap floating buttons popups are not like time-delay or scroll point that shows on the screen on their own, it’s crucial to ensure visitors can quickly identify the buttons on your website. One way to do this is by making its color, shape, or orientation different from your website’s other elements.
• Don’t make it too distracting. While it’s essential to make the floating buttons stand out, you also don’t want them to detract from your visitor’s typical browsing experience.
• Optimize for mobile. Today, almost 58% of people browse the internet and shop with mobile phones and tablets. As such, it’s vital to optimize your floating buttons for devices other than desktops and laptops.
• Ensure the offer is relevant. People usually have something in mind before landing on your website. So for your floating buttons to convert, they need to offer something that would help your visitor achieve their goal. For instance, having a 10% off button on the checkout page is more relevant than having it within a blog post.

To implement these best practices in your floating button, you need an excellent popup tool. This tool should allow you to create trigger popups, like in the case of the two-tap floating button that triggers after visitors close a popup CTA.

Let’s now consider some real-life examples of websites that use two-tap floating buttons.

1. Shein sidebar discount two-tap button example

The first example is from fashion retailer Shein.

Although this part already has many elements, Shein still did several things right to find an excellent use for the two-tap floating button:

First is the button’s orientation. Since they already have a prominent “Act Fast” CTA at the center of the page, Shein decided to move its floating button to the right side of the page to make it appear as a slider:

Also, the button’s color is black, making it stand out from the rest of the predominately red background. In addition, the “Get Extra 10%” copy on the button instantly tells visitors what they’ll get from tapping the button.

2. Mighty Munch “enter to win” two-tap floating button

Mighty Munch’s short ecommerce home page features another excellent example of a two-tap floating button.

In this case, the button isn’t on the right side of the website. Instead, it’s at the top right corner, which shows that you can place your floating button just about anywhere you want:

While Mighty Munch’s floating button might initially be hard to miss, it comes into view as you start to scroll down the page. 

Following the best practices for two-tap floating buttons, this one from Mighty Munch also used benefit-driven copy and is relevant to visitors landing on the website.

3. Bombas discount two-tap floating button example

Bombas’ two-tap floating button is one for the books. The initial popup offers first-time visitors a 20% discount on their orders—which is a pretty attractive deal.

However, if they aren’t ready to take them up on that offer yet, they can continue scrolling. Whenever they find what they want to buy, the floating button is right there, and they can click or tap it to claim their offer:

The button is placed at the page’s center with no other element to draw attention away from it. You’ll also notice that the button features a color lighter than the rest of the page to make it stand out without diverting too much attention from the rest of the page.

4. Convertflow templates push two-tap button example

It’s not surprising that we also use these two-tap floating buttons here at Convertflow.

This example shows the versatility of these floating buttons and how they’re useful for much more than collecting email addresses:

Here are two things of note from this example. The popup:

1. Stands out while maintaining ConvertFlow’s branding
2. Is relevant as it’s on a blog post about popups guiding visitors to popup templates they use for their website

Overall, it's an excellent, non-invasive option for us to use on blog posts that follows visitors around offering them the opportunity to take the next step—without being too pushy 🙌

5. Youthforia rewards two-tap floating button example

Youthforia doesn’t ask visitors to join an email list or receive a discount on its website. Instead, they ask them to sign up to the Youthforia store so they can start receiving rewards based on shopping activities:

The button is consistent with the rest of the website’s branding, and the “Rewards” copy is enticing enough to make visitors want to click.

This floating button example can inspire you if you have a rewards or referral program you’d love to promote.

6. Daily Crunch discount two-tap floating button example

Daily Crunch’s floating button does well to grab people’s attention thanks to how well it contrasts with the sliding home page images. The button also appears rectangular, while the rest of the CTA buttons have rounded edges:

Once clicked, a popup window opens asking visitors for their phone number in exchange for a 10% discount. And when checked on mobile, the button also appears to be optimized.

ConvertFlow has a whole host of popup templates and site message templates ready to customize and launch to your website in minutes!

The good news?

Any and all of them can be easily edited to have a two-tap button included.

You can either set the two-tap as the initial trigger (so the button shows as default). Or, set the popup to trigger via other options (like exit-intent, scroll-point, time delay, etc.) and have the two-tap button appear once someone closes the popup.

Just toggle the switch in ConvertFlow's builder and click "Edit Message" to control how the button looks:

Ready to launch one of these on your own site? Here are some templates to get you started: