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

# Quickstart

> Install the Cashback Hive SDK in five minutes: add the script tag with your publishable key, wait for cbh:ready, and render your first cashback offers.

This guide gets cashback offers rendering on a page. It uses plain HTML so it applies to any stack; see [Installation](https://developer.cashbackhive.com/installation/html.md) for framework-specific versions.

## Before you start

You need:

* A **publishable key** for your property. It starts with `cbh_pk_` and is shown in the publisher portal.
* Your site's origin (for example `https://www.example.com` or `http://localhost:3000`) added to the property's **allowed origins**. API calls from any other origin are rejected. See [Keys and allowed origins](https://developer.cashbackhive.com/concepts/keys-and-origins.md).

> [!WARNING]
>
> Only ever put the **publishable** key in browser code. Never add a secret key to a web page, a `NEXT_PUBLIC_*` variable, or a tag manager.

**1. Add the script tag**

Place the tag anywhere in your HTML. The `data-key` attribute is what tells the SDK to initialise.

```html theme={null}
<script
  src="https://sdk.cashbackhive.com/sdk.js"
  data-key="cbh_pk_your_publishable_key"
  async
></script>
```

**2. Wait for cbh:ready**

The SDK dispatches a `cbh:ready` event on `window` once it has initialised. The SDK instance is on `event.detail.sdk` (and also on `window.CashbackHive`).

```html theme={null}
<script>
  window.addEventListener("cbh:ready", (event) => {
    const sdk = event.detail.sdk;
    console.log("CashbackHive", sdk.version);
  });
</script>
```

If your code might run *after* the SDK has already initialised (for example a lazily mounted component), check `window.CashbackHive?.initialized` first. See [Lifecycle](https://developer.cashbackhive.com/concepts/lifecycle.md) for all the options.

**3. List offers**

`offers.list()` returns the offers available to your property.

```html theme={null}
<ul id="offers"></ul>

<script>
  window.addEventListener("cbh:ready", async ({ detail: { sdk } }) => {
    const { offers } = await sdk.offers.list({ limit: 10 });
    const list = document.getElementById("offers");

    for (const offer of offers) {
      const li = document.createElement("li");
      const rate = offer.cashback
        ? offer.cashback.type === "percentage"
          ? `${offer.cashback.amount}% back`
          : `${offer.cashback.amount} ${offer.cashback.currency} back`
        : "No cashback";

      li.textContent = `${offer.name} — ${rate} `;

      const btn = document.createElement("button");
      btn.textContent = "Shop";
      btn.onclick = () => sdk.openOffer(offer);
      li.append(btn);

      list.append(li);
    }
  });
</script>
```

`openOffer()` opens the retailer in a new tab through a tracked link so the purchase is attributed to your property.

**4. Let members sign in (optional)**

Members earn cashback on their purchases. `auth.signIn()` opens the Cashback Hive sign-in window and resolves with the member once they're done.

```js theme={null}
const member = await sdk.auth.signIn();
console.log(member.displayName, member.balances.confirmed);
```

See the [Activate widget](https://developer.cashbackhive.com/widgets/activate.md) for a complete sign-in UI.

## Check it worked

Open your browser's developer tools on an allowed origin:

* **Network tab** — you should see `sdk.js` (200), a `POST …/v1/events` beacon, and `GET …/v1/offers` (200).
* **Console** — `window.CashbackHive.initialized` should be `true`.

If `offers.list()` rejects with a `403`, the current origin isn't on the property's allowed list. See [Troubleshooting](https://developer.cashbackhive.com/guides/troubleshooting.md).

## Next steps

> [card] [Install in your framework](https://developer.cashbackhive.com/installation/nextjs.md)
>
> Next.js, React, plain HTML and Google Tag Manager.

> [card] [Build the widgets](https://developer.cashbackhive.com/widgets/overview.md)
>
> Reference implementations of the Offers and Activate widgets.

> [card] [Local development](https://developer.cashbackhive.com/guides/local-development.md)
>
> Use mock mode to develop without a network or a signed-in member.

> [card] [API reference](https://developer.cashbackhive.com/reference/configuration.md)
>
> Every method, option and event.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.