npm package: @storyfyd/sdk
Description: Interactive stories widget for your websites
Author: Storyfyd
Latest version: 1.1.11

# 🎬 Storyfyd JavaScript SDK

Add Instagram-style stories to your website in 3 simple steps.

## 🚀 Quick Start

### Step 1: Load the SDK

```html
<script src="https://cdn.storyfyd.io/sdk/1.1.10/storyfyd-web.js"></script>
```

> 💡 Aby zawsze korzystać z najnowszej wersji, użyj `https://cdn.storyfyd.io/sdk/latest/storyfyd-web.js`

### Step 2: Add the Widget

```html
<storyfyd-web></storyfyd-web>
```

### Step 3: Initialize

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

**That's it!** Your stories widget is now live. 🎉

## 🔐 Getting Your Token

1. Log in to your [Storyfyd Dashboard](https://storyfyd.io)
2. Go to Settings → Account Managment → SDK
3. Copy your token
4. Use it in the `init()` method

## 📖 Full Example

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Stories</title>
</head>
<body>
    <h1>My Stories</h1>

    <!-- Add the widget -->
    <storyfyd-web></storyfyd-web>

    <!-- Load SDK -->
    <script src="https://cdn.storyfyd.io/sdk/1.1.10/storyfyd-web.js"></script>

    <!-- Initialize -->
    <script>
        const storyfydWeb = document.querySelector('storyfyd-web');
        storyfydWeb.init({
            token: 'YOUR_TOKEN_HERE',
            user: {
                id: 'user123',
                name: 'John Doe',
                email: 'john@example.com'
            },
            layout: {
                view: 'classic',
                style: {
                    width: '100px',
                    height: '100px'
                }
            },
            onReady: () => console.log('Stories loaded!'),
            onStoryOpen: (data) => console.log('Story opened:', data),
            onNoStories: () => console.log('No stories available')
        });
    </script>
</body>
</html>
```

## 🎨 Customization

### Layout

```javascript
storyfydWeb.init({
  token: 'YOUR_TOKEN',
  layout: {
    view: 'classic',        // Currently available: 'classic' (more views coming soon)
    style: {
      width: '120px',       // Circle size
      height: '120px',
    }
  }
});
```

### User Configuration

The `user` object allows you to identify users and pass custom data for tracking, analytics and content personalization:

```javascript
storyfydWeb.init({
  token: 'YOUR_TOKEN',
  user: {
    id: 'user123',           // Required if user object is provided
    name: 'John Doe',        // Optional: any custom field
    email: 'john@example.com', // Optional: any custom field
    plan: 'premium',         // Optional: any custom field
    labels: ['LANG_PL', 'VIP'] // Optional: array of strings
    // ... any other fields you need
  }
});
```

## 📝 Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `token` | `string` | ✅ | Your Storyfyd API token |
| `user` | `object` | ❌ | User object with `id` (required if provided) |
| `debug` | `boolean` | ❌ | Enable debug logging (default: `false`) |
| `testMode` | `boolean` | ❌ | Enable test mode (default: `false`) |
| `layout` | `object` | ❌ | Layout configuration (`view`, `style`) |
| `container` | `string\|Element` | ❌ | CSS selector or DOM element for widget container |
| `onReady` | `function` | ❌ | Callback when widget is ready |
| `onStoryOpen` | `function` | ❌ | Callback when story opens (receives `data`) |
| `onStoryClosed` | `function` | ❌ | Callback when story closes |
| `onStoryChanged` | `function` | ❌ | Callback when story changes (receives `data`) |
| `onInteraction` | `function` | ❌ | Callback on element interaction (receives `data`) |
| `onError` | `function` | ❌ | Callback on error (receives `error`) |
| `onNoStories` | `function` | ❌ | Callback when no stories available |

## 📝 License

MIT

## 🤝 Support

- 📧 Email: contact@storyfyd.com
- 📖 Docs: https://docs.storyfyd.io