Webinar Open Graph Image Template
A webinar card with a date tile, title, host avatars, and detail chips.
A webinar card with a date tile, title, host avatars, and detail chips.
Every Open Graph image template is included with Basic and Pro. Pick a plan to copy the code, install with the CLI, and download the raw SVG.
Already purchased? Log in
Use the Webinar template for live sessions, product demos, and online workshops. A date tile makes the day unmissable, the session title names the topic, two host avatars and a byline put faces to it, and the chip row answers length and price at a glance.
This template is a metadata image route for the Next.js App Router. The file exports size, contentType, and alt values plus a default async function that returns an ImageResponse. When the webinar page is shared, satori converts the JSX into an SVG document, the runtime rasterizes that SVG into a 1200 by 630 PNG, and Next.js serves the result and wires the og:image and twitter:image tags into the page head automatically. Change the date in code and every share updates with it, so a rescheduled session never posts the wrong day.
Install with the shadcn CLI using your Shadcn UI Blocks API key:
npx shadcn@latest add @shadcn-ui-blocks/og-image-webinar
The file lands at app/opengraph-image.tsx, which makes it the site wide share card. For a webinar, move it into that segment instead, for example app/webinars/zero-downtime/opengraph-image.tsx. You can also copy the code from this page straight into your project.
The card renders text with Inter, read from assets/fonts at your project root with node:fs so the font files never ship to the browser. Download the latin woff files for weights 400, 500, 600, and 700 from Fontsource and save them as assets/fonts/inter-latin-400-normal.woff and so on.
The content object holds the brand, the month and day for the tile, the title, the hosts byline, the initialsA and initialsB for the two avatars, a chips array, and the url. The tile expects a three letter month in caps and a short day. The avatars overlap; for a single host, drop the second and its byline. The chips take any short strings, so length, price, and format all fit. The "Webinar" chip in the corner is a fixed string in the layout.
satori supports a focused subset of CSS: flexbox layout only, flat colors, and an explicit display: flex on any element with multiple children. Keep those rules in mind if you rework the layout.