Slideshow videos are a great way to make boring images more interesting. They are often used by businesses to create engaging content for marketing, especially in competitive industries like the automotive industry. In today's world of TikTok and YouTube, it's important for companies to use videos to reach their customers.
However, making videos can be time-consuming, especially if you have a lot of vehicles to market at once. While you could manually edit and clip together each video using a video editing software, this can be inefficient.
This tutorial will show you how to use Make (Integromat), Google Sheets, and the Shotstack API to automatically generate engaging automotive slideshow videos from photos. You can also use this process to create videos for other use cases and industries by designing a template. This will help you save time and efficiently create hundreds of videos.
Make refer to themselves as 'the glue of the internet', and their platform allows you to automate manual processes, without needing code. This is done by creating scenarios that link together different data sources and APIs. In this tutorial you will link Google Sheets and Shotstack together to build a scenario that automatically generate videos.
In summary, you will:
Before you get started sign up to Make(previously known as Integromat), Google Sheets, and the Shotstack API.
Shotstack provides a cloud based video editing API. The API first infrastructure makes it seamless to build apps, integrate other apps/APIs, and develop workflows to automate media production.
The Shotstack API uses JSON to describe how the video should be edited. The API uses code but adheres to many of the same concepts as desktop editing applications, including timeline, tracks, and clips.
We can add different assets like images, videos, titles, HTML, audios, and Luma assets. Assets can be added on the timeline using their publicly accessible URLs. Shotstack makes it easy to build reusable templates with merge fields. The merge fields are placeholders that uses the merge
parameter which provides an array of key/value pairs that can be used to find and replace the placeholder value.
Visit Shotstack documentation to learn about architecture guidelines.
For this tutorial, you will use the following automotive slideshow video template.
The following code is the JSON version of the above video template. In this template, you have the following placeholders as merge fields:
The values will be matched from our Google Sheets and automatically replaced to generate multiple videos. Copy the following JSON:
{
"timeline": {
"soundtrack": {
"src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/music/unminus/kring.mp3",
"effect": "fadeOut"
},
"background": "#000000",
"cache": false,
"tracks": [
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">{{Vehicle_Year}}</p>",
"css": "p { color: #ffffff; font-size: 100px; font-family: Montserrat ExtraBold; text-align: left; }",
"width": 844,
"height": 180
},
"start": 0,
"length": 4,
"fit": "none",
"scale": 1,
"offset": {
"x": -0.239,
"y": -0.139
},
"position": "center",
"transition": {
"in": "slideUp",
"out": "slideDown"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">{{Vehicle_Make}}</p>",
"css": "p { color: #ffffff; font-size: 80px; font-family: Montserrat ExtraBold; text-align: left }",
"width": 1031,
"height": 114
},
"fit": "none",
"scale": 1,
"offset": {
"x": -0.191,
"y": -0.218
},
"position": "center",
"transition": {
"in": "slideUp",
"out": "slideDown"
},
"start": 0.5,
"length": 3.5
}
]
},
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">{{Vehicle_Model}}</p>",
"css": "p { color: #ffffff; font-size: 80px; font-family: Montserrat SemiBold; text-align: left; }",
"width": 1019,
"height": 77
},
"fit": "none",
"scale": 1,
"offset": {
"x": -0.191,
"y": -0.294
},
"position": "center",
"start": 1,
"length": 3,
"transition": {
"out": "slideDown",
"in": "slideUp"
}
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">{{Vehicle_Description}}</p>",
"css": "p { color: #ffffff; font-size: 40px; font-family: Montserrat SemiBold; text-align: left; }",
"width": 1648,
"height": 90
},
"fit": "none",
"scale": 1,
"offset": {
"x": -0.024,
"y": -0.365
},
"position": "center",
"transition": {
"out": "slideDown",
"in": "slideUp"
},
"start": 1.2,
"length": 2.8
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "{{First_image}}"
},
"start": 0,
"length": 5,
"effect": "zoomIn",
"transition": {
"in": "fade",
"out": "fade"
},
"offset": {
"x": 0.002,
"y": -0.024
},
"position": "center",
"fit": "crop",
"opacity": 0.4
}
]
},
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">{{Vehicle_Engine_Type}}</p>",
"css": "p { color: #ffffff; font-size: 40px; font-family: Montserrat SemiBold; text-align: left }",
"width": 620,
"height": 72
},
"length": 5,
"start": 5,
"transition": {
"out": "slideDown",
"in": "slideUp"
},
"fit": "none",
"scale": 1,
"offset": {
"x": -0.266,
"y": -0.032
},
"position": "center"
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">{{Vehicle_kms}}</p>",
"css": "p { color: #ffffff; font-size: 70px; font-family: Montserrat ExtraBold; text-align: left; }",
"width": 600,
"height": 109
},
"length": 5,
"start": 5,
"transition": {
"out": "slideDown",
"in": "slideUp"
},
"fit": "none",
"scale": 1,
"offset": {
"x": -0.276,
"y": 0.027
},
"position": "center"
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://drive.google.com/uc?export=download&id=1ngVkdeoD7RDvk3FA5cIU07l1_V84xS5t"
},
"length": 5,
"start": 5,
"offset": {
"x": -0.49,
"y": -0.004
},
"position": "center",
"scale": 0.07,
"transition": {
"in": "carouselDown",
"out": "slideDown"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "{{First_image}}"
},
"start": 5.7,
"length": 4.3,
"offset": {
"x": 0.2,
"y": 0
},
"position": "center",
"scale": 0.479,
"transition": {
"in": "slideLeft",
"out": "slideRight"
},
"fit": "crop"
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "{{Second_image}}"
},
"position": "center",
"offset": {
"x": 0,
"y": 0
},
"transition": {
"in": "fade",
"out": "fade"
},
"start": 4,
"length": 6,
"scale": 1,
"opacity": 0.4,
"fit": "crop"
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "{{Third_image}}"
},
"effect": "zoomIn",
"offset": {
"x": 0,
"y": 0
},
"position": "center",
"fit": "crop",
"scale": 1,
"transition": {
"in": "fade",
"out": "fade"
},
"start": 9,
"length": 3
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://drive.google.com/uc?export=download&id=1ngVkdeoD7RDvk3FA5cIU07l1_V84xS5t"
},
"length": 5.5,
"start": 11.5,
"offset": {
"x": -0.492,
"y": -0.007
},
"position": "center",
"transition": {
"in": "carouselDown",
"out": "slideDown"
},
"scale": 0.07
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "{{First_Image}}"
},
"start": 11,
"length": 7,
"effect": "zoomIn",
"offset": {
"x": 0,
"y": 0
},
"position": "center",
"transition": {
"in": "fade",
"out": "fade"
},
"fit": "crop",
"scale": 1
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "{{Second_Image}}"
},
"start": 17,
"length": 4,
"effect": "zoomIn",
"offset": {
"x": 0,
"y": 0
},
"position": "center",
"transition": {
"in": "fade",
"out": "fade"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "{{Third_Image}}"
},
"start": 20,
"length": 6,
"effect": "zoomIn",
"offset": {
"x": 0,
"y": 0
},
"position": "center",
"transition": {
"in": "fade",
"out": "fade"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">{{Vehicle_Price}}</p>",
"css": "p { color: #ffffff; font-size: 120px; font-family: Montserrat ExtraBold; text-align: center; }",
"width": 1311,
"height": 180
},
"start": 28,
"length": 3,
"transition": {
"out": "slideUp",
"in": "slideDown"
},
"fit": "none",
"scale": 1,
"offset": {
"x": -0.029,
"y": -0.005
},
"position": "center"
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">{{Vehicle_Price_Disclaimer}}</p>",
"css": "p { color: #ffffff; font-size: 36px; font-family: Montserrat SemiBold; text-align: left; }",
"width": 883,
"height": 93
},
"transition": {
"out": "slideUp",
"in": "slideDown"
},
"start": 28,
"length": 3,
"fit": "none",
"scale": 1,
"offset": {
"x": 0.223,
"y": -0.134
},
"position": "center"
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">{{Vehicle_Price_Method}}</p>",
"css": "p { color: #ffffff; font-size: 50px; font-family: Montserrat ExtraBold; text-align: left; }",
"width": 672,
"height": 107
},
"start": 28,
"length": 3,
"fit": "none",
"scale": 1,
"offset": {
"x": 0.164,
"y": -0.087
},
"position": "center",
"transition": {
"in": "slideDown",
"out": "slideUp"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "{{dealer_logo}}"
},
"start": 30.8,
"length": 5.2,
"fit": "none",
"offset": {
"x": 0,
"y": 0
},
"transition": {
"in": "slideUp"
},
"position": "center",
"scale": 0.5
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">{{Dealer_website}}</p>",
"css": "p { color: #ffffff; font-size: 50px; font-family: Montserrat SemiBold; text-align: center; }",
"width": 1025,
"height": 167
},
"length": 5,
"offset": {
"x": 0.006,
"y": -0.178
},
"start": 31,
"transition": {
"in": "slideUp"
},
"fit": "none",
"scale": 1,
"position": "center"
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "{{First_Image}}"
},
"start": 25,
"length": 8,
"effect": "zoomIn",
"transition": {
"out": "fade"
},
"offset": {
"x": 0,
"y": 0
},
"position": "center",
"fit": "crop",
"scale": 1,
"opacity": 0.4
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1920,
"height": 1080
}
}
}
Next, go to your Shotstack dashboard by logging in to your account. Click on Studio, then Create Template. It will take you to the web based video editor. As you already have the video design in JSON copied from above, you don't need to design a new one. Click the view toggle in the left bottom corner and paste the copied JSON in the JSON field. Rename the template, and click save.
You can use the following format to setup your Google Sheets. Copy this Google Sheet if you don't want to create one yourself.
Make sure the assets like images, videos, and music are publicly accessible via the URL.
Next, you need to setup the Make scenario. You can also download and import this blueprint if you don't want to build one. You can see the scenario setup below.
renderID
generated in step 2Search for the Google Sheets module and select Search Rows. You will need to authenticate your access to Google Sheets if you are using for the first time. Click Add and connect it with your Google account.
Once connected, select the correct Sheet you are working with and click save.
Similar to authenticating Google account, you need to authenticate our Shotstack account. Shotstack provides two different working environment with seperate API keys:
You can use your Shotstack Sandbox API key for this tutorial. Go to your Shotstack dashboard, click on your account name on the top right corner. Then click on the API Keys, and copy the Sandbox API key.
Go back to your Make scenario and add the Shotstack Create from Dynamic Template module. Click the Add button under Connection and paste the API key. Select the Environment to Sandbox , rename the account name, and click save.
The Shotstack Create from Dynamic Template module uses the TemplateRender
API request type to render templates saved in your Shotstack studio. It uses the unique **template id ** to identify templates and send renders.
You need to match the data from Google Sheets with the merge fields. If you're using the automotive JSON video template from the above, then you can copy the following setup:
Simply match the the Sheet headers with the correct merge field placeholders.
Rendering videos is a resource intensive process. Thankfully, with the Shotstack's cloud infrastructure, it is possible to concurrently render multiple videos in minutes.
Normally it takes this about a minute to finish rendering videos of this length and complexity. So add the Make's Wait module that waits for the renders to complete. You can add 60 seconds in the value field.
Shotstack Get Render Status module uses the render ID returned from the Create from Dynamic Template module to get the rendering status, temporaray asset URL, public video URL, and other details.
Add the Get render Status module and select the ID returned from the second step as shown below:
Finally, it's time to add the video URL returned from the above step in the Google Sheet. Add the Google Sheets update rows module. Select the same Google Sheet to add the rendered video URLs passed from the previous step.
You can also access all your renders via your Shotstack dashboard under the Renders tab. Further, you can automatically send to different destinations like your social media page to automate posting, cloud file storage, email, and more using other available Make modules.
Run the scenario to test if it works.
You can schedule it to run routinely or whenever there is new vehicle inventory added in the Google Sheets by using the Google Sheets Watch Rows module.
There you have it, a fully automated workflow that automatically generates automotive slideshow videos. This is just one example of video automation and can be used for any industry or use case. This should give you an idea of how powerful video automation solutions can be.
You can even build an app using no-code tools and integrates multiple platforms. If you want to learn more about media automation, then checkout our other learning resources.
Every month we share articles like this one to keep you up to speed with automated video editing.