Skip to main content
New to Encore? We recommend starting with our Getting Started Guide which walks you through account creation and guided setup via the Dashboard. This page is for developers who need detailed installation instructions or advanced configuration.

​
Overview

The Encore Web SDK is a lightweight JavaScript/TypeScript library that enables web applications to display targeted offers and track entitlements. It’s framework-agnostic and works with React, Vue, Angular, Svelte, vanilla JavaScript, or any web framework.

​
Prerequisites: Obtain Access Credentials

Before installing the SDK, you need to obtain your API key from the Encore Dashboard.
Don’t have credentials? Visit dashboard.encorekit.com to create an account, add your app, and receive your API key automatically.
You’ll need:
  • API Key: Your public API key (starts with pk_...) provided through the Dashboard
The Dashboard provides a guided setup experience that walks you through each step of the integration process. For a complete overview, see our Getting Started Guide.

​
Installation Options

Choose your preferred installation method:
  • npm
  • yarn
  • pnpm
  • CDN (Vanilla JS)
npm install @encorekit/web-sdk

​
Verify Installation

After installation, verify the SDK is accessible:
  • ES Modules
  • CommonJS
  • CDN
import Encore from '@encorekit/web-sdk';

console.log('Encore SDK version:', Encore.getVersion());
✅ Installation complete!

​
Browser Compatibility

The Encore Web SDK supports modern browsers:
  • Chrome/Edge: Last 2 versions
  • Firefox: Last 2 versions
  • Safari: Last 2 versions
  • iOS Safari: 15+
  • Android Chrome: Last 2 versions
Technical Requirements:
  • ES2022 support (native, no polyfills needed)
  • localStorage support (with fallback to sessionStorage)
  • fetch API support
  • Modern JavaScript features (async/await, Promises)

​
Next Steps

Now that the SDK is installed, continue with the integration: For framework-specific integration patterns, see the Framework Integration Guide.

​
Advanced Topics

The SDK includes TypeScript type definitions out of the box. No additional configuration is needed.
import Encore, { type EntitlementType, type PresentationResult } from '@encorekit/web-sdk';

// Types are automatically available
const entitlement: EntitlementType = { type: 'freeTrial' };
const result: PresentationResult = await Encore.presentOffer();
Import types explicitly:
import type {
  EntitlementType,
  EntitlementScope,
  PresentationResult,
  UserAttributes,
  EncoreConfig
} from '@encorekit/web-sdk';
The SDK works out of the box with Webpack. For optimal bundle sizes, ensure tree-shaking is enabled:
webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false
  }
};
The SDK works seamlessly with Vite. No additional configuration needed:
vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  // Encore SDK works automatically
});
If you use Content Security Policy, add these directives:
<meta http-equiv="Content-Security-Policy" content="connect-src 'self' https://svc.joinyaw.com; script-src 'self' https://encorekit.com;">
For CDN installations, allow the encorekit.com domain. For API calls, allow the Encore API domain.
The Encore Web SDK is optimized for performance:
  • Total size: Less than 50KB gzipped
  • Tree-shakeable: Only import what you use
  • No dependencies: Zero external dependencies
  • Lazy-loadable: Can be loaded dynamically
Dynamic import for code splitting:
// Load SDK only when needed
const loadEncore = async () => {
  const { default: Encore } = await import('@encorekit/web-sdk');
  return Encore;
};

// Use in your app
const Encore = await loadEncore();
Encore.configure({ apiKey: 'your-key', userId: 'user-123' });
The SDK automatically handles offline scenarios:
  • Grant signals are queued in localStorage when offline
  • Signals are sent automatically when connectivity is restored
  • Exponential backoff for retries (maximum 3 attempts)
  • No configuration needed - works automatically