Okay, so we just automated our product announcement videos using Synthesia + our headless CMS. No more manual updates! 🚀
Here's exactly how we connected them. We're using Contentful, but the principle works for any CMS with webhooks. First, we set up a webhook in Contentful that triggers on publish. It sends a POST request to a small serverless function (we used Vercel Edge Functions for speed). That function reformats the CMS data into the JSON structure Synthesia's API expects, then calls the Synthesia video generation endpoint.
The key was mapping CMS fields to our video template. Our function looks something like this:
```javascript
export async function handler(req) {
const cmsData = await req.json();
const synthesiaPayload = {
"templateId": "our-template-id",
"data": {
"productName": cmsData.fields.productName,
"price": cmsData.fields.price,
"avatar": "anna"
}
};
// Then POST to Synthesia API
}
```
When the video is ready, Synthesia pings a webhook URL we provided, which updates a field back in Contentful with the new video asset URL. It's a closed loop! Our frontend (Next.js) just pulls that URL. The whole flow takes ~90 seconds end-to-end.
Biggest win? Zero manual steps. Biggest gotcha? You need to handle API errors and retries gracefully. Also, budget for API credits—this can scale fast!
measure twice, ship once