> ## 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.

# Svelte

> Integrate the Encore Web SDK in a Svelte app: configure() in the root component's onMount, identify() on login, show() from event handlers.

The SDK is framework-agnostic — in Svelte you call it directly. Configure once in the root
component's `onMount`, then present offers from event handlers.

## Install

```bash theme={null}
npm install @encorekit/web-sdk
```

## Configure on mount

```svelte theme={null}
<!-- App.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import Encore from '@encorekit/web-sdk';

  onMount(() => {
    Encore.configure({ apiKey: import.meta.env.VITE_ENCORE_API_KEY });
  });
</script>
```

`configure()` honors only its first successful call — full options in the
[`configure()` reference](/publishers/web/sdk-reference/configure).

## Identify and present offers

```svelte theme={null}
<script lang="ts">
  import Encore from '@encorekit/web-sdk';

  // After login:
  Encore.identify(user.id); // replaces the auto-generated anonymous UUID

  async function onCancelClicked() {
    const result = await Encore.placement('cancel_flow').show(); // never rejects
    if (result.status !== 'claimed') {
      proceedWithCancellation(); // 'dismissed' or 'unavailable' — continue your flow
    }
  }
</script>

<button on:click={onCancelClicked}>Cancel subscription</button>
```

## Next steps

* [Redemption Modes](/publishers/web/guides/redemption-modes) — deferred vs immediate claim flows
* [Thank-You Layout](/publishers/web/guides/thank-you-layout) — post-purchase placements
* [`show()`](/publishers/web/sdk-reference/show) — the full `ShowResult` contract