# Achievement card template

> A milestone card with a medal, the achievement, and who earned it, for users to share. Render it on-brand from an AI agent or the REST API.

Canonical URL: https://vectorfast.ai/render/templates/achievement-card
Markdown URL: https://vectorfast.ai/render/templates/achievement-card.md
Last modified: 2026-10-30

VectorFast Render is in early access: billing is not connected yet, and API keys are issued to waitlist members as access opens.

## Summary
- Template id: `achievement-card` (pin the major version as `achievement-card@1`; current version 1.0.0)
- Sizes: 1200×630, 1080×1080 (default 1200×630)
- Formats: PNG, JPEG, WebP
- Use it for: In-product milestone and badge unlocks; Usage anniversaries; Community and course completions

## Previews
- English: ![Achievement card template rendered in English at 1200×630 with the built-in VectorFast brand kit.](https://vectorfast.ai/i/achievement-card.png?brand=default&date=Oct%2030%2C%202026&h=630&metric=1K&subtitle=Your%20brand%20kit%20has%20been%20busy.%20Here%20is%20to%20the%20next%20thousand.&title=First%201%2C000%20images%20rendered&user_name=Ana%20Lima&w=1200&sig=6LYmNBsRTwc_DKXJ6t1VdhXHkZMIs_H1KRc_ky0uBXM)
- Chinese: ![Achievement card template rendered in Chinese at 1200×630 with the built-in VectorFast brand kit.](https://vectorfast.ai/i/achievement-card.png?brand=default&date=2026%20%E5%B9%B4%2010%20%E6%9C%88&h=630&metric=1000&subtitle=%E6%AF%8F%E4%B8%80%E5%BC%A0%E9%83%BD%E7%AC%A6%E5%90%88%E5%93%81%E7%89%8C%E8%A7%84%E8%8C%83%EF%BC%8C%E6%84%9F%E8%B0%A2%E4%BD%A0%E4%B8%80%E8%B7%AF%E5%90%8C%E8%A1%8C%E3%80%82&title=%E7%B4%AF%E8%AE%A1%E6%B8%B2%E6%9F%93%E4%B8%80%E5%8D%83%E5%BC%A0%E5%93%81%E7%89%8C%E5%9B%BE&user_name=%E6%9E%97%E5%AE%89%E5%A8%9C&w=1200&sig=VsvRy0VUunxNRMmxMiS0y3Fhu3fpJMArcBBD0Hiex1k)

## Parameters
All string params are trimmed. Limits come from the schema `POST /v1/renders` validates.

| Param | Type | Required | Limit | Notes |
| --- | --- | --- | --- | --- |
| `title` | string | yes | ≤ 80 chars | The achievement, such as "100 renders shipped". |
| `subtitle` | string | no | ≤ 140 chars | One line of congratulations or context. |
| `metric` | string | no | ≤ 10 chars | Number inside the medal; the brand logo shows when omitted. |
| `date` | string | no | ≤ 24 chars | Free text; the template does not parse dates. |
| `user_name` | string | no | ≤ 40 chars | Who earned it. |
| `avatar_url` | image URL | no | — | Image URL. Remote images are not enabled yet (the allowlist is empty), so leave it out; the template draws a fallback. |

## Ask an agent
Prompt:

> Ana Lima just shipped her 100th render with us. Make a shareable achievement card she can post: "100 renders shipped", one line of congratulations, dated October 2026.

The MCP `render` tool call it should become:

```json
{
  "name": "render",
  "arguments": {
    "template": "achievement-card",
    "params": {
      "title": "100 renders shipped",
      "subtitle": "Every one on brand. Thanks for building with us.",
      "metric": "100",
      "date": "October 2026",
      "user_name": "Ana Lima"
    }
  }
}
```

## REST
```bash
curl https://vectorfast.ai/v1/renders \
  -H "Authorization: Bearer $VECTORFAST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "template": "achievement-card@1",
  "format": "png",
  "width": 1200,
  "height": 630,
  "params": {
    "title": "100 renders shipped",
    "subtitle": "Every one on brand. Thanks for building with us.",
    "metric": "100",
    "date": "October 2026",
    "user_name": "Ana Lima"
  }
}'
```

## Signed URL (server-side Node.js)
Per-key signing secrets are not issued yet in early access; until then, reuse the signed `url` that `POST /v1/renders` returns. The algorithm below is what the server verifies. Keep the secret on your server.

```js
import { createHmac } from 'node:crypto'

// Server-side only. Never ship the signing secret to a browser, a mobile app or a repo.
const SIGNING_SECRET = process.env.VECTORFAST_SIGNING_SECRET

function encode(value) {
  return encodeURIComponent(value).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase())
}

export function signRenderUrl({ template, format = 'png', params, brand, width, height, keyId }, secret = SIGNING_SECRET) {
  const query = {}
  for (const [key, value] of Object.entries(params)) {
    if (value === undefined || value === null)
      continue
    query[key] = typeof value === 'string' ? value : Array.isArray(value) ? JSON.stringify(value) : String(value)
  }
  if (brand) query.brand = brand
  if (keyId) query.k = keyId
  if (width) query.w = String(width)
  if (height) query.h = String(height)

  const canonical = Object.entries(query)
    .map(([key, value]) => [encode(key), encode(value)])
    .sort((a, b) => (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0))
    .map(([key, value]) => key + '=' + value)
    .join('&')
  const path = '/i/' + template + '.' + format
  const sig = createHmac('sha256', secret).update(path + '?' + canonical).digest('base64url')
  return 'https://vectorfast.ai' + path + '?' + (canonical ? canonical + '&' : '') + 'sig=' + sig
}

const url = signRenderUrl({
  template: 'achievement-card',
  format: 'png',
  width: 1200,
  height: 630,
  params: {
    "title": "First 1,000 images rendered",
    "subtitle": "Your brand kit has been busy. Here is to the next thousand.",
    "metric": "1K",
    "date": "Oct 30, 2026",
    "user_name": "Ana Lima"
  },
})
```

## FAQ
### Which sizes does the achievement-card template support?
1200×630, 1080×1080. The default is 1200×630; pass width and height to pick another supported size.

### Which parameters are required?
title. Every other parameter is optional and has a rendering default.

### Does rendering the same parameters twice cost twice?
No. The same template version, parameters, brand kit version, format, and size produce the same cache key, so a repeat request is served from cache instead of rendering again. Billing is not connected yet in early access.

## Related
- All templates: https://vectorfast.ai/render/templates
- Template reference: https://vectorfast.ai/render/docs/templates
- Connect Claude: https://vectorfast.ai/render/agents/claude