Quickstart

A complete integration in four steps

This walkthrough uses React. Other frameworks follow the same shape; see SDK packages for Vue, Svelte, React Native and Web Components.

npm install @elaanio/react

// Your server. The service key stays here, never in the browser.
app.get("/api/elaan-token", async (req, res) => {
  const r = await fetch("https://api.elaan.io/v1/contacts/tokens", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.ELAAN_SERVICE_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ external_id: req.user.id }), // your own user id
  });
  res.json(await r.json()); // { token, contact_id, expires_in }
});

import { ElaanProvider, NotificationBell, Preferences } from "@elaanio/react";
import "@elaanio/react/styles.css";

async function tokenProvider() {
  const res = await fetch("/api/elaan-token");
  const { token, contact_id } = await res.json();
  return { token, contactId: contact_id };
}

export function App() {
  return (
    <ElaanProvider apiBase="https://api.elaan.io/v1" tokenProvider={tokenProvider}>
      <NotificationBell />
      <Preferences />
    </ElaanProvider>
  );
}

curl https://api.elaan.io/v1/notifications \
  -H "Authorization: Bearer $ELAAN_SERVICE_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "notification_type_key": "order_shipped",
       "external_ids": ["crm-12345"],
       "variables": { "order_id": "A-1042" } }'

That's it. The bell badge updates live, the inbox fills in, and any enabled email and push channels are delivered by background workers.

Where to go next

• Trigger a notification covers batching up to 100 recipients, per-brand overrides and template variables.
• Authentication explains the two credential kinds and why the browser only ever holds a contact token.
• Headless shows how to keep the behaviour and render your own markup.