# 📚 Storyfyd Integrations

This SDK can be integrated into various web frameworks and platforms.

## 🌐 Available Integrations

### 1. **Vanilla JavaScript** (Web Component)
The easiest way to add Storyfyd to any website.

📖 [Web Component Documentation](./WEB-COMPONENT-API.md)
📄 [Main README](./README.md)

### 2. **React**
React component and hooks for easy integration.

📖 [React Documentation](./README-REACT.md)
📦 Components: `src/react/`
💡 Example: `examples/react-example.html`

### 3. **Other Frameworks**
Coming soon:
- Vue.js
- Angular
- Svelte
- Next.js
- Remix

## 🚀 Quick Comparison

### Vanilla JS (Web Component)
```html
<storyfyd-web></storyfyd-web>

<script>
  storyfydWeb.init({
    token: 'YOUR_TOKEN'
  });
</script>
```

### React
```jsx
import { StoryfydWidget } from './react/StoryfydWidget';

<StoryfydWidget
  token="YOUR_TOKEN"
  onReady={() => console.log('Ready!')}
/>
```

## 📂 Project Structure

```
storyfyd-sdk/
├── src/
│   ├── storyfyd-web.js       # Web Component implementation
│   ├── react/                 # React integration
│   │   ├── StoryfydWidget.jsx
│   │   ├── useStoryfyd.js
│   │   └── index.js
│   └── iframe/                # Internal iframe app
├── examples/
│   ├── react-example.html     # React example
│   └── ...
├── README.md                  # Main documentation
├── README-REACT.md           # React documentation
└── WEB-COMPONENT-API.md      # Web Component API
```

## 🎯 Which Integration Should I Use?

### Use **Web Component** if:
- ✅ You're using vanilla JavaScript
- ✅ You want the simplest integration
- ✅ You're using any framework that supports web components
- ✅ You want maximum compatibility

### Use **React** if:
- ✅ You're building a React app
- ✅ You want type-safe props
- ✅ You want lifecycle management
- ✅ You want hooks for programmatic control

## 🔧 Building Your Own Integration

The SDK is built as a Web Component, which means it can be used in any framework. To create a wrapper for your framework:

1. Include the SDK script
2. Create a wrapper component that:
   - Renders `<storyfyd-web>` element
   - Calls `.init()` on mount
   - Handles cleanup on unmount
3. (Optional) Create hooks for state management

See `src/react/StoryfydWidget.jsx` for reference implementation.

## 📝 Examples

All examples are in the `examples/` directory:
- `react-example.html` - React integration
- More coming soon...

## 🤝 Contributing

Want to create an integration for your favorite framework? We welcome contributions!

1. Fork the repository
2. Create your integration in `src/[framework]/`
3. Add an example in `examples/`
4. Update this file
5. Submit a PR

## 📄 License

Same as the main Storyfyd SDK.