@encorekit/web-sdk 0.1.1 → 0.1.7

package/examples/svelte/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})
+

package/examples/vanilla-js/README.md

@@ -0,0 +1,271 @@
+# Encore SDK - Vanilla JavaScript Example
+
+This example demonstrates how to integrate the Encore Web SDK into a plain HTML/JavaScript application using a CDN. No build tools or package managers required!
+
+## 🚀 Quick Start
+
+Simply open `index.html` in your web browser:
+
+```bash
+# macOS
+open index.html
+
+# Linux
+xdg-open index.html
+
+# Windows
+start index.html
+```
+
+Or serve it with a local web server:
+
+```bash
+# Using Python
+python -m http.server 8000
+
+# Using Node.js http-server
+npx http-server
+
+# Using PHP
+php -S localhost:8000
+```
+
+Then visit `http://localhost:8000`
+
+## 📁 Project Structure
+
+```
+vanilla-js/
+├── index.html    # Complete standalone HTML file with embedded JavaScript
+└── README.md     # This file
+```
+
+## 🔑 Configuration
+
+Before running the example, replace `'YOUR_API_KEY_HERE'` in `index.html` with your actual Encore API key:
+
+```javascript
+Encore.configure({
+  apiKey: 'YOUR_API_KEY_HERE', // Get this from dashboard.encorekit.com
+  environment: 'production',
+  logLevel: 'debug',
+})
+```
+
+Find this line around line 271 in the `index.html` file.
+
+## 🎯 Features Demonstrated
+
+### 1. Loading SDK from CDN
+The SDK is loaded via a script tag in the HTML:
+
+```html
+<script src="https://encorekit.com/encore.min.js"></script>
+```
+
+### 2. SDK Initialization
+Initialize the SDK when the page loads:
+
+```javascript
+document.addEventListener('DOMContentLoaded', function() {
+  Encore.configure({
+    apiKey: 'YOUR_API_KEY_HERE',
+    environment: 'production',
+    logLevel: 'debug',
+  });
+  
+  const currentUserId = Encore.getCurrentUserId();
+  // Update UI with user ID
+});
+```
+
+### 3. DOM Manipulation
+Direct DOM manipulation for UI updates:
+
+```javascript
+const userId = document.getElementById('userId');
+userId.textContent = currentUserId;
+```
+
+### 4. Event Listeners
+Attach event listeners to buttons:
+
+```javascript
+const identifyBtn = document.getElementById('identifyBtn');
+identifyBtn.addEventListener('click', handleIdentifyUser);
+```
+
+### 5. User Identification
+Identify users with custom IDs:
+
+```javascript
+function handleIdentifyUser() {
+  const customUserId = customUserIdInput.value.trim();
+  Encore.identify(customUserId, {
+    email: 'user@example.com',
+  });
+}
+```
+
+### 6. Presenting Offers
+Display targeted offers:
+
+```javascript
+async function handlePresentOffer() {
+  const result = await Encore.presentOffer();
+  
+  if (result.granted) {
+    console.log('Offer granted!');
+  }
+}
+```
+
+## 🏗️ Vanilla JavaScript Patterns
+
+This example demonstrates:
+
+- **No Build Tools** - Works directly in the browser
+- **CDN Loading** - Load SDK from unpkg CDN
+- **DOM Ready** - Wait for DOM before initializing
+- **Event Delegation** - Proper event listener attachment
+- **Async/Await** - Modern JavaScript async patterns
+- **Error Handling** - Try-catch blocks for SDK operations
+
+## 📦 No Dependencies Required
+
+This example has zero dependencies! Everything you need is:
+- A web browser
+- The `index.html` file
+- An internet connection (to load the SDK from CDN)
+
+## 🔧 CDN Options
+
+You can load the SDK from different CDNs:
+
+### unpkg (Recommended)
+```html
+<script src="https://encorekit.com/encore.min.js"></script>
+```
+
+### jsDelivr
+```html
+<script src="https://encorekit.com/encore.min.js"></script>
+```
+
+### Specific Version
+Lock to a specific version for production:
+```html
+<script src="https://encorekit.com/encore.min.js"></script>
+```
+
+## 💡 Best Practices
+
+1. **Load SDK Before Your Code** - Place the SDK script tag before your application code
+2. **Wait for DOM Ready** - Use `DOMContentLoaded` event to initialize
+3. **Version Pinning** - In production, use a specific version instead of `@latest`
+4. **Error Handling** - Always wrap SDK calls in try-catch blocks
+5. **HTTPS Only** - Serve your site over HTTPS in production
+6. **API Key Security** - Don't commit your API key to version control
+
+## 🎨 Customization
+
+### Using Environment Detection
+
+For different API keys based on environment:
+
+```javascript
+function getApiKey() {
+  const hostname = window.location.hostname;
+  
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    return 'dev-api-key';
+  } else {
+    return 'prod-api-key';
+  }
+}
+
+Encore.configure({
+  apiKey: getApiKey(),
+  environment: 'production',
+});
+```
+
+### Adding Custom Styling
+
+The example includes embedded CSS in the `<style>` tag. You can:
+- Extract styles to a separate CSS file
+- Use your own CSS framework (Bootstrap, Tailwind, etc.)
+- Customize colors and branding
+
+### Using Module Pattern
+
+For better code organization:
+
+```javascript
+const EncoreApp = (function() {
+  let isInitialized = false;
+  
+  function initialize() {
+    Encore.configure({
+      apiKey: 'YOUR_API_KEY_HERE',
+    });
+    isInitialized = true;
+  }
+  
+  async function presentOffer() {
+    if (!isInitialized) {
+      throw new Error('SDK not initialized');
+    }
+    return await Encore.presentOffer();
+  }
+  
+  return {
+    initialize,
+    presentOffer,
+  };
+})();
+
+// Usage
+EncoreApp.initialize();
+await EncoreApp.presentOffer();
+```
+
+## 🌐 Browser Support
+
+This example works in all modern browsers that support:
+- ES6+ JavaScript (async/await, arrow functions, etc.)
+- Promise API
+- Fetch API
+
+Supported browsers:
+- Chrome/Edge 60+
+- Firefox 60+
+- Safari 12+
+- iOS Safari 12+
+
+## 📚 Learn More
+
+- [Encore SDK Documentation](https://docs.encorekit.com)
+- [MDN Web Docs](https://developer.mozilla.org)
+- [unpkg Documentation](https://unpkg.com)
+
+## 🆘 Support
+
+- 📧 Email: admin@encorekit.com
+- 📖 Docs: https://docs.encorekit.com
+
+
+## 💡 Tips
+
+### Debugging
+Open browser console (F12) to see SDK logs when `logLevel: 'debug'` is set.
+
+### CORS Issues
+If you're testing locally and encounter CORS issues, use a local web server instead of opening the file directly.
+
+### Testing Different Users
+Change the user ID in the input field and click "Identify User" to test different user scenarios.
+
+### Offer Targeting
+Make sure you have active offer campaigns in your Encore dashboard with appropriate targeting rules.
+

package/examples/vanilla-js/index.html

@@ -0,0 +1,421 @@
+<!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 JavaScript Example</title>
+  <style>
+    :root {
+      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+      line-height: 1.5;
+      font-weight: 400;
+
+      color-scheme: light dark;
+      color: rgba(255, 255, 255, 0.87);
+      background-color: #242424;
+
+      font-synthesis: none;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      display: flex;
+      place-items: center;
+      min-width: 320px;
+      min-height: 100vh;
+    }
+
+    #app {
+      width: 100%;
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 2rem;
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 3.2em;
+      line-height: 1.1;
+      margin-bottom: 1rem;
+    }
+
+    h2 {
+      font-size: 1.8em;
+      margin-top: 2rem;
+      margin-bottom: 1rem;
+    }
+
+    .card {
+      padding: 2em;
+      background-color: #1a1a1a;
+      border-radius: 8px;
+      margin-bottom: 2rem;
+    }
+
+    .user-info {
+      margin: 1.5rem 0;
+      padding: 1rem;
+      background-color: #2a2a2a;
+      border-radius: 4px;
+      font-family: monospace;
+    }
+
+    .user-info strong {
+      color: #f0db4f;
+    }
+
+    .button-group {
+      display: flex;
+      gap: 1rem;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin: 1.5rem 0;
+    }
+
+    button {
+      border-radius: 8px;
+      border: 1px solid transparent;
+      padding: 0.6em 1.2em;
+      font-size: 1em;
+      font-weight: 500;
+      font-family: inherit;
+      background-color: #1a1a1a;
+      cursor: pointer;
+      transition: border-color 0.25s;
+    }
+
+    button:hover {
+      border-color: #f0db4f;
+    }
+
+    button:focus,
+    button:focus-visible {
+      outline: 4px auto -webkit-focus-ring-color;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    button:disabled:hover {
+      border-color: transparent;
+    }
+
+    .primary {
+      background-color: #f0db4f;
+      color: #323330;
+    }
+
+    .primary:hover {
+      background-color: #e5d049;
+      border-color: #e5d049;
+    }
+
+    .success {
+      background-color: #059669;
+      color: white;
+    }
+
+    .success:hover {
+      background-color: #047857;
+      border-color: #047857;
+    }
+
+    .status {
+      margin: 1rem 0;
+      padding: 0.8rem;
+      border-radius: 4px;
+      font-size: 0.9em;
+      display: none;
+    }
+
+    .status.visible {
+      display: block;
+    }
+
+    .status.info {
+      background-color: #1e40af;
+      color: white;
+    }
+
+    .status.success {
+      background-color: #059669;
+      color: white;
+    }
+
+    .status.error {
+      background-color: #dc2626;
+      color: white;
+    }
+
+    .input-group {
+      margin: 1rem 0;
+      text-align: left;
+    }
+
+    .input-group label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: 500;
+    }
+
+    .input-group input {
+      width: 100%;
+      padding: 0.6em;
+      border-radius: 4px;
+      border: 1px solid #444;
+      background-color: #1a1a1a;
+      color: inherit;
+      font-size: 1em;
+      font-family: inherit;
+    }
+
+    .input-group input:focus {
+      outline: 2px solid #f0db4f;
+      border-color: #f0db4f;
+    }
+
+    code {
+      background-color: #2a2a2a;
+      padding: 0.2em 0.4em;
+      border-radius: 3px;
+      font-family: monospace;
+      font-size: 0.9em;
+    }
+
+    pre {
+      text-align: left;
+      background-color: #1a1a1a;
+      padding: 1rem;
+      border-radius: 4px;
+      overflow-x: auto;
+      margin: 1rem 0;
+    }
+
+    @media (prefers-color-scheme: light) {
+      :root {
+        color: #213547;
+        background-color: #ffffff;
+      }
+      
+      button {
+        background-color: #f9f9f9;
+      }
+      
+      .card {
+        background-color: #f9f9f9;
+      }
+      
+      .user-info {
+        background-color: #efefef;
+      }
+      
+      .input-group input {
+        background-color: #ffffff;
+        border-color: #ccc;
+      }
+      
+      code {
+        background-color: #efefef;
+      }
+      
+      pre {
+        background-color: #f5f5f5;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <h1>🎯 Encore SDK</h1>
+    <p>Vanilla JavaScript Example</p>
+
+    <div class="card">
+      <h2>SDK Status</h2>
+      <div class="user-info">
+        <strong>Status:</strong> <span id="sdkStatus">Not Initialized</span>
+        <br />
+        <strong>User ID:</strong> <span id="userId">Not set</span>
+      </div>
+
+      <div id="status" class="status"></div>
+    </div>
+
+    <div class="card">
+      <h2>User Identification</h2>
+      <div class="input-group">
+        <label for="customUserId">Custom User ID:</label>
+        <input
+          id="customUserId"
+          type="text"
+          placeholder="Enter user ID (e.g., user-123)"
+          disabled
+        />
+      </div>
+      <button id="identifyBtn" class="primary" disabled>
+        Identify User
+      </button>
+    </div>
+
+    <div class="card">
+      <h2>Present Offer</h2>
+      <p>Click the button below to display an offer to the user.</p>
+      <button id="presentOfferBtn" class="success" disabled>
+        🎁 Present Offer
+      </button>
+    </div>
+
+    <div class="card">
+      <h2>Code Example</h2>
+      <pre>// Load SDK via CDN
+&lt;script src="https://encorekit.com/encore.min.js"&gt;&lt;/script&gt;
+
+// Get SDK instance (UMD export uses .default)
+const EncoreSDK = Encore.default || Encore;
+
+// Initialize SDK
+EncoreSDK.configure({
+  apiKey: 'your-api-key',
+  userId: 'user-123',
+  environment: 'production',
+})
+
+// Identify user
+EncoreSDK.identify('user-123', {
+  email: 'user@example.com'
+})
+
+// Present offer
+const result = await EncoreSDK.presentOffer()
+if (result.granted) {
+  console.log('Offer granted!')
+}</pre>
+    </div>
+  </div>
+
+  <!-- Load Encore SDK from CDN -->
+  <script src="https://encorekit.com/encore.min.js"></script>
+
+  <script>
+    // Wait for DOM to be ready
+    document.addEventListener('DOMContentLoaded', function() {
+      // Get DOM elements
+      const sdkStatus = document.getElementById('sdkStatus');
+      const userId = document.getElementById('userId');
+      const statusDiv = document.getElementById('status');
+      const customUserIdInput = document.getElementById('customUserId');
+      const identifyBtn = document.getElementById('identifyBtn');
+      const presentOfferBtn = document.getElementById('presentOfferBtn');
+
+      let isInitialized = false;
+
+      // Helper function to show status messages
+      function showStatus(message, type) {
+        statusDiv.textContent = message;
+        statusDiv.className = 'status visible ' + type;
+        
+        // Auto-hide after 5 seconds for success messages
+        if (type === 'success' || type === 'info') {
+          setTimeout(function() {
+            statusDiv.classList.remove('visible');
+          }, 5000);
+        }
+      }
+
+      // Initialize SDK
+      function initializeSDK() {
+        try {
+          // Check if Encore SDK is loaded
+          if (typeof Encore === 'undefined') {
+            throw new Error('Encore SDK not loaded');
+          }
+
+          // Get the SDK instance (UMD export uses .default)
+          var EncoreSDK = Encore.default || Encore;
+
+          // Configure the SDK
+          EncoreSDK.configure({
+            apiKey: 'ENCORE_PUBLIC_API_KEY', // Replace with your actual API key
+            userId: 'test-vanilla-js',
+            environment: 'production',
+            logLevel: 'debug',
+          });
+
+          // Get current user ID
+          const currentUserId = EncoreSDK.getCurrentUserId();
+          userId.textContent = currentUserId || 'Not set';
+          
+          // Update UI
+          isInitialized = true;
+          sdkStatus.textContent = '✓ Initialized';
+          customUserIdInput.disabled = false;
+          identifyBtn.disabled = false;
+          presentOfferBtn.disabled = false;
+          
+          showStatus('Encore SDK initialized successfully!', 'success');
+        } catch (error) {
+          showStatus('Failed to initialize SDK: ' + error.message, 'error');
+        }
+      }
+
+      // Identify user
+      function handleIdentifyUser() {
+        const customUserId = customUserIdInput.value.trim();
+        
+        if (!customUserId) {
+          showStatus('Please enter a user ID', 'error');
+          return;
+        }
+
+        try {
+          var EncoreSDK = Encore.default || Encore;
+          EncoreSDK.identify(customUserId, {
+            email: 'user@example.com',
+          });
+          
+          userId.textContent = customUserId;
+          showStatus('User identified as: ' + customUserId, 'success');
+        } catch (error) {
+          showStatus('Failed to identify user: ' + error.message, 'error');
+        }
+      }
+
+      // Present offer
+      async function handlePresentOffer() {
+        showStatus('Presenting offer...', 'info');
+
+        try {
+          var EncoreSDK = Encore.default || Encore;
+          const result = await EncoreSDK.presentOffer();
+          
+          if (result.granted) {
+            showStatus('Offer granted successfully!', 'success');
+          } else {
+            showStatus('Offer not granted: ' + JSON.stringify(result.reason), 'info');
+          }
+        } catch (error) {
+          showStatus('Failed to present offer: ' + error.message, 'error');
+        }
+      }
+
+      // Attach event listeners
+      identifyBtn.addEventListener('click', handleIdentifyUser);
+      presentOfferBtn.addEventListener('click', handlePresentOffer);
+
+      // Initialize SDK when page loads
+      initializeSDK();
+    });
+  </script>
+</body>
+</html>
+