AO3 WhatsApp Group Chat Generator

1. Copy the Work Skin CSS below and create a new Work Skin on AO3.
2. Use the generator to build your chat HTML.
3. Paste the generated HTML into your work (while the skin is selected).

1. Work Skin CSS (copy this first)

On AO3 → Dashboard → Skins → Work Skins → Create New Work Skin → paste the CSS below into the CSS box → Save.
Then select that skin when you post or edit your work.

Full CSS for the WhatsApp skin

2. Group / Header settings

Theme

Group name

Members line (shown under group name) Profile / group icon URL Bottom typing bar text (optional) Typing bar “from” name (usually the POV character)

3. Add a message

Direction

Sender name

Name color

Time

Message text

Optional extras

Quote (reply) – sender of quoted message Quote text Quote color class Image URL Image alt text Mark as unread (outgoing) Big emoji style (onemoji)

Messages in chat (0)

4. Generated HTML (paste into your AO3 work)

Output

Notes

Create the Work Skin on AO3 first, then select it when posting the work.
Host images on a reliable host (imgbb, postimages, etc.).
For consecutive bubbles from the same person, just add multiple messages with the same direction + name.
Info / system lines → choose Direction = Info.
For blue links put <span class="link">https://example.com</span> inside the message text.