Slide structure

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.

The default dimension/resolution of the slide when you edit it is 640x360 (16:9). This should be taken into consideration when placing objects as a background or elements of the canvas.

General structure example:

🚧

Unique IDs

Each slide should have a unique ID as Int.

{
      "id": 1,
      "canvas": {
        "objects": [
          {
            "type": "avatar",
            "version": 2,
            "left": 151.5,
            "top": 36,
            "fill": "#4868FF",
            "scaleX": 0.3,
            "scaleY": 0.3,
            "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": {
        "id": "gia.casual",
        "version": 2,
        "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:

  1. slide.avatar should have at least 2 properties:
  • id - avatar id and variant id separated by dot: {avatarId}.{variantId}
  • version - either 1 or 2 versions of the avatar
  1. 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": {
      "id": "gia.casual",
      "version": 2,
      "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,
          "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 always should contain one(!) item with an avatar representation on the canvas.

  ...
  "canvas": {
    "version":"4.4.0",
    "objects":[
      {
           "type": "avatar",
           "version": 2,
           "left": 151.5,
           "top": 36,
           "fill": "#4868FF",
           "scaleX": 0.3,
           "scaleY": 0.3,
           "src": "https://elai-avatars.s3.us-east-2.amazonaws.com/common/gia/casual/gia_casual.png",
           "avatarType": "transparent",
           "animation": {
             "type": null,
             "exitType": null
           }
         },
      ...
    }
  }