Paywall

<!-- Paste into an .html file and open — no build step. Wrap a gated affordance; the upsell renders itself. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ahaslides-product/design/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@ahaslides-product/design/lib/aha-paywall.js';   // registers <aha-paywall>
</script>

<!-- Pro gate — the affordance is the anchor. The popover ships the crown mark, title, description,
     the fixed unlock line, and BOTH CTAs (Upgrade positive + See all plans) — all baked in. -->
<aha-paywall
  feature-key="streak_bonus"
  feature-label="Streak answer bonus point"
  body="Let the participants play quiz and be ranked as teams instead of being ranked individually."
  required-plan="pro">
  <button>Streak bonus</button>   <!-- the gated affordance (omit for a crown upgrade-mark anchor) -->
</aha-paywall>

<!-- No natural anchor → the crown upgrade mark IS the anchor (a focusable control); hover-triggered -->
<aha-paywall
  feature-key="export_results"
  feature-label="Export results"
  body="Download every response as a CSV or PDF."
  required-plan="essential"
  trigger="hover"></aha-paywall>

<script>
  // analytics contract — the app wires these to its tracker (fires for every paywall)
  document.querySelectorAll('aha-paywall').forEach((el) => {
    el.addEventListener('paywall-shown', (e) => console.log('PAYWALL_SHOWN', e.detail));
    el.addEventListener('paywall-upgrade', (e) => console.log('PAYWALL_UPGRADE_CLICKED', e.detail));
    el.addEventListener('paywall-plans', (e) => console.log('PAYWALL_PLANS_CLICKED', e.detail));  // See all plans
  });
</script>

import '@ahaslides-product/design/aha-paywall';   // registers <aha-paywall>
import '@ahaslides-product/design/tokens.css';
import { useRef, useEffect } from 'react';

// Wrap the gated affordance; the element renders the compliant upsell (crown badge, one-sentence
// body, fixed unlock line, single Upgrade CTA are baked in). analytics comes back as events.
export function CustomUrlSetting() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current, track = (name) => (e) => window.analytics?.track(name, e.detail);
    el.addEventListener('paywall-shown', track('PAYWALL_SHOWN'));
    el.addEventListener('paywall-upgrade', track('PAYWALL_UPGRADE_CLICKED'));
    el.addEventListener('paywall-plans', track('PAYWALL_PLANS_CLICKED'));   // See all plans
  }, []);
  return (
    <>
      {/* Pro gate — the affordance is the anchor. Popover ships crown mark, title, description,
          the fixed unlock line, and BOTH CTAs (Upgrade positive + See all plans). */}
      <aha-paywall
        ref={ref}
        feature-key="streak_bonus"
        feature-label="Streak answer bonus point"
        body="Let the participants play quiz and be ranked as teams instead of being ranked individually."
        required-plan="pro">
        <button>Streak bonus</button>
      </aha-paywall>

      {/* Essential gate, no natural anchor → the crown badge is the anchor */}
      <aha-paywall
        feature-key="export_results"
        feature-label="Export results"
        body="Download every response as a CSV or PDF."
        required-plan="essential" />
    </>
  );
}

<script setup>
import '@ahaslides-product/design/aha-paywall';   // registers <aha-paywall>
import '@ahaslides-product/design/tokens.css';

// The element renders the compliant upsell; analytics comes back as events.
const onShown = (e) => window.analytics?.track('PAYWALL_SHOWN', e.detail);
const onUpgrade = (e) => window.analytics?.track('PAYWALL_UPGRADE_CLICKED', e.detail);
const onPlans = (e) => window.analytics?.track('PAYWALL_PLANS_CLICKED', e.detail);   // See all plans
</script>

<template>
  <!-- Pro gate — the affordance is the anchor. Popover ships crown mark, title, description,
       the fixed unlock line, and BOTH CTAs (Upgrade positive + See all plans). -->
  <aha-paywall
    feature-key="streak_bonus"
    feature-label="Streak answer bonus point"
    body="Let the participants play quiz and be ranked as teams instead of being ranked individually."
    required-plan="pro"
    @paywall-shown="onShown"
    @paywall-upgrade="onUpgrade"
    @paywall-plans="onPlans">
    <button>Streak bonus</button>
  </aha-paywall>

  <!-- No natural anchor → the crown upgrade mark is the anchor (a focusable control) -->
  <aha-paywall
    feature-key="export_results"
    feature-label="Export results"
    body="Download every response as a CSV or PDF."
    required-plan="essential"
    @paywall-shown="onShown"
    @paywall-upgrade="onUpgrade"
    @paywall-plans="onPlans" />
</template>