So here is how you setup a web hook from Shotstack so you will always get the rendered video after it has completed.
- Create a backend workflow to catch your web hook.
- Choose detect data
- Initialize your API Connector ‘Render’ call with your own URL from the backend workflow when choose detect data. Will look something like the url I put in the code.
- For security, drop in your bubble api token from the settings page here: Settings > API > API tokens > generate a new API token.
- Remove the initialize part after it has been initialized and start making the data dynamic. Example of dynamic data would be below like
Check it out:
{
"callback": "https://nocodeminute.bubbleapps.io/version-test/api/1.1/wf/shotstack?api_token=YOURAPIKEY",
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "text",
"text": "NoCodeMinute.com",
"font": {
"family": "Clear Sans",
"color": "#ffffff",
"size": 46
},
"alignment": {
"horizontal": "left"
},
"width": 566,
"height": 70
},
"start": 4,
"length": "end",
"transition": {
"in": "fade",
"out": "fade"
},
"offset": {
"x": -0.15,
"y": 0
},
"effect": "zoomIn"
}
]
},
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/earth.mp4",
"trim": 5,
"volume": 1
},
"start": 0,
"length": "auto",
"transition": {
"in": "fade",
"out": "fade"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "audio",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/motions.mp3",
"effect": "fadeOut",
"volume": 1
},
"start": 0,
"length": "end"
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}
Does that help? Let me know.