Client Components

seedypea-client exports three browser component entrypoints:

import "seedypea-client/seedy-lead-modal";
import "seedypea-client/seedy-cta";
import "seedypea-client/seedy-toast";

seedy-lead-modal

<seedy-lead-modal> registers the lead-capture tactic. When opened, it renders a native <dialog>, collects email, calls identify({ email }), tracks LeadEmailCaptured, and dispatches toast-friendly events.

<a
  href="#"
  sp-tactic="lead-capture"
  sp-prop-source="hero"
  sp-prevent-default="true">
  Get early access
</a>

<seedy-lead-modal></seedy-lead-modal>

Override copy with attributes:

<seedy-lead-modal
  kicker="Early access"
  title="Get on the list"
  body="Tell us where to send updates."
  action="Join">
</seedy-lead-modal>

Built-in sources include early_access and exit_intent_coupon.

seedy-cta

<seedy-cta> picks one child <seedy-variant> from the current tactic profile.

<seedy-cta class="button primary">
  <seedy-variant segment="known" href="/manifesto/receipts">
    Read the receipts doctrine
  </seedy-variant>
  <seedy-variant
    segment="anonymous"
    href="#"
    sp-tactic="lead-capture"
    sp-prop-source="enterprise-hero"
    sp-prevent-default="true">
    Bring us your ugliest workflow
  </seedy-variant>
</seedy-cta>

Variants are evaluated in source order. Segment names come from profile.segments. The component also derives:

Use fallback on a variant to prefer it when no segment matches.

seedy-toast

<seedy-toast> listens for bubbling seedy-toast events and renders toast notifications.

<seedy-toast>
  <seedy-lead-modal></seedy-lead-modal>
  <seedy-event on="lead-captured" type="success" message="You're on the list."></seedy-event>
  <seedy-event on="lead-error" type="error" message="Could not save that email."></seedy-event>
</seedy-toast>

Dispatch a toast event from anywhere inside the subtree:

element.dispatchEvent(new CustomEvent("seedy-toast", {
  bubbles: true,
  composed: true,
  detail: {
    name: "lead-captured",
    type: "success"
  }
}));

seedy-event attributes:

For code paths without a bubbling source, import and call pushSeedyToast().

import { pushSeedyToast } from "seedypea-client/seedy-toast";

pushSeedyToast({
  message: "Saved",
  type: "success"
});