Social MediaStable

Chat Ad

Sourcecomponents/social/ChatAd.astro

The chat ad

An ugly ad built to look like a real chat screenshot — the app’s own header, bubbles and input bar. On purpose it uses none of the brand’s design; it has to read as a screenshot someone shared, not an ad. Tell the story as a private conversation and drop the product in naturally.

Pick the messenger your audience actually uses. Set it with app.

WhatsApp · Feed 1080 × 1350

Instagram DM · Story 1080 × 1920

iMessage · Feed 1080 × 1350

iMessage · Story 1080 × 1920

Reaction repost

The same chat dropped onto a neutral background as a screenshot card, with a casual reaction line above it — the way people share a screenshot with a comment like “warum bin ich angegriffen 💀”. Wrap the ad (with bare) in <ReactionPost>.

Reaction · Feed 1080 × 1350

Parts

Skin — app switches the whole look: WhatsApp (teal header, green bubbles), Instagram (gradient ring + gradient bubbles), iMessage (grey + blue).
Header — a contact name + avatar in the app’s own style.
Bubbles — in for “them”, out for “you”. Bold a word (a name) with <b>.
Typing — an optional “…” bubble to build a beat.
Input bar — a fake field for realism.

Props

Prop	Type	Default	Notes
`app`	'whatsapp' \| 'instagram' \| 'imessage'	`'whatsapp'`	Which messenger to imitate. Each gets its real header, bubble colours & input bar.
`format`	'portrait' \| 'story'	`'portrait'`	portrait = 1080×1350. story = 1080×1920.
`contact`	string	`'Miriam · Alchemy'`	Name in the chat header.
`status`	string	`per app`	“online” (WhatsApp) / “Aktiv vor 3 Min.” (IG). Ignored on iMessage.
`initials / avatar`	string	`'M'`	Header avatar — initials, or an image via avatar.
`bubbles`	{from,text}[]	`[]`	The messages. from: 'in' (them) or 'out' (you). text takes inline HTML — e.g. <b> for a name.
`typing`	boolean	`false`	Show a “…” typing bubble at the end.

Usage

Write it like people actually text — lowercase, emoji, short. The product lands as a natural mention, not a pitch.

<ChatAd
  app="whatsapp"
  format="portrait"
  contact="Lena 💬"
  initials="L"
  bubbles={[
    { from: 'in',  text: 'ok deine website ist echt schön 😍 wer hat die gemacht?' },
    { from: 'out', text: 'hab ich selber gemacht — mit <b>Sparklin</b>' },
    { from: 'in',  text: 'WAS. du kannst doch gar kein design' },
    { from: 'out', text: 'link ist in meiner bio 👀' },
  ]}
/>

Rules

Keep it short — 4–7 bubbles, a real back-and-forth.

Let the friend ask, not the brand tell.

Don't

Brand it. No logos, no tokens — it must look native.

Write like marketing. Text like a human.