Storyfyd SDK Demo

🎯 Storyfyd Widget Demo

Click on the story circle below to see it in action! Opens fullscreen story viewer with background media.

✅ Widget Loaded & Ready

📋 How it works

1. Story Circle: Shows animated gradient ring with background preview

2. Click to Open: Fullscreen story viewer with background media

3. Navigation: ESC to close, arrow keys for future navigation

4. Responsive: Works on desktop, tablet, and mobile devices

🔗 Integration Example

<!-- Add to your HTML -->
<script src="/storyfyd-sdk.js"></script>
<storyfyd-web></storyfyd-web>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const storyfydWeb = document.querySelector('storyfyd-web');
    storyfydWeb.init({
      token: '<YOUR_TOKEN_HERE>',
      debug: true  // Enable debug for demo
    });
  });
</script>
            

💻 Integration Code

🎯 Basic Integration

<!-- Add to your HTML -->
<script src="/storyfyd-sdk.js"></script>
<storyfyd-web></storyfyd-web>

<script>
  const widget = document.querySelector('storyfyd-web');
  widget.init({
    token: 'YOUR_TOKEN_HERE'
  });
</script>
                    

⚙️ Advanced Configuration

<script>
  widget.init({
    token: 'YOUR_TOKEN',
    apiBaseUrl: 'https://your-api.com',
    debug: true,
    templatePath: '/custom/path.json'
  });
</script>
                    