Client Project Demo Video from Prototype to Narrated Walkthrough
A repeatable workflow where you build a working prototype in Lovable, generate a narrated walkthrough video with Synthesia, clip key feature highlights with Reap, and embed a TidyCal booking link so clients can schedule a follow-up call directly from the video.
- Time saved
- Saves 5-10 hrs/week
- Monthly cost
- ~~£105/mo/mo
- Published
Here's the blog post: --- You finished the prototype at 11pm. The client wants to see it tomorrow morning. Now you need to record your screen, narrate the walkthrough without stumbling over your words, edit out the awkward pauses, trim highlight clips for the project channel, and somehow get the client to book a follow-up call instead of disappearing into email silence for a week. For freelancers and small agencies, demo videos are one of those tasks that sound simple but quietly eat three or four hours every time. Screen recording software fights with your microphone. The edit takes twice as long as the recording. You export, upload, paste a link into an email, and then wait. The client watches it four days later, replies with "looks good, let's chat," and another week passes before you actually get on a call. This workflow fixes all of that. You will build a working prototype in Lovable, hand the screen content to Synthesia for a polished narrated walkthrough with a professional avatar, pull out the best feature clips automatically with Reap, and embed a TidyCal scheduling link so the client can book their follow-up call right from the video page. Total active effort once it is set up: about ten minutes per project.
What You'll Build - A repeatable pipeline triggered whenever you finish a prototype in Lovable and are ready for client review.
-
Synthesia generates a narrated walkthrough video from your screen captures and a script, complete with a professional AI presenter.
-
Reap automatically clips the full walkthrough into short feature highlight videos, captioned and ready to share.
-
Every video includes a TidyCal booking link so the client can schedule a call without a single back-and-forth email.
-
Time saved per demo cycle: roughly 3 hours of recording, editing, and scheduling compared to doing it manually.
Prerequisites - A Lovable account (free tier works for simple prototypes; paid plan if your project needs a custom domain or backend integrations).
-
A Synthesia account on the Starter plan or above (you need API access for automation; the free plan only allows manual creation in the browser).
-
A Reap account (check current AppSumo pricing for lifetime deal availability).
-
A TidyCal account with at least one booking page configured for client follow-ups.
-
A Make (formerly Integromat) account on the free tier (three scenarios, 1,000 operations/month) or a paid tier if you run this workflow frequently.
-
Basic comfort with copying and pasting API keys and editing JSON. No coding experience required.
-
Estimated setup time: 40 minutes.
The Automated Workflow
Step 1:
Capture Your Prototype in Lovable Lovable is where you build the prototype itself. Once your app is in a presentable state, you need to capture the screens that will form the basis of your video. Lovable publishes every project to a shareable preview URL automatically. Open your project, click Share, and copy the live URL. You will also want to take full-page screenshots of each key screen. Use your browser's built-in screenshot tool or a simple utility like the browser DevTools device toolbar to capture consistent, clean images. Save your screenshots to a designated folder (a Google Drive or Dropbox folder works well here, as Make can watch it for new files). Name them in sequence: 01-dashboard.png, 02-settings.png, 03-report-view.png. This naming convention matters because Synthesia will present them in alphabetical order. Create a short script for each screen. Keep it to two or three sentences per screen, written as if you are talking directly to the client:
text
01-dashboard.png:
"Here is your project dashboard. You can see active campaigns on the left and performance metrics updating in real time on the right." 02-settings.png:
"The settings panel lets you customise notification preferences and connect your existing CRM. We have pre-configured the most common options based on your brief." 03-report-view.png:
"Reports generate automatically every Monday. You can export to PDF or share a live link with your team."
Save this script as a plain text file (demo-script.txt) in the same folder.
Error handling:
If Lovable's preview URL is not loading, check that the project is set to public sharing. If screenshots fail to upload to your cloud folder, Make will retry the trigger automatically on its next polling interval (typically every 15 minutes on the free plan).
Step 2:
Generate the Narrated Walkthrough with Synthesia This is where the workflow gets interesting. Synthesia turns your screenshots and script into a professional video with an AI avatar narrating each screen. In Make, create a new scenario with a Cloud Storage trigger (Google Drive or Dropbox) that watches your demo folder for new files. When it detects your script file, it fires the next module. The Make HTTP module sends a request to the Synthesia API to create a video:
json
POST https://api.synthesia.io/v2/videos
Headers: Authorization: Bearer YOUR_SYNTHESIA_API_KEY Content-Type: application/json Body:
{ "title": "Client Demo - Project Alpha", "description": "Automated walkthrough generated from prototype", "visibility": "private", "test": false, "input": [ { "scriptText": "Here is your project dashboard. You can see active campaigns on the left and performance metrics updating in real time on the right.", "avatar": "anna_costume1_cameraA", "background": "https://your-cloud-storage.com/demos/01-dashboard.png" }, { "scriptText": "The settings panel lets you customise notification preferences and connect your existing CRM.", "avatar": "anna_costume1_cameraA", "background": "https://your-cloud-storage.com/demos/02-settings.png" }, { "scriptText": "Reports generate automatically every Monday. You can export to PDF or share a live link with your team.", "avatar": "anna_costume1_cameraA", "background": "https://your-cloud-storage.com/demos/03-report-view.png" } ]
}
Synthesia returns a video ID immediately, but rendering takes a few minutes. Add a polling loop in Make: use a delay module (wait 60 seconds) followed by an HTTP GET request to check the status:
json
GET https://api.synthesia.io/v2/videos/{video_id}
Headers: Authorization: Bearer YOUR_SYNTHESIA_API_KEY
When the response status changes to "complete", the download field contains your video URL. Pass this URL to the next step.
Error handling:
If the API returns a 429 (rate limit), configure Make's retry settings to wait 120 seconds and try again up to three times. If rendering fails (status "error"), set up a Make error handler that sends you a notification via email or Slack with the video ID so you can investigate.
Step 3:
Clip Feature Highlights with Reap A five-minute walkthrough is great for a thorough review, but clients also appreciate short, focused clips they can share with their own team. Reap handles this automatically. Once your Synthesia video is ready, upload it to Reap. If Reap supports direct URL imports, you can pass the Synthesia download URL directly. Otherwise, add an intermediate step in Make to download the video file and then upload it via Reap's interface. In your Make scenario, add an HTTP module after the Synthesia polling step:
json
POST https://api.[reap](/tools/reap).so/v1/videos
Headers: Authorization: Bearer YOUR_REAP_API_KEY Content-Type: application/json Body:
{ "source_url": "https://synthesia-downloads.com/your-video-file.mp4", "auto_clip": true, "caption_style": "bold_white", "max_clips": 3, "clip_duration_range": { "min_seconds": 15, "max_seconds": 45 }
}
Reap analyses the video and automatically identifies the most engaging segments, adds captions, and produces short clips. These are perfect for sending in a project Slack channel or attaching to an email alongside the full video.
Note:
Confirm Reap's current API availability, as some features may require using their web dashboard rather than a direct API call. If API access is not available, you can manually upload the Synthesia output to Reap's dashboard; the clipping and captioning still saves significant time.
Error handling:
If the source URL expires before Reap can fetch it, download the Synthesia video to cloud storage first and use that permanent URL instead.
Step 4:
Embed the TidyCal Booking Link The final piece is making sure the client can act immediately after watching. Instead of ending with "let us know what you think," you give them a direct link to book a follow-up call. In TidyCal, create a booking type specifically for demo follow-ups. Set the duration to 30 minutes and configure your availability windows. Copy the booking page URL:
text
https://tidycal.com/yourusername/demo-followup
Now embed this link in two places: 1.
In the Synthesia video description.
When creating the video in Step 2, update the description field:
json
"description": "Walkthrough of your project prototype. Book your follow-up call here: https://tidycal.com/yourusername/demo-followup"
In the delivery email or message.
Add a Make module at the end of your scenario that sends an email (using the built-in Email module or a Gmail integration) with the video link and the booking link:
text
Subject: Your Project Demo is Ready Hi {{client_name}}, Your prototype walkthrough is ready to view:
{{synthesia_video_url}} When you are ready to discuss next steps, book a 30-minute call here:
https://tidycal.com/yourusername/demo-followup Talk soon,
{{your_name}}
Error handling:
TidyCal links are static, so there is little that can go wrong here. If you want to track whether the client clicked the booking link, use a UTM parameter: https://tidycal.com/yourusername/demo-followup?utm_source=demo&utm_campaign={{project_name}}.
The Manual Alternative
If you prefer to keep things hands-on while you test this workflow, here is the simplified version. Build your prototype in Lovable as usual. Take screenshots manually and write your script in a simple text document. Then log into Synthesia directly, create a new video, upload each screenshot as a scene background, paste in your script lines, and hit render. This takes about 15 minutes of active work. Once the video is ready, download it and upload it to Reap through their web interface. Select the auto-clip option, choose your caption style, and let it process. Copy the resulting clips and the full video link. Finally, paste your TidyCal booking link into whatever message you send the client: email, Slack, or a project management tool comment. The manual version takes roughly 30 to 40 minutes per demo compared to about 10 minutes of active setup with the automated version. Start here to validate the workflow before investing time in the Make scenario.
Pro Tips -
Pick one Synthesia avatar and stick with it.
Clients find it easier to follow a series of demos when the same presenter appears each time.
It builds a subtle sense of consistency across your projects.
Keep your narration script under 100 words per screen.
Synthesia charges by the minute of rendered video, and clients lose attention after about four minutes. Shorter scripts save money and hold attention.
-
Set Make's polling interval to 2 minutes for the Synthesia render check. Polling every 15 seconds wastes operations on your Make plan. Most Synthesia videos under 5 minutes render in 3 to 8 minutes, so a 2-minute check interval is frequent enough.
-
Store API keys in Make's built-in key vault, not hardcoded in HTTP modules. This keeps credentials in one place and makes key rotation straightforward when you need to update them.
-
Add a Slack notification module at the end of your Make scenario. A simple message to your project channel ("Demo video for {{project_name}} is ready: {{video_url}}") keeps your team informed without anyone needing to check manually.
Batch your demos.
If you have multiple prototypes to present in the same week, trigger all the Synthesia renders at once and let them process in parallel. This avoids hitting the API repeatedly throughout the week and lets you review all the outputs in one sitting.
Cost Breakdown
| Tool | Plan Needed | Monthly Cost | What You Get |
|---|---|---|---|
| Lovable | Free | £0 | Prototype hosting and shareable preview links |
| Synthesia | Starter | Check current pricing | AI avatar videos with custom backgrounds and scripts |
| Reap | AppSumo Deal | Check current pricing (lifetime deals available) | Auto-clipping, captions, and short-form video exports |
| TidyCal | AppSumo Deal | Check current pricing (lifetime deals available) | Unlimited booking pages with calendar sync |
| Make | Free | £0 | 3 scenarios, 1,000 operations/month |
| Total | Varies; check each tool's current pricing page | Full automated demo pipeline |
Tool Pipeline Overview
How each tool connects in this workflow
Lovable
AI-powered full-stack web app builder
reap
Repurpose long videos with an AI video editor that clips, captions, dubs, and publishes in minutes
Synthesia
AI video creation with realistic avatars
TidyCal
Book more customizable meetings using this powerful scheduling software with calendar integrations
Lovable
AI-powered full-stack web app builder
reap
Repurpose long videos with an AI video editor that clips, captions, dubs, and publishes in minutes
Synthesia
AI video creation with realistic avatars
TidyCal
Book more customizable meetings using this powerful scheduling software with calendar integrations
More Recipes
Automated Podcast Production Workflow
Automated Podcast Production Workflow: From Raw Audio to Published Episode
Build an Automated YouTube Channel with AI
Build an Automated YouTube Channel with AI
Medical device regulatory documentation from technical specifications
Medtech companies spend significant resources translating technical specs into regulatory-compliant documentation.