How to Add a Floating CTA Button to a Carrd Site

Carrd is popular for one-page websites, landing pages, and link-in-bio pages. Adding a floating CTA button keeps your most important link (signup, buy, contact) visible even as visitors scroll your long-form Carrd page. Use Carrd's Embed element to inject the code.

Why Add a CTA Button to Carrd?

Carrd sites are single-page by design, which means visitors scroll through all your content in one go. A floating CTA button ensures your primary action — booking a call, signing up, or visiting your store — stays visible the entire time, not just when the visitor happens to scroll past a specific section. For creators, freelancers, and small businesses using Carrd as their main web presence, this is the difference between a visitor and a conversion.

Step-by-Step Instructions

Design your CTA button

Open the CTA Button Generator and customize your button using the visual editor. Pick colors, position, animation, hover effects, icon, and font. The live preview updates in real time so you see exactly what your visitors will get.

Export your code

When you are happy with the design, click "Get Code" to export a clean HTML + CSS snippet. The code is lightweight, has zero dependencies, and works on any website.

Add an Embed element in Carrd

In the Carrd editor, click the + button to add a new element. Select "Embed" from the list. Set the Type to "Code" and the Style to "Hidden" (so it doesn't affect your layout).

Paste your CTA button code

In the Embed element's code field, paste the exported HTML + CSS snippet. The floating button uses fixed positioning, so it will appear on top of your page content.

<!-- Paste your CTA button code in the Embed element -->

Publish and check

Save and publish your Carrd site. Visit the live URL to confirm the floating CTA button appears correctly. It may not show in the editor preview — check the published site.

Best Practices for Carrd

Set the Embed element's Style to "Hidden" so it doesn't take up space in your Carrd layout — the button floats via CSS positioning.
Use a bottom-center position for mobile-friendly Carrd sites since the narrow viewport makes corner buttons harder to tap.
Link the button to your most important destination: a Calendly booking, a Gumroad product, or a signup form.
Test on both desktop and mobile previews in Carrd — the single-page layout can behave differently at various breakpoints.

Ready to build your button?

Design it visually, export clean code, and paste it into your site.

Open the Generator

Frequently Asked Questions

Do I need a Pro plan for Embed elements?

Yes. Carrd's Embed element requires a Pro plan ($19/year for Pro Standard or $49/year for Pro Plus).

Will the button float on top of my Carrd content?

Yes. The CTA button uses CSS fixed positioning, so it stays visible regardless of scroll position on your one-page site.

Can I add multiple floating buttons to my Carrd site?

Yes. Add additional Embed elements with different CTA button code. Just make sure to position them in different corners to avoid overlap.

Why doesn't the button show in the Carrd editor?

Carrd's editor doesn't always render embedded custom code. Publish your site and check the live URL to see the floating button in action.

How to Add a CTA Button to Carrd