Customer Milestone

Personalized photo card celebrating a customer render milestone with a gold badge and bonus-credits note — swap name, count and photo.

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

Variablesphoto

Open in editor

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

Customize Customer Milestone

Customer Milestone is a ready-to-render SaaS / dev tools image design formatted for Open Graph · 1200×630 and support for variables, photo. 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

CUSTOMER MILESTONE

userText

Acme Co.

countText

10,000

headEndText

renders and counting

bonusNoteText

Here are 500 bonus credits, on us.

badgeLabelText

10K

brandText

zvid studio

accentColor

#EBC777

inkColorColor

#0B0A07

headingColorColor

#FFFFFF

subColorColor

#D8CFC0

userImageMedia URL

pexels-photo-3747070.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-saas-customer-milestone",
  "resolution": "custom",
  "width": 1200,
  "height": 630,
  "outputFormat": "png",
  "backgroundColor": "#0B0A07",
  "variables": {
    "eyebrow": "CUSTOMER MILESTONE",
    "user": "Acme Co.",
    "count": "10,000",
    "headEnd": "renders and counting",
    "bonusNote": "Here are 500 bonus credits, on us.",
    "badgeLabel": "10K",
    "brand": "zvid studio",
    "accent": "#EBC777",
    "inkColor": "#0B0A07",
    "headingColor": "#FFFFFF",
    "subColor": "#D8CFC0",
    "userImage": "https://images.pexels.com/photos/3747070/pexels-photo-3747070.jpeg?auto=compress&cs=tinysrgb&w=1600"
  },
  "visuals": [
    {
      "type": "IMAGE",
      "src": "{{userImage}}",
      "width": 1200,
      "height": 630,
      "position": "center-center",
      "resize": "cover",
      "track": 0
    },
    {
      "type": "SVG",
      "width": 1200,
      "height": 630,
      "position": "center-center",
      "track": 1,
      "svg": "<svg width='1200' height='630' viewBox='0 0 1200 630' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='sx' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='#0B0A07' stop-opacity='0.96'/><stop offset='0.58' stop-color='#0B0A07' stop-opacity='0.74'/><stop offset='1' stop-color='#0B0A07' stop-opacity='0.18'/></linearGradient><linearGradient id='sy' x1='0' y1='1' x2='0' y2='0'><stop offset='0' stop-color='#0B0A07' stop-opacity='0.82'/><stop offset='0.46' stop-color='#0B0A07' stop-opacity='0'/></linearGradient></defs><rect width='1200' height='630' fill='url(#sx)'/><rect width='1200' height='630' fill='url(#sy)'/></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 150,
      "width": 140,
      "height": 8,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='140' height='8' viewBox='0 0 140 8' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='2' width='132' height='4' rx='2' fill='{{accent}}'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 172,
      "width": 560,
      "anchor": "top-left",
      "track": 4,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "23px",
        "fontWeight": "600",
        "letterSpacing": "0.3em",
        "color": "#EBC777"
      }
    },
    {
      "type": "TEXT",
      "x": 68,
      "y": 214,
      "width": 780,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Fraunces"
      },
      "html": "<div style='font-size:66px; font-weight:600; line-height:1.06; letter-spacing:-0.015em; color:{{headingColor}};'><span style='color:{{accent}};'>{{user}}</span> just hit<br><span style='color:{{accent}};'>{{count}}</span> {{headEnd}}</div>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 462,
      "width": 460,
      "height": 52,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='460' height='52' viewBox='0 0 460 52' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='460' height='52' rx='26' fill='{{accent}}' fill-opacity='0.14' stroke='{{accent}}' stroke-opacity='0.5' stroke-width='1.2'/><path d='M28 14 L32 24 L43 24 L34 31 L38 42 L28 35 L18 42 L22 31 L13 24 L24 24 Z' fill='{{accent}}'/><text x='58' y='33' font-family='Space Grotesk, Arial' font-size='20' font-weight='600' fill='#F4E4C0'>{{bonusNote}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 1016,
      "y": 56,
      "width": 128,
      "height": 128,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'><circle cx='64' cy='64' r='62' fill='{{accent}}'/><circle cx='64' cy='64' r='52' fill='none' stroke='{{inkColor}}' stroke-opacity='0.35' stroke-width='2'/><path d='M64 22 L70 40 L89 40 L74 52 L80 70 L64 59 L48 70 L54 52 L39 40 L58 40 Z' fill='{{inkColor}}' fill-opacity='0.28'/><text x='64' y='78' font-family='Fraunces, Arial' font-size='38' font-weight='700' fill='{{inkColor}}' text-anchor='middle'>{{badgeLabel}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 1128,
      "y": 558,
      "width": 200,
      "height": 44,
      "anchor": "top-right",
      "track": 6,
      "svg": "<svg width='200' height='44' viewBox='0 0 200 44' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='22' r='7' fill='{{accent}}'/><text x='30' y='29' font-family='Space Grotesk, Arial' font-size='20' font-weight='600' fill='#FFFFFF'>{{brand}}</text></svg>"
    }
  ]
}