Popups

PopUp Newsletter

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

Overview

PopUpNewsletter is the newsletter-signup popup content preset. It composes a TextGroup (optional icon, caption, heading, body), an EmailInputForm, and an optional fine-print hint. It owns no dialog chrome of its own. Drop it into PopUp's default slot for first-visit signup prompts and exit-intent popups.

Key Business & UX Benefits

Captures first-visit and exit-intent traffic that would otherwise leave without signing up, the single highest-yield lever for email list growth.
Bundles media, copy, and the embedded signup form into one preset, so launching a new acquisition popup is a Studio task, not a sprint.
Inherits focus management and keyboard support from the PopUp shell, keeping accessibility solid even on a high-traffic surface.
Editors run seasonal hooks ("early access", "welcome offer") through the same component, keeping voice and design consistent across campaigns.

Usage

PopUpNewsletter Default

<LPopUp v-model:open="showNewsletter" :media="image">
    <LPopUpNewsletter
      heading="Get our weekly digest"
      body="Curated drops, sent every Friday"
      email-placeholder="you@example.com"
      :email-button="{ text: 'Subscribe' }"
      hint="By signing up, you agree to our privacy policy."
    />
  </LPopUp>

Feature List

Composes a TextGroup (optional icon, caption, heading, body), an EmailInputForm, and an optional fine-print hint
Built for first-visit signup prompts and exit-intent popups where email capture has the highest yield
Inherits focus management and keyboard support from the PopUp shell, with no extra accessibility work
Editors run seasonal hooks (welcome offer, early access) through one component, keeping voice and design consistent
Drops into the PopUp shell's default slot, so the same shell powers info, newsletter, and promotion popups

API Reference

Prop	Default	Type
`icon`		`string`
`caption`		`string`
`heading`		`string`
`body`		`string`
`hint`		`string`
`emailPlaceholder`		`string`
`emailButton`		`{ text, ariaLabel, iconRight, 1 more }`
`alignment`	`left`	`"left" \| "center"`

Edit this pageorReport an issue

PopUp Info

Informational popup content preset with icon, caption, heading, body, and a primary CTA. Slots into PopUp.

PopUp Promotion

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