Web Components

pnpm add @fanfare-io/fanfare-sdk-core @fanfare-io/fanfare-sdk-solid solid-js

<script type="module">
  import { registerWebComponents } from "@fanfare-io/fanfare-sdk-solid";

  registerWebComponents({
    organizationId: "org_123",
    publishableKey: "pk_live_123",
  });
</script>

<fanfare-experience-widget
  experience-id="exp_123"
  auto-start
  checkout-url="/checkout"
></fanfare-experience-widget>

<fanfare-experience-widget
  experience-id="exp_123"
  auto-start
  locale="en"
  variant="rounded"
  theme-config='{"primary":"#0F766E","fontFamily":"Inter, system-ui, sans-serif"}'
  translations='{"queue.enter":"Join the line","granted.cta":"Shop now"}'
></fanfare-experience-widget>

<script>
  const widget = document.querySelector("fanfare-experience-widget");

  widget.addEventListener("fanfare-journey-change", (event) => {
    console.log("Journey changed", event.detail.experienceId);
  });

  widget.addEventListener("fanfare-granted", (event) => {
    const grant = event.detail.grant;
    fetch("/api/fanfare/admission", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ grant }),
    }).then(() => {
      window.location.assign("/checkout");
    });
  });

  widget.addEventListener("fanfare-error", (event) => {
    console.error("Fanfare error", event.detail.error);
  });
</script>