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

# Notifizz Tutorial — Send Your First Notification End-to-End

> End-to-end walkthrough — sign up, find API keys, install an SDK, fire an event, build a campaign, see the delivery in under 15 minutes.

# 15-minute tutorial

A 15-minute end-to-end walkthrough — from "I just signed up" to "I see a notification in the bell". This guide assumes you have nothing except a Notifizz account.

## TL;DR

1. Pick a region and create your first organisation + environment.
2. Copy the SDK secret + Front API Key from environment settings.
3. Install one backend SDK (`@notifizz/nodejs`).
4. Fire one event with `client.track(...)`.
5. Build a campaign in the dashboard listening on that event.
6. Promote it to `Dev` and watch the delivery land.

## Step 1 — Create your organisation and environment

<Steps>
  <Step title="Sign up">
    Go to [notifizz.com](https://notifizz.com) and sign up. Pick a region (EU is the default; US/APAC will follow).
  </Step>

  <Step title="Create an organisation">
    The first org is set up during onboarding. The org is the unit of billing and team membership.
  </Step>

  <Step title="Create your first environment">
    Each org starts with one `dev` environment. Create a `prod` environment from environment settings — keys are different per environment, never share.
  </Step>
</Steps>

## Step 2 — Find your keys

Open environment settings → **API Keys**. You need three values:

| Key               | Used by                                                                          |
| ----------------- | -------------------------------------------------------------------------------- |
| **SDK Secret**    | Your backend, when calling `client.track(...)`.                                  |
| **Auth Secret**   | Your backend, when calling `client.generateHashedToken(userId)` for widget auth. |
| **Front API Key** | Your frontend widget.                                                            |

The full reference is in [keys and environments](/docs/environments/api-keys). For this tutorial you'll only use the SDK Secret.

## Step 3 — Install a backend SDK

<CodeGroup>
  ```bash npm theme={null}
  npm install @notifizz/nodejs
  ```

  ```bash yarn theme={null}
  yarn add @notifizz/nodejs
  ```

  ```bash pnpm theme={null}
  pnpm add @notifizz/nodejs
  ```
</CodeGroup>

Java and PHP work the same way — see [Java SDK](/docs/sdks/event-tracking/java) or [PHP SDK](/docs/sdks/event-tracking/php). The rest of this guide uses Node.

## Step 4 — Fire your first event

```javascript theme={null}
import { NotifizzClient } from "@notifizz/nodejs";

const client = new NotifizzClient(
  process.env.NOTIFIZZ_AUTH_SECRET_KEY,
  process.env.NOTIFIZZ_SDK_SECRET_KEY,
);

await client.track("tutorial.first_event", {
  userId: "u_demo",
  email: "demo@example.com",
  message: "Hello from the tutorial",
});
```

Run the script. The event reaches Notifizz; with no campaign listening yet, it's recorded but no notification fires. That's fine — we'll wire the campaign next.

<Tip>
  Use a unique `userId` you control (e.g. your own account id in a test environment). You'll target this user in the campaign.
</Tip>

## Step 5 — Build the campaign

In the dashboard:

<Steps>
  <Step title="Open Campaigns → Create">
    Pick a name (`Tutorial first notification`). Pick a category — `Promotional` is fine for a test.
  </Step>

  <Step title="Bind the event">
    The campaign needs an event to listen on. Either pick `tutorial.first_event` from the events catalogue (the event you fired in Step 4 should appear) or create it inline.
  </Step>

  <Step title="Pick a channel — Notification Center">
    Add a step: "Send a Notification Center message". Pick or create an NC config (a stored template). Use `{{ message }}` in the body so the event property fills in.
  </Step>

  <Step title="Let the AI generate the orchestrator">
    The orchestrator builds the recipient list from event properties. The AI generates the boilerplate — accept its suggestion to read `userId` and `email` from the event and emit `[{ id: userId, email }]` as recipients. Review the diff; edit if you want.
  </Step>

  <Step title="Resolve any dev tasks">
    The dashboard surfaces "dev tasks" when something needs attention (missing event property, undefined enricher, …). For this minimal flow there shouldn't be any.
  </Step>
</Steps>

## Step 6 — Promote to Dev and trigger

`Dev` runs on dev environments only — perfect for testing. Promote the campaign from `Editing` to `Dev`.

Now fire the event again from your script:

```javascript theme={null}
await client.track("tutorial.first_event", {
  userId: "u_demo",
  email: "demo@example.com",
  message: "Hello from the tutorial",
});
```

Open **Delivery History** in the dashboard. Within seconds you should see:

1. The event arrival.
2. One workflow instance for the campaign.
3. One delivery for `u_demo`, status `delivered`.

## Step 7 — See it in the widget (optional)

To see the notification in the widget itself, set up the frontend SDK:

```jsx theme={null}
import NotifizzInbox from "@notifizz/react";

<NotifizzInbox
  options={{
    apiKey: "YOUR_FRONT_API_KEY",
    authType: "none",   // dev only
    userId: "u_demo",   // must match the event userId
    userEmail: "demo@example.com",
  }}
/>
```

The bell renders. Fire the event again — the badge updates and the message appears in real time. See [frontend quickstart](/docs/quickstart/frontend) for the production-grade auth setup.

## What you didn't have to do

* Pick recipients at the call site (the orchestrator handles that).
* Pick a channel from your code (the campaign handles that).
* Manage queues, retries, real-time delivery (Notifizz handles that).
* Write template-rendering logic (the channel handles that).

That's the value: from "an event happened" to "a notification arrived" without any glue layer to maintain.

## FAQ

<AccordionGroup>
  <Accordion title="Tracked an event but nothing happens — where to look?">
    Check three things in order: (1) the campaign is at `Dev` (or `Live` on prod) — `Editing` doesn't deliver; (2) the campaign listens on the exact event name you fired; (3) the campaign's orchestrator returned a non-empty recipient list. The Delivery History view shows where the chain broke.
  </Accordion>

  <Accordion title="Test without a real user?">
    Use any `userId` you control. The widget in `none` mode will display whatever you key on. Don't ship `none` mode to production.
  </Accordion>

  <Accordion title="Credit card to start?">
    No — the free tier covers tutorial-scale usage. Upgrade only when you exceed the free volume.
  </Accordion>

  <Accordion title="Campaign stays in `Editing` after I save — next step?">
    The dashboard requires you to resolve any open dev tasks before promoting. The most common one is "the orchestrator references a property your events don't send". Fix the event payload (or fix the orchestrator) and the dev task auto-resolves.
  </Accordion>

  <Accordion title="EU region URL — different?">
    Yes — `https://eu.api.notifizz.com/v1`. The SDK defaults to EU. If you're on a different region, override `baseUrl` via `client.config({ baseUrl: "..." })` or the constructor; the dashboard environment settings show the right hostname.
  </Accordion>

  <Accordion title="`tutorial.first_event` doesn't appear in the events catalogue.">
    Events show up after the first call reaches the backend with the right SDK secret. If yours doesn't appear: check the SDK secret matches the environment, check there are no auth errors in your logs, and confirm the call resolved (`await` the call so silent network failures don't slip past).
  </Accordion>
</AccordionGroup>

## See also

<CardGroup cols={2}>
  <Card title="Backend quickstart" icon="rocket" href="/docs/quickstart/backend">
    Just the backend side, in five minutes.
  </Card>

  <Card title="Frontend quickstart" icon="browser" href="/docs/quickstart/frontend">
    Production-grade widget setup with auth.
  </Card>

  <Card title="How Notifizz works" icon="diagram-project" href="/docs/concepts/how-it-works">
    The pipeline end to end.
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/docs/operations/troubleshooting">
    "My notification didn't arrive" — checklist.
  </Card>
</CardGroup>