How to Add a Floating CTA Button to a Remix App

Remix uses a root route file that wraps all other routes, similar to Next.js layouts. This makes it the perfect place to add a site-wide floating CTA button. Design it with the generator, export the code, and drop it into your root route.

Why Add a CTA Button to Remix?

Remix focuses on web fundamentals and progressive enhancement, making a pure HTML + CSS CTA button a natural fit. Because Remix streams HTML from the server, the button appears as soon as the document starts loading — before any JavaScript runs. For marketing sites, e-commerce stores, and web apps built with Remix, this means the call-to-action is visible from the very first paint.

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.

Create a CtaButton component

Create a new file at app/components/cta-button.tsx. Paste the exported HTML (converted to JSX) and include the styles.

export function CtaButton() {
  return (
    <>
      <style>{`/* paste your CTA styles here */`}</style>
      {/* paste your CTA HTML here, converted to JSX */}
    </>
  );
}

Add to your root route

Open app/root.tsx and import the CtaButton component. Render it inside the <body> after the <Outlet /> component.

import { CtaButton } from "~/components/cta-button";

// Inside your App component's return:
<body>
  <Outlet />
  <CtaButton />
  <Scripts />
</body>

Run and verify

Start your Remix dev server. Navigate to any route — the floating CTA button should appear on all pages.

Best Practices for Remix

Place the component after <Outlet /> but before <Scripts /> in root.tsx to ensure it renders in the initial HTML and before JavaScript loads.
Convert the exported HTML to valid JSX (className, camelCase styles) since Remix uses React components.
Use Remix's nested routing to your advantage — the button in the root route persists across all nested route transitions.
If deploying to Cloudflare Workers or other edge runtimes, the pure CSS approach ensures compatibility without worker-specific workarounds.

Ready to build your button?

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

Open the Generator

Frequently Asked Questions

Does it work with Remix's server-side rendering?

Yes. The CTA button is pure HTML + CSS with no client-side JavaScript, so it renders correctly on the server.

Can I use it with Remix on Cloudflare Workers?

Yes. The button is platform-agnostic HTML + CSS. It works regardless of where your Remix app is deployed.

Does the button persist during Remix route transitions?

Yes. Since it's in the root route (root.tsx), it stays rendered during all nested route transitions without remounting.

Can I use Remix loaders to conditionally show the button?

Yes. Use the root loader to pass a flag (e.g., based on the URL or user session), then conditionally render the CtaButton component based on that loader data.

How to Add a CTA Button to Remix