Edit Sticky CTA

Name

Also known as (comma separated)

Brief definition Call-to-action that remains visible while scrolling.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "ctaText", "type": "text", "label": "CTA text", "default": "Start your free trial" }, { "id": "position", "type": "select", "label": "Position", "default": "bottom-bar", "options": [ "bottom-bar", "bottom-right" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "showDismiss", "type": "toggle", "label": "Show dismiss button", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"sticky-demo\">\n <div class=\"sticky-demo__scroll\">\n <p>Scroll this frame &mdash; the call to action stays pinned.</p>\n <p>Page content keeps flowing underneath it.</p>\n <p>More content here to make the frame scrollable.</p>\n </div>\n <div class=\"sticky-bar sticky-bar--{{position}}\" style=\"background:{{accent}};\">\n <span>{{ctaText}}</span>\n {{#if showDismiss}}<button type=\"button\" class=\"sticky-bar__close\" aria-label=\"Dismiss\">&times;</button>{{/if}}\n </div>\n</div>\n<style>\n.sticky-demo { position: relative; height: 200px; overflow: auto; border: 1px solid #24143022; border-radius: 12px; font: 14px system-ui, sans-serif; color: #241430; }\n.sticky-demo__scroll { padding: 16px; }\n.sticky-demo__scroll p { margin: 0 0 60px; color: #241430aa; }\n.sticky-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #FAF7F2; font-weight: 700; }\n.sticky-bar--bottom-bar { width: 100%; padding: 14px 18px; }\n.sticky-bar--bottom-right { margin: 0 12px 12px auto; width: fit-content; padding: 12px 18px; border-radius: 999px; }\n.sticky-bar__close { background: none; border: none; color: inherit; font-size: 16px; cursor: pointer; }\n.sticky-bar__close:hover, .sticky-bar__close:focus-visible { opacity: .7; }\n</style>", "tailwind": "<div class=\"relative h-[200px] overflow-auto border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]\">\n <div class=\"p-4\">\n <p class=\"m-0 mb-15 text-[#241430]/65\">Scroll this frame &mdash; the call to action stays pinned.</p>\n <p class=\"m-0 mb-15 text-[#241430]/65\">Page content keeps flowing underneath it.</p>\n <p class=\"m-0 mb-15 text-[#241430]/65\">More content here to make the frame scrollable.</p>\n </div>\n <div class=\"sticky-tw sticky-tw--{{position}} sticky bottom-0 flex items-center justify-between gap-3 text-[#FAF7F2] font-bold\" style=\"background:{{accent}};\">\n <span>{{ctaText}}</span>\n {{#if showDismiss}}<button type=\"button\" class=\"bg-transparent border-0 text-inherit text-base cursor-pointer hover:opacity-70\" aria-label=\"Dismiss\">&times;</button>{{/if}}\n </div>\n</div>\n<style>\n.sticky-tw--bottom-bar { width: 100%; padding: 14px 18px; }\n.sticky-tw--bottom-right { margin: 0 12px 12px auto; width: fit-content; padding: 12px 18px; border-radius: 999px; }\n</style>", "react": "export function StickyCta({\n ctaText = \"{{ctaText}}\",\n position = \"{{position}}\",\n accent = \"{{accent}}\",\n showDismiss = {{showDismiss}},\n}) {\n const corner = position === \"bottom-right\";\n return (\n <div style={{ position: \"relative\", height: 200, overflow: \"auto\", border: \"1px solid #24143022\",\n borderRadius: 12, font: \"14px system-ui, sans-serif\", color: \"#241430\" }}>\n <div style={{ padding: 16 }}>\n <p style={{ margin: \"0 0 60px\", color: \"#241430aa\" }}>Scroll this frame &mdash; the call to action stays pinned.</p>\n <p style={{ margin: \"0 0 60px\", color: \"#241430aa\" }}>Page content keeps flowing underneath it.</p>\n <p style={{ margin: \"0 0 60px\", color: \"#241430aa\" }}>More content here to make the frame scrollable.</p>\n </div>\n <div style={{ position: \"sticky\", bottom: 0, display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\",\n gap: 12, color: \"#FAF7F2\", fontWeight: 700, background: accent,\n width: corner ? \"fit-content\" : \"100%\", padding: corner ? \"12px 18px\" : \"14px 18px\",\n borderRadius: corner ? 999 : 0, margin: corner ? \"0 12px 12px auto\" : 0 }}>\n <span>{ctaText}</span>\n {showDismiss && <button type=\"button\" aria-label=\"Dismiss\" style={{ background: \"none\", border: \"none\", color: \"inherit\", fontSize: 16, cursor: \"pointer\" }}>&times;</button>}\n </div>\n </div>\n );\n}" }