FRAMER CODE COMPONENT — CAMPAIGN TOOLKIT
One bar for every campaign. Up to three rotating messages, scheduling, page and UTM targeting, dismissal memory, and three display modes — all configured from the property panel.
3 rotating messages
Auto · Manual · Both
Scheduling
Path & UTM targeting
Dismissal memory
Inline · Sticky · Floating
Mobile layouts
Entrance animation
01 — MESSAGES & ROTATION
Up to three messages, rotating on their own
Add up to three messages and pick a rotation mode: automatic on a timer, manual with arrows, or both. Transitions can fade, slide, or switch instantly, dot indicators show the active message, and rotation pauses while hovered.
Rotation: Both · Interval: 4s · Transition: Slide · Indicators: On · Pause on hover: On
02 — CALL TO ACTION
A link that can close the deal — and the bar
Attach an optional CTA with its own label, link, accent color, and font. It can open in a new tab and even dismiss the bar after the click — perfect for one-shot promo codes.
CTA label & link · Open in new tab · Close after click · Accent color · Separate CTA font
03 — DISPLAY MODES
Inline, sticky, or floating — top or bottom
Drop the bar in the page flow, pin it to the top or bottom of the viewport, or float it above the content with its own margin, radius, and shadow.
INLINE — SITS IN THE PAGE FLOW
FLOATING — DETACHED CARD WITH MARGIN, RADIUS & SHADOW
STICKY — FIXED TO THE VIEWPORT EDGE. THE LIVE BAR AT THE TOP OF THIS PAGE RUNS IN STICKY MODE; A POSITION CONTROL SWITCHES IT BETWEEN TOP AND BOTTOM.
04 — SMART LOGIC
It decides when to show up
Scheduling
Set a start and end date with time. The campaign turns itself on and off — no republish needed.
Page & UTM targeting
Include or exclude pages with paths and wildcards like /pricing or /launch/*, and only greet visitors arriving from a matching utm_source or utm_campaign.
Dismissal memory
Close once, stay closed — for the session, a day, a week, a month, until the campaign ends, or forever. Memory is scoped per Campaign ID, so a new campaign gets a fresh start.
Status & canvas preview
Pause the whole campaign with one switch, and force-show or hide the bar on the canvas while the live logic keeps running for visitors.
05 — THEMING
Dress it for any brand
Background, text, and accent colors, border, corner radius, shadow strength, spacing, and independent fonts for the message and the CTA — every surface is a control.
Background · Text · Accent · Border · Radius · Shadow · Padding & gap · Message font · CTA font
06 — RESPONSIVE & MOTION
Small screens and smooth entrances
Mobile behavior
Below a configurable breakpoint (600px by default) the bar tightens its spacing and switches to a Compact or Stack layout. The CTA can hide itself on mobile to keep the message readable.
Entrance animation
Fade or slide in with a configurable duration and delay. Slide direction follows the bar position — down from the top, up from the bottom — and it exits just as gracefully when dismissed.
Smart Announcement Bar
Every feature above is a property control — no code required.