🎬 Storyfyd SDK v2.0

Iframe Architecture Demo

✅ SDK Loaded

🏗️ Architecture Overview

┌─────────────────────────────────────────────┐ │ Client Page (this demo) │ │ │ ────────────────────┘

🎯 Live Widget Demo

Story circles will appear below (loaded from API):

📊 Event Log

Waiting for events...

💻 Integration Code

Simple Web Component Integration

<!-- Load the SDK --> <script src="https://cdn.storyfyd.com/sdk/storyfyd-web.js"></script> <!-- Add the widget --> <storyfyd-web></storyfyd-web> <script> const storyfydWeb = document.querySelector('storyfyd-web'); storyfydWeb.init({ token: 'YOUR_TOKEN', apiBaseUrl: 'https://api.storyfyd.com', debug: true, layout: { view: 'classic', style: { width: '80px', height: '80px' } }, onReady: () => console.log('Ready!'), onStoryOpen: (data) => console.log('Story opened', data), onStoryClosed: () => console.log('Story closed'), onStoryChanged: (data) => console.log('Story changed', data), onInteraction: (data) => console.log('Interaction', data), onError: (error) => console.error('Error', error) }); </script>

📚 API Reference

// Get the element const storyfydWeb = document.querySelector('storyfyd-web'); // Initialize storyfydWeb.init(config); // Destroy storyfydWeb.destroy();