User Onboarding
Personalized welcome ({{userName}}) with one scene per first-week step.
- Type
- Video
- Format
- Instagram Post · 1:1
- Orientation
- Square
- Duration
- 15.4s
- Scenes
- 5
- Render cost
- $0.00385 / render
Template ID
saas-onboardingLibrary identifier. Saved API templates have a separate ID starting with tpl_.
VariablesData-driven repeatConditional scenes
Open in editor
Free template · opens in the editor, no account required.
Customize User Onboarding
User Onboarding is a ready-to-render SaaS / dev tools video design formatted for Instagram Post · 1:1 with 5 scenes and support for variables, data-driven repeat, conditional scenes. Open it in the editor to replace its copy and media, then render variations through the Zvid API.
9 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.
productNameTextFlowdesk
userNameTextSarah
workspaceNameTextAcme Design Team
welcomeLineTextYour workspace is ready. Here's how to win your first week:
ctaTextTextOpen your workspace
supportNoteTextQuestions? Reply to any of our emails — a human answers.
showSupportToggleon
stepsList · 3num1
titleImport your projects
detailDrag in Trello, Asana or a CSV — we keep every deadline.
num2
titleInvite two teammates
detailFlowdesk clicks when your team plans in one place.
num3
titleTurn on Smart Snooze
detailProtect your focus hours from day one.
musicUrlMedia URLThe exact JSON payload
This is the full render config — POST it to the API, or open it in the editor to tweak.
{
"name": "saas-onboarding",
"resolution": "instagram-post",
"frameRate": 30,
"backgroundColor": "#F6F7FB",
"outputFormat": "mp4",
"variables": {
"productName": "Flowdesk",
"userName": "Sarah",
"workspaceName": "Acme Design Team",
"welcomeLine": "Your workspace is ready. Here's how to win your first week:",
"ctaText": "Open your workspace",
"supportNote": "Questions? Reply to any of our emails — a human answers.",
"showSupport": true,
"steps": [
{
"num": "1",
"title": "Import your projects",
"detail": "Drag in Trello, Asana or a CSV — we keep every deadline."
},
{
"num": "2",
"title": "Invite two teammates",
"detail": "Flowdesk clicks when your team plans in one place."
},
{
"num": "3",
"title": "Turn on Smart Snooze",
"detail": "Protect your focus hours from day one."
}
],
"musicUrl": "https://cdn.pixabay.com/audio/2026/02/24/audio_3f375fdf97.mp3"
},
"scenes": [
{
"id": "welcome",
"duration": 4,
"backgroundColor": "#F6F7FB",
"transition": "smoothleft",
"transitionId": "step",
"transitionDuration": 0.5,
"visuals": [
{
"type": "SVG",
"width": 1080,
"height": 1080,
"track": 0,
"enterBegin": 0,
"exitEnd": 4,
"svg": "<svg width='1080' height='1080' viewBox='0 0 1080 1080' xmlns='http://www.w3.org/2000/svg'><rect width='1080' height='1080' fill='#F6F7FB'/><circle cx='930' cy='150' r='220' fill='rgba(110,139,255,0.12)'/><circle cx='120' cy='960' r='170' fill='rgba(110,139,255,0.09)'/><path d='M370 330 C370 290 400 260 440 260 L640 260 C680 260 710 290 710 330 L710 420 C710 460 680 490 640 490 L500 490 L430 550 L440 490 C400 490 370 460 370 420 Z' fill='#6E8BFF'/><circle cx='480' cy='375' r='12' fill='#F6F7FB'/><circle cx='540' cy='375' r='12' fill='#F6F7FB'/><circle cx='600' cy='375' r='12' fill='#F6F7FB'/></svg>"
},
{
"type": "TEXT",
"x": 540,
"y": 620,
"width": 900,
"anchor": "top-center",
"track": 2,
"enterBegin": 0.25,
"enterEnd": 0.7,
"enterAnimation": "smoothup",
"exitEnd": 4,
"style": {
"fontFamily": "Manrope"
},
"html": "<div style='text-align:center; color:#171C2E; font-size:72px; line-height:1.05; font-weight:800; letter-spacing:-1px;'>Welcome, {{userName}} 👋</div><div style='margin-top:20px; text-align:center; color:#5B6478; font-size:30px; line-height:1.45; font-weight:500;'>{{welcomeLine}}</div>"
},
{
"type": "TEXT",
"x": 540,
"y": 90,
"anchor": "center-center",
"track": 1,
"enterBegin": 0,
"exitEnd": 4,
"style": {
"fontFamily": "Manrope"
},
"html": "<div style='color:#8A93A8; font-size:22px; font-weight:700; letter-spacing:4px;'>{{productName}} · {{workspaceName}}</div>"
}
]
},
{
"id": "step",
"iterate": "steps",
"iterateAs": "step",
"duration": 3.2,
"backgroundColor": "#F6F7FB",
"transition": "smoothleft",
"transitionId": "go",
"transitionDuration": 0.5,
"visuals": [
{
"type": "SVG",
"width": 1080,
"height": 1080,
"track": 0,
"enterBegin": 0,
"exitEnd": 3.2,
"svg": "<svg width='1080' height='1080' viewBox='0 0 1080 1080' xmlns='http://www.w3.org/2000/svg'><rect width='1080' height='1080' fill='#F6F7FB'/><rect x='120' y='300' width='840' height='480' rx='36' fill='#FFFFFF' stroke='rgba(110,139,255,0.35)' stroke-width='2'/><circle cx='300' cy='540' r='96' fill='rgba(110,139,255,0.14)' stroke='#6E8BFF' stroke-width='3'/></svg>"
},
{
"type": "TEXT",
"x": 300,
"y": 540,
"anchor": "center-center",
"track": 2,
"enterBegin": 0.2,
"enterEnd": 0.55,
"enterAnimation": "circleopen",
"exitEnd": 3.2,
"style": {
"fontFamily": "Manrope"
},
"html": "<div style='color:#6E8BFF; font-size:88px; font-weight:800;'>{{step.num}}</div>"
},
{
"type": "TEXT",
"x": 440,
"y": 430,
"width": 460,
"anchor": "top-left",
"track": 3,
"enterBegin": 0.35,
"enterEnd": 0.8,
"enterAnimation": "smoothup",
"exitEnd": 3.2,
"style": {
"fontFamily": "Manrope"
},
"html": "<div style='color:#171C2E; font-size:44px; line-height:1.1; font-weight:800;'>{{step.title}}</div><div style='margin-top:16px; color:#5B6478; font-size:26px; line-height:1.5; font-weight:500;'>{{step.detail}}</div>"
},
{
"type": "TEXT",
"x": 540,
"y": 90,
"anchor": "center-center",
"track": 1,
"enterBegin": 0,
"exitEnd": 3.2,
"style": {
"fontFamily": "Manrope"
},
"html": "<div style='color:#8A93A8; font-size:22px; font-weight:700; letter-spacing:4px;'>GETTING STARTED · {{productName}}</div>"
}
]
},
{
"id": "go",
"duration": 3.8,
"backgroundColor": "#171C2E",
"visuals": [
{
"type": "SVG",
"width": 1080,
"height": 1080,
"track": 0,
"enterBegin": 0,
"exitEnd": 3.8,
"svg": "<svg width='1080' height='1080' viewBox='0 0 1080 1080' xmlns='http://www.w3.org/2000/svg'><defs><radialGradient id='sobEnd' cx='0.5' cy='0.35' r='0.9'><stop offset='0' stop-color='#232B4A'/><stop offset='1' stop-color='#171C2E'/></radialGradient></defs><rect width='1080' height='1080' fill='url(#sobEnd)'/><circle cx='540' cy='330' r='90' fill='rgba(110,139,255,0.16)' stroke='#6E8BFF' stroke-width='3'/><path d='M505 330 L532 358 L585 300' stroke='#6E8BFF' stroke-width='11' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"
},
{
"type": "TEXT",
"x": 540,
"y": 500,
"width": 880,
"anchor": "top-center",
"track": 1,
"enterBegin": 0.25,
"enterEnd": 0.7,
"enterAnimation": "smoothup",
"exitEnd": 3.8,
"style": {
"fontFamily": "Manrope"
},
"html": "<div style='text-align:center; color:#FFFFFF; font-size:56px; line-height:1.12; font-weight:800;'>{{workspaceName}}<br>is waiting for you.</div>"
},
{
"type": "TEXT",
"x": 540,
"y": 730,
"anchor": "top-center",
"track": 2,
"enterBegin": 0.8,
"enterEnd": 1.2,
"enterAnimation": "circleopen",
"exitEnd": 3.8,
"style": {
"fontFamily": "Manrope"
},
"html": "<div style='display:inline-block; background:#6E8BFF; color:#171C2E; border-radius:999px; padding:24px 60px; font-size:32px; font-weight:800;'>{{ctaText}} →</div>"
},
{
"type": "TEXT",
"condition": "{{showSupport}}",
"x": 540,
"y": 900,
"width": 860,
"anchor": "top-center",
"track": 3,
"enterBegin": 1.3,
"enterEnd": 1.7,
"enterAnimation": "fade",
"exitEnd": 3.8,
"style": {
"fontFamily": "Manrope"
},
"html": "<div style='text-align:center; color:#7A84A0; font-size:23px; font-weight:500;'>{{supportNote}}</div>"
}
]
}
],
"audios": [
{
"src": "{{musicUrl}}",
"volume": 0.15,
"track": 0
}
]
}More SaaS / dev tools templates
View all ↗
Ready to ship video at scale?
Start free — your first render is only a JSON payload away.