A detailed description of structuring each block of a slide.
How to get the structure you need
The structure of the video is quite complex, so the best way to get the structure you need would be to create the layout in the builder, retrieve it using GET /videos, and use the structure from that video.
General structure example
Unique IDs
Each slide should have a unique ID which should be a number (Int).
{
"id": 1,
"status": "edited",
"canvas": {
"objects": [
{
"type": "avatar",
"left": 151.5,
"top": 36,
"fill": "#4868FF",
"scaleX": 0.3,
"scaleY": 0.3,
"height": 1080,
"width": 1080,
"src": "https://elai-avatars.s3.us-east-2.amazonaws.com/common/gia/casual/gia_casual.png",
"avatarType": "transparent",
"animation": {
"type": null,
"exitType": null
}
}
],
"background": "#ffffff",
"version": "4.4.0"
},
"avatar": {
"code": "gia.casual",
"name": "Gia Casual",
"gender": "female",
"canvas": "https://elai-avatars.s3.us-east-2.amazonaws.com/common/gia/casual/gia_casual.png"
},
"animation": "fade_in",
"language": "English",
"speech": "Hi there! It's my first video created by Elai API.",
"voice": "en-US-AriaNeural",
"voiceType": "text",
"voiceProvider": "azure"
}
Basic configuration
{
"id":244262061378, # unique slide identifier within a specific video. integer
"language":"English",
"voice":"en-US-GuyNeural", # specified voice
"voiceType":"text", # voice will be generated from speech
"voiceProvider": "azure", # "wsl" for premium voices
"speech": "slide speech",
...
Supported voices can be found on this page.
Avatar options
There are 2 places where you need to set up proper data for each avatar on the slide to be valid:
- slide.avatar should have at least 2 properties:
- code - avatar code and variant code separated by dot: {avatarCode}.{variantCode}
- gender - 'male' or 'female'
- canvas.objects[].type: avatar - object with type avatar, which contains all visual settings of a particular avatar on the slide. Please refer to the actual structure in the builder for reference.
{
"avatar": {
"code": "gia.casual",
"name": "Gia Casual",
"gender": "female",
"canvas": "https://elai-avatars.s3.us-east-2.amazonaws.com/common/gia/casual/gia_casual.png"
},
"canvas": {
"objects": [
{
"type": "avatar",
"version": 2,
"left": 151.5,
"top": 36,
"fill": "#4868FF",
"scaleX": 0.3,
"scaleY": 0.3,
"height": 1080,
"width": 1080,
"src": "https://elai-avatars.s3.us-east-2.amazonaws.com/common/gia/casual/gia_casual.png",
"avatarType": "transparent",
"animation": {
"type": null,
"exitType": null
}
}
]
}
}
Supported avatars can be fetched on this page but it's recommended to retrieve the proper slide structure for a specific avatar using the builder.
Canvas structure
Canvas objects' configurations are based on Fabric.js: most options are supported and can be found in related documentation.
Unique IDs
Each canvas object should have a unique ID as Int.
It should always contain one(!) item with an avatar representation on the canvas.
...
"canvas": {
"version":"4.4.0",
"objects":[
{
"type": "avatar",
"left": 151.5,
"top": 36,
"fill": "#4868FF",
"scaleX": 0.3,
"scaleY": 0.3,
"height": 1080,
"width": 1080,
"src": "https://elai-avatars.s3.us-east-2.amazonaws.com/common/gia/casual/gia_casual.png",
"avatarType": "transparent",
"animation": {
"type": null,
"exitType": null
}
},
...
}
}
How to change avatar to a different one?
Find a desired avatar using Avatar list
Avatars, that supports 5min slide duration has "limit": 300 parameter. You also can find such avatars by UI with a '5 min' label in the left bottom corner of avatar.
Prepare changes for a Video update
In the slide/avatar make appropriate changes, for example:
"code": "dylan.casual",
"gender": "male",
"limit": 300,
"canvas": "https://d3u63mhbhkevz8.cloudfront.net/common/dylan/casual/dylan_casual.png",
In the slide/canvas/objects find the object with {type: "avatar"} and change "src" property from default to a value from "canvas":
"src": "https://d3u63mhbhkevz8.cloudfront.net/common/dylan/casual/dylan_casual.png",
Make a Video update request.
Make a Video render request, if need to render video after changes.
How to change avatar size and position?
You need to manipulate with scaleX ans scaleY parameters by this formula:
scaleY = 360 / 1080 * 0.5, where:
360 - height of video editor
1080 - height of avatar
0.5 - This is a 50% of overall height. In this case avatar will be a 50% height of a full video height.
scaleX is set in the same manner, but with a different width of video editor:
scaleX = 640 / 1080 * 0.5, where:
640 - width of video editor
To change position of the avatar use 'top' and 'left' parameters of avatar object.
How to change video and image objects size and position?
Use the same manipulation instructions as was described for avatar in the previous section.
After any manipulations with slide and before render set slide/status property to "edited"
Interactivity support
We have 2 types of interactive elements: Questions and Buttons. You can work with interactive elements using API the same way as you work with any other canvas objects. You can create videos from templates with interactive elements and you can change/alter any interactive elements before rendering. But tags inside interactive elements are not supported yet.
Question element is pretty complex and contains lots of sub-elements inside. Find an element with type "question" in your slide canvas for more details.
{
"type": "question",
"version": "5.3.0",
"objects": [],
"id": 435192946619,
"animation": {
"startScene": "end",
"type": "fade_in"
},
"correctAnswers": [
1719223955704
],
"layoutType": "horizontal",
"theme": "dark",
"feedback": false,
"onWrong": null,
"onCorrect": null
}
You can create interactive button from any static object by adding metadata as follows:
{
"type": "textbox",
"version": "5.3.0",
"id": 1281324595393,
"meta": {
"splittedText": "Visit website",
"interactivity": {
"type": "slide",
"slide": null
}
}
}