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

# Configure the SDK

> Initialize the Encore Web SDK with Encore.configure(): apiKey is the only required field. Identity is an auto-generated, persisted anonymous UUID; attach your real id with identify(). Covers choosing redemptionMode and where to call configure() per framework.

Call `configure()` once, as early as possible in your application lifecycle, before any other
SDK method. Only the **API key** is required:

```javascript theme={null}
import Encore from '@encorekit/web-sdk';

Encore.configure({
  apiKey: 'pk_live_yourpublishablekey',
});
```

Get your publishable **Live** key from the Dashboard under **Settings → Project API Keys**
at [dashboard.encorekit.com](https://dashboard.encorekit.com) (use the **Test** key for
staging and local development). It starts with `pk_` and is safe to ship in client-side code.

<Warning>
  The SDK is configure-once: only the first successful `configure()` call is honored;
  subsequent calls log a warning and are ignored. To change configuration, reload the page.
</Warning>

## The options

```typescript theme={null}
interface EncoreConfig {
  apiKey: string;                              // required: pk_... from the Dashboard
  redemptionMode?: 'deferred' | 'immediate';   // app-wide default: 'deferred'; overridable per placement
  logLevel?: 'none' | 'debug';                 // 'debug' during integration only
}
```

Field-by-field contract:
[`configure()` reference](/publishers/web/sdk-reference/configure).

Two choices worth making up front:

* **User identity is not configured here.** The SDK auto-generates an anonymous UUID and
  persists it in `localStorage`; attach your own stable id with
  [`identify()`](./user-management) once you know it.
* **`redemptionMode`** sets the app-wide default claim flow: `'deferred'` (default; your
  code calls `redeem()` later) vs `'immediate'` (one step). Placements can override it
  per surface. See [Redemption Modes](/publishers/web/concepts/redemption-modes).

## Full example

```javascript theme={null}
import Encore from '@encorekit/web-sdk';

Encore.configure({
  apiKey: import.meta.env.VITE_ENCORE_API_KEY, // never hardcode keys
  redemptionMode: 'immediate',                 // app-wide default; placements can override per surface
  logLevel: 'debug',                           // during integration only
});
```

`configure()` returns `true` on success and `false` on invalid input (it logs the reason;
it does not throw). Verify the live values at any time:

```javascript theme={null}
Encore.isConfigured();                      // true
Encore.getConfiguration();                  // { apiKey, baseURL, ..., redemptionMode }
Encore.getCurrentUserId();                  // the anonymous UUID, or your identify()'d id
Encore.getVersion();                        // SDK version string
```

## Supported Web Development Frameworks

The SDK works with every major web framework. Each guide shows where to call `configure()`
and the full integration pattern, end to end:

<CardGroup cols={2}>
  <Card title="React" icon="react" href="/publishers/web/frameworks/react">
    `EncoreProvider` wraps your app; same options as `configure()`, passed as props
  </Card>

  <Card title="Vue" icon="vuejs" href="/publishers/web/frameworks/vue">
    Call `configure()` in the root component's `onMounted` hook
  </Card>

  <Card title="Svelte" icon="s" href="/publishers/web/frameworks/svelte">
    Call `configure()` in the root component's `onMount` hook
  </Card>

  <Card title="Angular" icon="angular" href="/publishers/web/frameworks/angular">
    Wrap the SDK in a root-provided service that configures on construction
  </Card>

  <Card title="Vanilla JS" icon="js" href="/publishers/web/frameworks/vanilla-js">
    No bundler: load the UMD build from a script tag and use the `EncoreSDK` global
  </Card>
</CardGroup>

## Next steps

* **[User Management](./user-management)**: anonymous ids, `identify()`, attributes, `reset()`
* **[Present Offers](./present-offers)**: show offers and handle the result