Integration Guide

Import the SDK and render stories directly in your React or vanilla JavaScript app.

import { renderStory } from "wrapped-story-sdk";

// Your story data
const storyData = {
  version: "1.0",
  slides: [
    {
      id: "1",
      type: "stat",
      title: "Your Activity",
      stats: { "Tasks Completed": 42 }
    }
  ]
};

// Render the story
renderStory({
  elementId: "wrapped-container",
  storyData,
  theme: {
    colors: {
      primary: "#10B981",
      background: "#111827"
    }
  }
});

Embed stories using an iframe by passing your data URL as a query parameter.

<iframe
  src="https://yourapp.vercel.app/story?dataUrl=https://api.yourapp.com/story.json"
  width="100%"
  height="600"
  style="border: none; border-radius: 12px; max-width: 500px;"
  title="Wrapped Story"
></iframe>

Your story data should follow this structure:

{
  "version": "1.0",
  "slides": [
    {
      "id": "1",
      "type": "image",
      "title": "Welcome!",
      "description": "Your quarterly recap",
      "imageUrl": "https://example.com/hero.jpg"
    },
    {
      "id": "2",
      "type": "stat",
      "title": "Your Metrics",
      "description": "You've been productive!",
      "stats": {
        "Tasks Completed": 42,
        "Projects Launched": 5
      }
    },
    {
      "id": "3",
      "type": "summary",
      "title": "That's Your Quarter!",
      "description": "Keep up the great work!"
    }
  ],
  "theme": {
    "colors": {
      "primary": "#10B981",
      "secondary": "#3B82F6",
      "background": "#111827",
      "text": "#FFFFFF"
    },
    "fontFamily": "Inter, sans-serif",
    "transitionStyle": "fade",
    "borderRadius": "1.5rem"
  }
}