# π¬ Storyfyd JavaScript SDK
Add Instagram-style stories to your website in 3 simple steps.
## π Quick Start
### Step 1: Load the SDK
```html
```
> π‘ Aby zawsze korzystaΔ z najnowszej wersji, uΕΌyj `https://cdn.storyfyd.io/sdk/latest/storyfyd-web.js`
### Step 2: Add the Widget
```html
```
### Step 3: Initialize
```html
```
**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
My Stories
My Stories
```
## π¨ 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