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
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
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
Keep slides short: 2-5 seconds per slide works best for engagement
Use high-contrast text: Ensure text is readable on all backgrounds
Coordinate positioning: For 9:16 format, canvas is 1080x1920 pixels
Add voiceover: Scripts with voices increase watch time
Layer text properly: Use zIndex to control text stacking order
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
// 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
{
text: 'BOLD ANNOUNCEMENT',
fontSize: 56,
fontWeight: '800',
color: '#ffffff',
backgroundColor: '#000000',
textAlign: 'center',
borderRadius: 10,
padding: 20,
opacity: 0.95
}
Subtle Subtitle Style
{
text: 'Secondary information',
fontSize: 28,
fontWeight: '400',
color: '#cccccc',
backgroundColor: 'transparent',
textAlign: 'center',
opacity: 0.8
}
Call-to-Action Style
{
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
// 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');
});