Integration Card

Centered now-integrates-with card with two logo tiles, a sync connector and a benefit chip — swap brand, partner, initials and accent.

Type: Image
Format: Open Graph · 1200×630
Orientation: Landscape

Variables

Open in editor

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

Customize Integration Card

Integration Card is a ready-to-render SaaS / dev tools image design formatted for Open Graph · 1200×630 and support for variables. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

12 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

NOW INTEGRATES WITH

brandNameText

zvid

partnerText

Slack

brandInitialText

partnerInitialText

benefitText

Post every finished render straight to your channel — the moment it is ready.

chipText

Two-way sync, in real time

accentColor

#FF6B5E

tileColorColor

#16171F

inkColorColor

#0B0B12

headingColorColor

#F6F3F2

subColorColor

#A8A2AE

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-saas-integration",
  "resolution": "custom",
  "width": 1200,
  "height": 630,
  "outputFormat": "png",
  "backgroundColor": "#0B0B12",
  "variables": {
    "eyebrow": "NOW INTEGRATES WITH",
    "brandName": "zvid",
    "partner": "Slack",
    "brandInitial": "Z",
    "partnerInitial": "S",
    "benefit": "Post every finished render straight to your channel — the moment it is ready.",
    "chip": "Two-way sync, in real time",
    "accent": "#FF6B5E",
    "tileColor": "#16171F",
    "inkColor": "#0B0B12",
    "headingColor": "#F6F3F2",
    "subColor": "#A8A2AE"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1200,
      "height": 630,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1200' height='630' viewBox='0 0 1200 630' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#1B1013'/><stop offset='0.5' stop-color='#0B0B12'/><stop offset='1' stop-color='#09090E'/></linearGradient><radialGradient id='glow' cx='0.5' cy='0.32' r='0.6'><stop offset='0' stop-color='#FF6B5E' stop-opacity='0.24'/><stop offset='1' stop-color='#FF6B5E' stop-opacity='0'/></radialGradient></defs><rect width='1200' height='630' fill='url(#bg)'/><rect width='1200' height='630' fill='url(#glow)'/><rect x='24' y='24' width='1152' height='582' rx='28' fill='none' stroke='#FFFFFF' stroke-opacity='0.07' stroke-width='1.5'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 600,
      "y": 96,
      "width": 700,
      "anchor": "top-center",
      "track": 4,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "600",
        "letterSpacing": "0.34em",
        "textAlign": "center",
        "color": "#FF6B5E"
      }
    },
    {
      "type": "SVG",
      "x": 300,
      "y": 150,
      "width": 600,
      "height": 180,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='600' height='180' viewBox='0 0 600 180' xmlns='http://www.w3.org/2000/svg'><line x1='170' y1='90' x2='430' y2='90' stroke='#FFFFFF' stroke-opacity='0.22' stroke-width='2' stroke-dasharray='2 10' stroke-linecap='round'/><rect x='30' y='20' width='140' height='140' rx='34' fill='{{tileColor}}' stroke='#FFFFFF' stroke-opacity='0.1' stroke-width='1.5'/><text x='100' y='112' font-family='Space Grotesk, Arial' font-size='58' font-weight='800' fill='{{accent}}' text-anchor='middle'>{{brandInitial}}</text><rect x='430' y='20' width='140' height='140' rx='34' fill='{{tileColor}}' stroke='#FFFFFF' stroke-opacity='0.1' stroke-width='1.5'/><text x='500' y='112' font-family='Space Grotesk, Arial' font-size='58' font-weight='800' fill='#F6F3F2' text-anchor='middle'>{{partnerInitial}}</text><circle cx='300' cy='90' r='30' fill='{{accent}}'/><path d='M291 79 L279 90 L291 101 Z' fill='{{inkColor}}'/><path d='M309 79 L321 90 L309 101 Z' fill='{{inkColor}}'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 600,
      "y": 356,
      "width": 900,
      "anchor": "top-center",
      "track": 5,
      "style": {
        "fontFamily": "Bricolage Grotesque"
      },
      "html": "<div style='font-size:70px; font-weight:800; line-height:1.0; letter-spacing:-0.02em; text-align:center; color:{{headingColor}};'>{{brandName}} <span style='color:{{accent}};'>×</span> {{partner}}</div>"
    },
    {
      "type": "TEXT",
      "x": 600,
      "y": 452,
      "width": 760,
      "anchor": "top-center",
      "track": 5,
      "text": "{{benefit}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "27px",
        "fontWeight": "500",
        "lineHeight": "1.4",
        "textAlign": "center",
        "color": "#A8A2AE"
      }
    },
    {
      "type": "SVG",
      "x": 600,
      "y": 540,
      "width": 360,
      "height": 46,
      "anchor": "top-center",
      "track": 6,
      "svg": "<svg width='360' height='46' viewBox='0 0 360 46' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='360' height='46' rx='23' fill='{{accent}}' fill-opacity='0.12' stroke='{{accent}}' stroke-opacity='0.5' stroke-width='1.2'/><circle cx='28' cy='23' r='9' fill='none' stroke='{{accent}}' stroke-width='2'/><path d='M23 23 L27 27 L34 19' fill='none' stroke='{{accent}}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><text x='52' y='30' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='#F3C9C4'>{{chip}}</text></svg>"
    }
  ]
}