Popups

PopUp Promotion

Promotional popup content preset with heading, body, embedded CouponBox, and a primary CTA. Slots into PopUp.

Loading playground

Overview

PopUpPromotion is the promotional popup content preset. It composes a TextGroup (optional icon, caption, heading, body), an optional countdown, an embedded CouponBox for code copy or apply, a primary call-to-action, and a fine-print hint. It owns no dialog chrome of its own. Drop it into PopUp's default slot for launch offers, seasonal promos, and welcome discounts.

The component exposes no slots — everything is prop-driven. Set countdownEndDate to render a CountdownBoxed in place of the coupon, optionally styled with countdownVariant (default, pale, bright, or solid).

Key Business & UX Benefits

Turns paid traffic into first orders with a focused offer surface, the standard pattern behind welcome-discount conversion lifts.
The embedded CouponBox handles code copy in one tap, cutting the friction that loses redemptions between popup and checkout.
Seasonal promos ship from Studio, so growth teams launch Black Friday, Easter, or flash sales without waiting on engineering deploys.
Inherits PopUp shell semantics for focus and keyboard handling, keeping the offer popup accessible by default.

Feature List

Composes a TextGroup, optional countdown, embedded CouponBox, primary CTA, and fine-print hint
CouponBox supports 'copy' or 'apply' actions, cutting friction between popup and checkout redemption
`countdownEndDate` renders a boxed countdown instead of the coupon, sharpening urgency on launch offers and flash sales
Inherits PopUp shell semantics for focus traps, keyboard support, and ARIA roles
Editors ship Black Friday, Easter, and welcome promos from Studio without engineering deploys
apply-coupon event hands cart logic back to the parent so coupons land in the customer's session

API Reference

Prop	Default	Type
`icon`		`string`
`caption`		`string`
`heading`		`string`
`body`		`string`
`hint`		`string`
`coupon`		`{ text, code, icon, 3 more }` Coupon configuration rendered via CouponBox.
`countdownEndDate`		`string` ISO 8601 end date for the countdown variant. When set, a `CountdownBoxed` is rendered.
`countdownVariant`		`"default" \| "bright" \| "solid" \| "pale"` Painted style of the countdown (inlined to avoid a cross-package `defineProps` base).
`ctaText`		`string`
`ctaHref`		`string`
`alignment`	`left`	`"left" \| "center"`
`onApply-coupon`		`(code: string): any`

Event	Type
`apply-coupon`	`(event: "apply-coupon", code: string): void`

Edit this pageorReport an issue

PopUp Newsletter

Newsletter signup popup content preset with headline, body, and an embedded EmailInputForm. Slots into PopUp.

Promotion Banner

Campaign banner combining a heading, countdown, copyable discount code, and call-to-action, in four painted styles plus a freeform custom palette.