Skip to main content

​
Installation

No installation needed! Simply include the CDN script: 
<script src="https://encorekit.com/encore.min.js"></script>

​
Complete Setup Example

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Encore SDK - Vanilla JS</title>
  
  <!-- Load Encore SDK from CDN -->
  <script src="https://encorekit.com/encore.min.js"></script>
  
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
    }
    .status {
      padding: 12px;
      margin: 16px 0;
      border-radius: 6px;
    }
    .status-success { background: #d4edda; color: #155724; }
    .status-error { background: #f8d7da; color: #721c24; }
    .status-info { background: #d1ecf1; color: #0c5460; }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 6px;
      background: #007bff;
      color: white;
    }
    button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <h1>🎯 Encore SDK - Vanilla JavaScript</h1>
  
  <div id="status-container"></div>
  
  <p>Status: <span id="init-status">✗ Not Initialized</span></p>
  <p>User ID: <span id="user-id">Not set</span></p>
  
  <button id="present-offer-btn" disabled>🎁 Present Offer</button>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Get SDK instance (UMD export uses .default)
      var EncoreSDK = Encore.default || Encore;
      
      var statusContainer = document.getElementById('status-container');
      var initStatus = document.getElementById('init-status');
      var userIdDisplay = document.getElementById('user-id');
      var presentOfferBtn = document.getElementById('present-offer-btn');
      
      function showStatus(message, type) {
        statusContainer.innerHTML = '<div class="status status-' + type + '">' + message + '</div>';
      }
      
      // Generate or retrieve userId from localStorage
      var storageKey = 'encore_user_id';
      var storedUserId = localStorage.getItem(storageKey);
      
      if (!storedUserId) {
        storedUserId = 'user_' + Math.random().toString(36).substring(2, 15);
        localStorage.setItem(storageKey, storedUserId);
      }
      
      try {
        // Configure SDK
        EncoreSDK.configure({
          apiKey: 'YOUR_API_KEY_HERE',
          userId: storedUserId,
          environment: 'production',
          logLevel: 'debug'
        });
        
        var currentUserId = EncoreSDK.getCurrentUserId();
        userIdDisplay.textContent = currentUserId || 'Not set';
        initStatus.textContent = '✓ Initialized';
        presentOfferBtn.disabled = false;
        showStatus('Encore SDK initialized successfully!', 'success');
      } catch (error) {
        showStatus('Failed to initialize SDK: ' + error.message, 'error');
      }
      
      // Present offer handler
      presentOfferBtn.addEventListener('click', async function() {
        showStatus('Presenting offer...', 'info');
        
        try {
          var result = await EncoreSDK.presentOffer();
          
          if (result.granted) {
            showStatus('Offer granted successfully!', 'success');
          } else {
            showStatus('Offer not granted', 'info');
          }
        } catch (error) {
          showStatus('Failed to present offer: ' + error.message, 'error');
        }
      });
      
      // Identify user example
      function identifyUser(userId) {
        try {
          EncoreSDK.identify(userId, {
            email: 'user@example.com',
            subscriptionTier: 'free'
          });
          userIdDisplay.textContent = userId;
          showStatus('User identified as: ' + userId, 'success');
        } catch (error) {
          showStatus('Failed to identify user: ' + error.message, 'error');
        }
      }
    });
  </script>
</body>
</html>

​
UMD Export Pattern

The CDN version uses UMD module format. Always access the SDK like this: 
const EncoreSDK = Encore.default || Encore;
EncoreSDK.configure({ ... });
The vanilla JavaScript version requires using Encore.default || Encore to handle the UMD module export correctly.

​
Working Example

Full working example: encore-web-sdk/examples/vanilla-js

​
Next Steps