TikTok Slideshow Example

const response = await fetch('https://api.hooked.so/v1/project/create/tiktok-slideshow', {
  method: 'POST',
  headers: {
    'x-api-key': process.env.HOOKED_API_KEY,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Product Showcase',
    slides: [
      {
        media: 'clxmedia0001',
        texts: [
          {
            text: 'New Product Launch',
            x: 90,
            y: 860,
            width: 900,
            height: 200,
            fontSize: 80
          }
        ]
      },
      {
        media: 'clxmedia0002',
        duration: 4,
        texts: [
          {
            text: 'Available Now!',
            x: 140,
            y: 1500,
            width: 800,
            height: 180,
            fontSize: 72
          }
        ]
      }
    ],
    webhook: 'https://yoursite.com/hooked-webhook?token=YOUR_SECRET'
  })
});

const { data } = await response.json();
console.log('Project ID:', data.projectId); // follow it with GET /v1/project/{projectId}

const createNarratedSlideshow = async () => {
  const response = await fetch('https://api.hooked.so/v1/project/create/tiktok-slideshow', {
    method: 'POST',
    headers: {
      'x-api-key': process.env.HOOKED_API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      name: 'Summer Collection',
      script: 'Check out our summer collection. Three new styles, perfect for the season. Get yours today!',
      avatarId: '1',
      language: 'en',
      musicId: '1',
      aspectRatio: 'ratio_9_16',
      slides: [
        {
          media: 'clxmedia0003',
          duration: 4,
          texts: [
            {
              text: 'Summer Collection',
              x: 100,
              y: 150,
              width: 880,
              height: 160,
              fontSize: 96
            },
            {
              text: 'Fresh & Stylish',
              x: 200,
              y: 340,
              width: 680,
              height: 120,
              fontSize: 64
            }
          ]
        },
        {
          media: 'clxmedia0004',
          duration: 4,
          texts: [
            {
              text: '100% Premium Cotton',
              x: 150,
              y: 1400,
              width: 780,
              height: 140,
              fontSize: 72
            }
          ]
        },
        {
          media: 'clxmedia0005',
          duration: 4,
          texts: [
            {
              text: 'Shop Now!',
              x: 200,
              y: 1600,
              width: 680,
              height: 180,
              fontSize: 112
            }
          ]
        }
      ],
      webhook: 'https://yoursite.com/hooked-webhook?token=YOUR_SECRET',
      metadata: {
        campaignId: 'summer-collection',
        variant: 'A'
      }
    })
  });

  return await response.json();
};

async function waitForVideo(projectId) {
  while (true) {
    const res = await fetch(`https://api.hooked.so/v1/project/${projectId}`, {
      headers: { 'x-api-key': process.env.HOOKED_API_KEY }
    });
    const { data } = await res.json();

    if (data.video?.status === 'COMPLETED') return data.video.url;
    if (data.status === 'failed' || data.video?.status === 'FAILED') {
      throw new Error(data.video?.message || data.message || 'Video failed');
    }

    await new Promise((resolve) => setTimeout(resolve, 15000)); // every ~15 s
  }
}

// Top-right corner (9:16 canvas, 1080 x 1920)
{
  x: 580,        // from the left edge
  y: 100,        // from the top edge
  width: 400,
  height: 200
}

// Full-width text near the bottom
{
  x: 100,
  y: 1650,
  width: 880,
  height: 150
}

// Centered box
{
  x: 290,        // (1080 - 500) / 2
  y: 860,        // (1920 - 200) / 2
  width: 500,
  height: 200
}

// Express.js webhook handler
app.post('/hooked-webhook', express.json(), (req, res) => {
  if (req.query.token !== process.env.HOOKED_WEBHOOK_TOKEN) {
    return res.status(401).send('Unauthorized');
  }

  const { status, message, data } = req.body;
  const { videoId, projectId, url, metadata } = data;

  if (status === 'COMPLETED') {
    console.log('Video ready:', url, 'project:', projectId, 'video:', videoId);
    console.log('Your metadata:', metadata);
    // Save to your database, notify team, etc.
  } else if (status === 'FAILED' && videoId === null) {
    console.error('Project failed before it rendered:', projectId, message);
  } else if (status === 'FAILED') {
    console.error('Render failed:', projectId, videoId, message);
  }

  res.status(200).send('OK');
});