Can users share these on social media?

Yes. The signed URL is a permanent image link. Set it as the og:image on a share page, or let users download the image directly.

How do rarity colors work?

Pass a rarity name (Common, Rare, Epic, Legendary) as a variable. The template maps each rarity to a different glow color automatically.

Can I do a Year Wrapped campaign?

Yes. Build a recap template with stat variables. At year end, mint one URL per user with their data. Ship it in a day.

What about certificates?

Works great for course completions and awards. Make a certificate template with variables for name, course, date, and certificate ID.

USE CASE

ENGAGEMENT

Achievement Cards People Actually Share

When a user hits a milestone, give them an image they can post. One template per achievement type, one URL per user.

OUTPUT PREVIEW

SCALE 1:1

Achievement Unlocked

First DeployShipped your first project to production

Legendary+500 XP@player_one

Template + variables = image. That's the whole flow.RENDERED

SECTION 01

A Push Notification Is Not Shareable

Your user hits a milestone. 100-day streak, first deploy, 10,000 steps. You send a push that says "Congrats!" They see it, maybe smile, and move on. Nobody screenshots a toast notification.

Spotify Wrapped works because the output is a good-looking image you can post. But building your own image generation for every achievement type is a real engineering project. Most teams skip it.

SECTION 02

One Template Per Achievement Type

Make a template for each kind of achievement: badges, year-in-review cards, certificates. Each template takes variables like the user's name, stats, and rarity level.

When a user unlocks something, mint a signed URL with their data. Give them the image link. They share it on Twitter, LinkedIn, wherever. You get organic reach without paying for ads.

SECTION 03

Example

FIG. 02

achievement.ts

Shell

1// User just hit a milestone — mint their achievement card2const res = await fetch("https://api.htmlpix.com/v1/url", {3  method: "POST",4  headers: {5    Authorization: `Bearer ${process.env.HTMLPIX_KEY}`,6    "Content-Type": "application/json",7  },8  body: JSON.stringify({9    templateId: ACHIEVEMENT_TEMPLATE_ID,10    variables: {11      title: "First Deploy",12      description: "Shipped your first project to production",13      username: "player_one",14      xp: "+500 XP",15      rarity: "Legendary",16      accentColor: "#f59e0b",17    },18    width: 1200,19    height: 630,20  }),21});2223const { url } = await res.json();24// url → shareable image link for Twitter, LinkedIn, etc.

Copy, paste, run. That's it.READY TO RUN

SECTION 04

Integration Snippets

lib/achievements.ts

TypeScript

type Rarity = "Common" | "Rare" | "Epic" | "Legendary";

export async function mintAchievementCard(opts: {
  title: string;
  description: string;
  username: string;
  xp: string;
  rarity: Rarity;
}) {
  const res = await fetch("https://api.htmlpix.com/v1/url", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.HTMLPIX_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      templateId: process.env.ACHIEVEMENT_TEMPLATE_ID,
      variables: opts,
      width: 1200,
      height: 630,
    }),
  });

  const { url } = await res.json();
  return url; // Ready to share on social media
}

SECTION 05