Webinar Promo

Square webinar card with speaker photo, headline, date/time chips and a REGISTER pill — swap title, date, time, speaker and accent.

Type: Image
Format: Instagram Post · 1:1
Orientation: Square

Variablesphoto

Open in editor

Free template · opens in the editor, no account required.

Customize Webinar Promo

Webinar Promo is a ready-to-render Events / webinars image design formatted for Instagram Post · 1:1 and support for variables, photo. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

13 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.

eyebrowText

LIVE WEBINAR

titleAText

Scaling Design

titleBText

Systems

titleCText

in 2026

dateLabelText

MAR 14 · 2026

timeLabelText

5:00 PM GMT

speakerNameText

Elena Ríos

speakerRoleText

VP Design · Northwind

ctaLabelText

brandText

zvid.io/live

inkColor

#0E1015

accentColor

#8B7CF6

speakerImageMedia URL

pexels-photo-5399007.jpeg

The exact JSON payload

This is the full render config — POST it to the API, or open it in the editor to tweak.

Open in editor ↗

{
  "type": "image",
  "name": "img-event-webinar-promo",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#0E1015",
  "variables": {
    "eyebrow": "LIVE WEBINAR",
    "titleA": "Scaling Design",
    "titleB": "Systems",
    "titleC": "in 2026",
    "dateLabel": "MAR 14 · 2026",
    "timeLabel": "5:00 PM GMT",
    "speakerName": "Elena Ríos",
    "speakerRole": "VP Design · Northwind",
    "ctaLabel": "REGISTER FREE",
    "brand": "zvid.io/live",
    "ink": "#0E1015",
    "accent": "#8B7CF6",
    "speakerImage": "https://images.pexels.com/photos/5399007/pexels-photo-5399007.jpeg?auto=compress&cs=tinysrgb&w=1600"
  },
  "visuals": [
    {
      "type": "IMAGE",
      "src": "{{speakerImage}}",
      "width": 1080,
      "height": 1080,
      "position": "center-center",
      "resize": "cover",
      "track": 0
    },
    {
      "type": "SVG",
      "width": 1080,
      "height": 1080,
      "position": "center-center",
      "track": 1,
      "svg": "<svg width='1080' height='1080' viewBox='0 0 1080 1080' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='sx' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='{{ink}}' stop-opacity='0.96'/><stop offset='0.56' stop-color='{{ink}}' stop-opacity='0.62'/><stop offset='1' stop-color='{{ink}}' stop-opacity='0.06'/></linearGradient><linearGradient id='sy' x1='0' y1='1' x2='0' y2='0'><stop offset='0' stop-color='{{ink}}' stop-opacity='0.94'/><stop offset='0.42' stop-color='{{ink}}' stop-opacity='0'/></linearGradient></defs><rect width='1080' height='1080' fill='url(#sx)'/><rect width='1080' height='1080' fill='url(#sy)'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 92,
      "width": 300,
      "height": 48,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='300' height='48' viewBox='0 0 300 48' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='250' height='46' rx='23' fill='{{accent}}' fill-opacity='0.16' stroke='{{accent}}' stroke-opacity='0.55' stroke-width='1.3'/><circle cx='32' cy='24' r='6' fill='{{accent}}'/><text x='52' y='30' font-family='Space Grotesk, Arial' font-size='17' font-weight='600' letter-spacing='3' fill='#EDEAFB'>{{eyebrow}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 820,
      "y": 96,
      "width": 200,
      "height": 40,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='200' height='40' viewBox='0 0 200 40' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='20' r='6' fill='{{accent}}'/><text x='28' y='27' font-family='Space Grotesk, Arial' font-size='20' font-weight='600' letter-spacing='0.3' fill='#F4F2FB'>{{brand}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 78,
      "y": 300,
      "width": 720,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Archivo"
      },
      "html": "<div style='font-size:98px; font-weight:800; line-height:0.94; letter-spacing:-0.028em; color:#F7F5FF;'>{{titleA}}<br>{{titleB}} <span style='color:{{accent}};'>{{titleC}}</span></div>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 612,
      "width": 520,
      "height": 60,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='520' height='60' viewBox='0 0 520 60' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='230' height='58' rx='16' fill='#FFFFFF' fill-opacity='0.06' stroke='#FFFFFF' stroke-opacity='0.14' stroke-width='1'/><text x='26' y='37' font-family='Space Grotesk, Arial' font-size='23' font-weight='600' letter-spacing='0.5' fill='#F4F2FB'>{{dateLabel}}</text><rect x='250' y='1' width='210' height='58' rx='16' fill='#FFFFFF' fill-opacity='0.06' stroke='#FFFFFF' stroke-opacity='0.14' stroke-width='1'/><circle cx='280' cy='30' r='6' fill='{{accent}}'/><text x='298' y='37' font-family='Space Grotesk, Arial' font-size='23' font-weight='600' letter-spacing='0.5' fill='#F4F2FB'>{{timeLabel}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 892,
      "width": 96,
      "height": 96,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='96' height='96' viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='mg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='{{accent}}'/><stop offset='1' stop-color='#5B8DEF'/></linearGradient></defs><circle cx='48' cy='48' r='47' fill='none' stroke='{{accent}}' stroke-opacity='0.5' stroke-width='2'/><circle cx='48' cy='48' r='34' fill='url(#mg)'/><text x='48' y='60' font-family='Archivo, Arial' font-size='32' font-weight='800' fill='{{ink}}' text-anchor='middle'>E</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 196,
      "y": 900,
      "width": 460,
      "anchor": "top-left",
      "track": 6,
      "style": {
        "fontFamily": "Space Grotesk"
      },
      "html": "<div style='font-size:30px; font-weight:700; color:#F4F2FB;'>{{speakerName}}</div><div style='margin-top:4px; font-size:20px; font-weight:500; color:#A7A3BF;'>{{speakerRole}}</div>"
    },
    {
      "type": "SVG",
      "x": 726,
      "y": 902,
      "width": 274,
      "height": 74,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='274' height='74' viewBox='0 0 274 74' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='272' height='72' rx='36' fill='{{accent}}'/><text x='137' y='47' font-family='Space Grotesk, Arial' font-size='24' font-weight='700' letter-spacing='1.5' fill='{{ink}}' text-anchor='middle'>{{ctaLabel}}</text></svg>"
    }
  ]
}