> ## Documentation Index
> Fetch the complete documentation index at: https://docs.slidevid.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# TikTok Slideshow Example

> Create engaging slideshow videos with text overlays and custom positioning

## Overview

TikTok Slideshow videos are perfect for storytelling with multiple images or clips, each with custom text overlays. Ideal for product showcases, tutorials, and social media content.

## Basic Slideshow

```javascript theme={null}
const response = await fetch('https://api.slidevid.ai/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: [
      {
        url: 'https://your-cdn.com/product1.jpg',
        mediaId: 'media_001',
        mediaType: 'image',
        duration: 3,
        texts: [
          {
            text: 'New Product Launch',
            fontSize: 16,
            x: 0,
            y: 43.13,
            width: 187,
            height: 36,
            color: '#ffffff',
            textAlign: 'center'
          }
        ],
        isAIGenerated: false
      },
      {
        url: 'https://your-cdn.com/product2.jpg',
        mediaId: 'media_002',
        mediaType: 'image',
        duration: 3,
        texts: [
          {
            text: 'Available Now!',
            x: 0,
            y: 43.13,
            width: 187,
            height: 36,
            fontSize: 36,
            color: '#00ff00'
          }
        ],
        isAIGenerated: false
      }
    ],
    aspectRatio: 'ratio_9_16',
    language: 'en'
  })
});

const data = await response.json();
console.log('Video ID:', data.data.videoId);
console.log('Project ID:', data.data.projectId);
```

## Advanced Slideshow with Avatar and Music

```javascript theme={null}
const createAdvancedSlideshow = async () => {
  const response = await fetch('https://api.slidevid.ai/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 2024',
      script: 'Check out our amazing summer collection. Three new styles, perfect for the season. Get yours today!',
      avatarId: 'avatar_id',
      musicId: 'upbeat_001',
      voiceId: 'tzX5paJ07p5hyWFcU3uG',
      slides: [
        {
          url: 'https://your-cdn.com/summer1.jpg',
          mediaId: 'media_summer_001',
          mediaType: 'image',
          duration: 4,
          texts: [
            {
              text: 'Summer Collection 2024',
              x: 0,
              y: 43.13,
              width: 187,
              height: 36,
              fontSize: 16,
              fontWeight: "600",
              color: "#ffffff",
              backgroundColor: "transparent",
              opacity: 1,
              rotation: 0,
              scale: 1,
              zIndex: 1,
              textAlign: "center",
              fontFamily: "TikTok Display Medium",
              borderRadius: 8,
              padding: 6,
              maxWidth: 80,
              wordWrap: "break-word"
            },
            {
              text: 'Fresh & Stylish',
              x: 0,
              y: 43.13,
              width: 187,
              height: 36,
              fontSize: 28,
              color: '#ffed4e',
              textAlign: 'center'
            }
          ],
          isAIGenerated: false
        },
        {
          url: 'https://your-cdn.com/summer2.jpg',
          mediaId: 'media_summer_002',
          mediaType: 'image',
          duration: 4,
          texts: [
            {
              text: '100% Cotton',
              x: 0,
              y: 43.13,
              width: 187,
              height: 36,
              fontSize: 32,
              color: '#ffffff',
              backgroundColor: '#000000',
              opacity: 0.8
            }
          ],
          isAIGenerated: false
        },
        {
          url: 'https://your-cdn.com/summer3.jpg',
          mediaId: 'media_summer_003',
          mediaType: 'image',
          duration: 4,
          texts: [
            {
              text: 'Shop Now!',
              x: 0,
              y: 43.13,
              width: 187,
              height: 36,
              fontSize: 56,
              fontWeight: '800',
              color: '#000000',
              backgroundColor: '#ffed4e',
              textAlign: 'center',
              borderRadius: 20,
              padding: 25,
              scale: 1.1
            }
          ],
          isAIGenerated: false
        }
      ],
      aspectRatio: 'ratio_9_16',
      language: 'en',
      webhook: 'https://yoursite.com/webhook',
      metadata: {
        campaignId: 'summer-2024',
        collection: 'beachwear',
        variant: 'A'
      }
    })
  });

  return await response.json();
};
```

## Tips for TikTok Slideshows

<Tip>**Keep slides short**: 2-5 seconds per slide works best for engagement</Tip>
<Tip>**Use high-contrast text**: Ensure text is readable on all backgrounds</Tip>
<Tip>**Coordinate positioning**: For 9:16 format, canvas is 1080x1920 pixels</Tip>
<Tip>**Add voiceover**: Scripts with voices increase watch time</Tip>
<Tip>**Layer text properly**: Use zIndex to control text stacking order</Tip>

***

## Canvas Dimensions by Aspect Ratio

When using custom text positioning, remember these canvas sizes:

| Aspect Ratio | Canvas Size | Best For                   |
| ------------ | ----------- | -------------------------- |
| `ratio_9_16` | 1080 x 1920 | TikTok, Reels, Shorts      |
| `ratio_16_9` | 1920 x 1080 | YouTube, horizontal videos |
| `ratio_1_1`  | 1080 x 1080 | Instagram square posts     |

***

## Text Positioning Guide

```javascript theme={null}
// Example: Create a text box in the top-right corner (9:16 format)
{
  x: 580,        // X position from left
  y: 100,        // Y position from top
  width: 400,    // Width in pixels
  height: 200    // Height in pixels
}

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

// Example: Centered text box
{
  x: 290,        // Roughly centered horizontally
  y: 860,        // Roughly centered vertically
  width: 500,
  height: 200
}
```

***

## Styling Examples

### Bold Title Style

```javascript theme={null}
{
  text: 'BOLD ANNOUNCEMENT',
  fontSize: 56,
  fontWeight: '800',
  color: '#ffffff',
  backgroundColor: '#000000',
  textAlign: 'center',
  borderRadius: 10,
  padding: 20,
  opacity: 0.95
}
```

### Subtle Subtitle Style

```javascript theme={null}
{
  text: 'Secondary information',
  fontSize: 28,
  fontWeight: '400',
  color: '#cccccc',
  backgroundColor: 'transparent',
  textAlign: 'center',
  opacity: 0.8
}
```

### Call-to-Action Style

```javascript theme={null}
{
  text: 'CLICK HERE',
  fontSize: 42,
  fontWeight: '700',
  color: '#000000',
  backgroundColor: '#00ff00',
  textAlign: 'center',
  borderRadius: 25,
  padding: 18,
  scale: 1.05
}
```

***

## Common Use Cases

* **Product Launches**: Showcase multiple product angles with descriptions
* **Tutorials**: Step-by-step guides with visual aids
* **Before/After**: Transformations with text explanations
* **Lists**: "Top 5" or "Best of" content with images
* **Stories**: Narrative content with sequential images
* **Testimonials**: Customer reviews with photos

***

## Handling the Webhook Response

```javascript theme={null}
// Express.js webhook handler
app.post('/webhook', (req, res) => {
  const { data, status, message } = req.body;

  if (status === "COMPLETED") {
    const { videoId, status: videoStatus, url, shareUrl } = data;
    console.log('Slideshow completed!');
    console.log('Video ID:', videoId);
    console.log('Download URL:', url);
    console.log('Share URL:', shareUrl);

    // Save to your database, notify team, etc.
  }

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