## Paywall
Wrap a pro-gated affordance; the shared upsell renders itself — the crown upgrade mark, title, one-sentence body, the fixed unlock line, and Upgrade + See all plans CTAs are baked in.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-paywall> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- feature-key: string (snake_case), default —. Stable token (e.g. custom_survey_url) — drives analytics + DOM hooks. Required.
- feature-label: string, default Pro feature. Short noun-phrase title next to the crown (used as the popover title unless title is set)
- title: string, default —. Popover title override; falls back to feature-label. May wrap to two lines
- body: string, default —. Exactly one sentence describing the benefit of unlocking; ends with a period
- description: string, default —. Popover description override; falls back to body
- required-plan: essential | pro, default pro. Drives the unlock line and the analytics plan prop
- placement: top | bottom, default top. Popover side relative to the anchor
- trigger: click | hover, default click. How the popover opens; click-away + Escape close a click popover
- cta-label: string, default Upgrade. The positive CTA verb; override only with a clear reason
- plans-label: string, default See all plans. The secondary CTA label — routes to the full pricing page
- upgrade-url: string (URL), default ahaslides.com/pricing. Where Upgrade navigates (new tab, noopener)
- plans-url: string (URL), default ahaslides.com/pricing. Where See all plans navigates (new tab, noopener)
- slot (default): element, default upgrade mark. The gated affordance = the anchor; omit it to use the crown upgrade mark as the anchor
- paywall-shown / paywall-upgrade / paywall-plans: CustomEvent<{feature,plan}>, default —. Analytics contract; paywall-upgrade + paywall-plans are cancelable (preventDefault to run your own flow)
Tokens: color-primary, color-primary-hover, color-primary-active, bg-dark-raised, text-inverse, text-secondary, radius-lg, radius-pill, button-positive-bg, button-default-border, focus-ring-soft.
Use when: aha-paywall (any feature locked behind a paid plan — editor affordance, share option, results feature, dashboard action); crown-badge anchor (the feature has no natural clickable anchor (e.g. a field label) — omit the slot and the crown is the anchor); required-plan pro (the default gate; use essential only for essential-tier features); never a bespoke upsell (a hand-rolled upgrade modal/tooltip drifts from the presenter app — always this element).