Sticky CTA bar test
Compares an always-visible sticky CTA bar, one that fades in after the hero, and no sticky bar at all on marketing pages.
Authored by Sid Chaudhary
Founder & CEO at Intempt
Agentic workflow
Coming soon1 step Blu runs end to end. It drafts a plan and nothing runs until you approve it.
- 1
Set up the sticky CTA test
Coming soonBlu builds a step
About this recipe
When to use it
An always-visible sticky CTA is cited for an 8-15% lift, but it also competes for attention on every scroll. This tests always-visible against fade-in-on-scroll against none at all, on your own SaaS marketing pages.
What it delivers
Tests a sticky CTA bar on SaaS marketing pages across three states - always-visible, fade-in-on-scroll, and no sticky bar.
How you prompt this
Describe the outcome in your own words and Blu Agent maps it to this recipe, or run it by name. It drafts a plan first and nothing runs until you approve it.
Tell Blu Agent what you want
“Compares an always-visible sticky CTA bar, one that fades in after the hero, and no sticky bar at all on marketing pages.”
recipe.md preview
Built from the published catalog. Blu Agent's full step prompts load in your workspace when you run it.
Inputs & outputs
What the recipe needs before it runs, and what it leaves in your workspace.
Inputs
- Nothing declared beyond an Intempt workspace. Blu asks for anything else it needs as it goes.
Outputs
How the recipe runs
Blu follows the steps in order and shows you each one before anything goes live.
- 01Set up the sticky CTA testCreate a CLIENT EXPERIMENT on /experiences titled "Landing Page Sticky CTA". ═══ PATH 1: Top-level configuration ═══ Experience type: client_experiment Variants: - Control (34%): no sticky CTA (existing landing page: CTA only in hero) - Variant B (33%): always-visible sticky CTA bar at top of page (appears immediately on page load) - Variant C (33%): fade-in sticky CTA bar (appears after the user scrolls past the hero, ~600px scroll depth) Targeting: - Pages: marketing landing pages: homepage "/", /solutions, /features, /product, /pricing - Devices: any (mobile + desktop both benefit; mobile especially given long-scroll pages) - Audience: all visitors - Display frequency: always (within session) Primary metric: goal_completed_in_experience where experience_id = <this> (goal: Form submitted on demo-request OR User created via signup, within session of exposure) Secondary metrics: - Click on where target_id = "sticky-cta-button" (sticky CTA engagement rate) - Click on where target_id = "hero-cta-button" (does sticky cannibalize hero clicks?) - Bounce rate per variant (variant B's always-visible may feel pushy) - Scroll depth (does sticky reduce scroll engagement?) Guardrail: bounce rate must not increase >5%; scroll-depth-to-50% rate must not drop >10% Schedule: 14 days, 1,500 unique visitors per variant minimum ═══ PATH 2: Variant HTML content (Visual Editor) ═══ Variant: Control (no DOM changes) Variant: B (always-visible sticky CTA) HTML target selector: body (prepend fixed-position bar) Variant DOM: <div class="sticky-cta-bar sticky-cta-bar--top" data-variant="b" data-trigger="immediate" style="position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid #eee;padding:12px 24px;z-index:1000;display:flex;align-items:center;justify-content:space-between;"> <div class="sticky-cta-message"> <strong>[Brand]</strong>: see it in action in 15 minutes </div> <button class="sticky-cta-button" id="sticky-cta-button" data-variant="b">Book a demo</button> </div> Adjust body padding-top to compensate for the bar's height (so existing content isn't hidden behind it). Variant: C (fade-in sticky CTA) Same DOM as Variant B but with data-variant="c" and data-trigger="scroll-600px". Lightweight JS the user refines in the Visual Editor: - Listen for scroll events - When window.scrollY > 600 (or after the hero CTA scrolls out of view), set the bar visible with a smooth fade-in transition (300ms) - When the user scrolls back above the threshold, hide the bar smoothly The Visual Editor allows the user to refine the sticky bar's color, copy, button styling, and animation timing. Mobile note: ensure the sticky bar respects the iOS Safari URL bar and doesn't double-stack with mobile browser chrome. Taxonomy notes: - This is distinct from mobile-sticky-add-to-cart-test (which is ecommerce PDP-specific, mobile-only). Landing-page sticky CTA applies to SaaS marketing pages on all devices. - target_id="sticky-cta-button" must be preserved across variants B and C for consistent Click on aggregation. - Variant C's fade-in is generally less intrusive but has slightly lower engagement than Variant B's always-visible. The test answers: which tradeoff wins for your audience? - For dark-launching: ship Variant B first to a small traffic slice (5%) to confirm no layout regressions before full experiment ramp.
Install Intempt and run it
- 1
Sign up
Create a free Intempt workspace.
- 2
Connect your data
Add the sources this recipe reads from.
- 3
Ask Blu
Type /landing-page-sticky-cta-test in Blu once this recipe is live there.
- 4
Review and approve
Blu builds each step and waits for your OK before anything goes live.
Related recipes
Sid ChaudharyDiscovery call qualification fieldsGenerates an AI summary for Discovery calls from meeting data using the qualification framework in the summary recipe.View recipe Sid ChaudharyPost demo nurtureKeeps a demo warm for 90 days with a playbook, a case study, an ROI calculator and a customer story, and pulls the AE in early if they bite.View recipe Sid ChaudharyReturn rate by categoryShows which product categories get returned most, and which ones have got worse since last quarter.View recipe 