> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getkardy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Launch your programme

> Prepare your first outlet, reward and customer experience.

export const GuideChecklist = ({guide, title, items}) => {
  const [checked, setChecked] = useState([]);
  const [storage, setStorage] = useState("Progress stays in this browser only.");
  useEffect(() => {
    try {
      const value = JSON.parse(localStorage.getItem(`kardy-guide-v1:${guide}`) || "[]");
      setChecked(Array.isArray(value) ? [...new Set(value.filter(i => Number.isInteger(i) && i >= 0 && i < items.length))] : []);
    } catch {
      setStorage("Browser storage is unavailable. Progress lasts until you leave this page.");
    }
  }, [guide, items.length]);
  const save = next => {
    setChecked(next);
    try {
      localStorage.setItem(`kardy-guide-v1:${guide}`, JSON.stringify(next));
    } catch {
      setStorage("Browser storage is unavailable. Progress lasts until you leave this page.");
    }
  };
  return <section className="kardy-guide" aria-label={title}>
      <div className="kardy-guide-heading">
        <div>
          <span className="kardy-guide-kicker">YOUR CHECKLIST</span>
          <h3>{title}</h3>
        </div>
        <span className="kardy-guide-count" role="status">
          {checked.length} / {items.length}
        </span>
      </div>
      <progress aria-label={`${title} progress`} max={items.length} value={checked.length} />
      <div className="kardy-guide-tasks">
        {items.map((item, index) => <button type="button" key={item} className="kardy-guide-task t-check" role="checkbox" aria-checked={checked.includes(index)} onClick={() => save(checked.includes(index) ? checked.filter(i => i !== index) : [...checked, index])}>
            <span className="kardy-guide-box" aria-hidden="true">
              <svg viewBox="0 0 10.1668 10.1668">
                <path ref={path => {
    if (path) path.style.setProperty("--check-len", String(Math.ceil(path.getTotalLength())));
  }} d="M1 5.52L3.92 9.17L9.17 1" />
              </svg>
            </span>
            <span>{item}</span>
          </button>)}
      </div>
      <div className="kardy-guide-footer">
        <small>
          {checked.length === items.length ? "Checklist complete. This is a personal reminder, not a system readiness check." : storage}
        </small>
        <button type="button" className="kardy-guide-reset" onClick={() => save([])} disabled={!checked.length}>
          Reset checklist
        </button>
      </div>
    </section>;
};

<GuideChecklist
  guide="owner"
  title="Your launch checklist"
  items={[
"My organisation has an active outlet and a clear reward.",
"I reviewed the card design, join page and outlet QR signs.",
"I checked programme activation and integration availability.",
"Each teammate has their own invitation and the appropriate role.",
]}
/>

## Launch your programme

<Steps>
  <Step title="Set up the organisation">
    Follow [organisation setup](/merchants/setup) to add your business details
    and outlets. Separate brands should have separate organisations.
  </Step>

  <Step title="Choose the reward">
    Set a clear reward and stamp cost. Decide which visits qualify and where the
    reward can be redeemed. Review [stamps and rewards](/features/rewards).
  </Step>

  <Step title="Prepare the customer experience">
    Review your card design, join page, and outlet-specific QR signs in
    [Branding](/features/branded-cards). Follow [Print and display your join
    QR](/guides/qr-signs) to prepare a counter sign and test the intended
    destination.
  </Step>

  <Step title="Confirm activation and availability">
    Review [plans and activation](/merchants/billing) and [feature
    availability](/availability). Creating an organisation does not activate a
    paid programme or external integrations. A demo preview is not a saved test
    transaction.
  </Step>
</Steps>

<a className="kardy-guide-index" href="/guides/owner">
  All owner guides <span aria-hidden="true">↗</span>
</a>
