{"id":"4c597690-1292-4629-bf81-cc7f59c17ee2","name":"WhatsApp Chat Screenshot","slug":"whatsapp-chat-screenshot","category":"post-screenshots","description":"A realistic WhatsApp chat screenshot with the classic green and white bubbles, beige doodle wallpaper, contact header and blue read ticks — ideal for testimonials, product demos, landing pages and social proof.","sample_params":{"contact_name":"Sarah Mitchell","date":"Today","initials":"SM","message1":"Hey! Did you end up trying that new template service for the launch images?","message2":"Yes! One URL per image, rendered on the fly. Shipped the whole campaign in an afternoon 🚀","message3":"Okay that's it, sending this to the team right now 😄","status":"online","time1":"10:12","time2":"10:14","time3":"10:15"},"spec":{"name":"whatsapp-chat-screenshot","width":900,"height":1200,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n* { margin: 0; padding: 0; box-sizing: border-box; }\nhtml, body { width: 100vw; height: 100vh; overflow: hidden; }\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n  background: linear-gradient(135deg, #d8e3d6 0%, #eef0ea 50%, #dbe4de 100%);\n  display: flex; align-items: center; justify-content: center;\n}\n.phone {\n  width: 680px; height: 1040px; border-radius: 24px; overflow: hidden;\n  display: flex; flex-direction: column;\n  box-shadow: 0 28px 70px rgba(20, 45, 35, 0.28), 0 3px 10px rgba(20, 45, 35, 0.12);\n  background: #e5ddd5;\n}\n.topbar {\n  flex: none; background: #075e54; color: #ffffff;\n  display: flex; align-items: center; gap: 16px; padding: 20px 22px;\n}\n.back { flex: none; width: 14px; height: 14px; border-left: 3px solid #ffffff; border-bottom: 3px solid #ffffff; transform: rotate(45deg); margin-right: 2px; }\n.avatar {\n  flex: none; width: 62px; height: 62px; border-radius: 50%;\n  background: linear-gradient(135deg, #7fc7bd, #4f9a8f);\n  display: flex; align-items: center; justify-content: center;\n  color: #ffffff; font-size: 24px; font-weight: 700; letter-spacing: 1px;\n}\n.who { min-width: 0; flex: 1; }\n.cname { font-size: 26px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cstatus { font-size: 17px; color: rgba(255,255,255,0.78); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.icons { flex: none; display: flex; align-items: center; gap: 26px; color: #ffffff; }\n.chat {\n  flex: 1; overflow: hidden; position: relative;\n  background-color: #e5ddd5;\n  background-image: radial-gradient(rgba(84, 101, 111, 0.055) 1.6px, transparent 1.6px), radial-gradient(rgba(84, 101, 111, 0.04) 1.2px, transparent 1.2px);\n  background-size: 34px 34px, 34px 34px;\n  background-position: 0 0, 17px 17px;\n  display: flex; flex-direction: column; gap: 14px; padding: 24px 26px;\n}\n.datechip {\n  align-self: center; background: #fdf7e8; color: #54656f;\n  font-size: 15.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;\n  padding: 7px 14px; border-radius: 8px;\n  box-shadow: 0 1px 1px rgba(0,0,0,0.08); margin-bottom: 8px;\n}\n.msg {\n  position: relative; max-width: 76%;\n  padding: 12px 14px 10px; border-radius: 10px;\n  font-size: 21.5px; line-height: 1.42; color: #111b21;\n  box-shadow: 0 1px 1px rgba(0,0,0,0.10);\n  overflow-wrap: break-word;\n}\n.in { align-self: flex-start; background: #ffffff; border-top-left-radius: 0; }\n.in::before { content: ''; position: absolute; top: 0; left: -11px; width: 0; height: 0;\n  border-top: 13px solid #ffffff; border-left: 13px solid transparent; }\n.out { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 0; }\n.out::before { content: ''; position: absolute; top: 0; right: -11px; width: 0; height: 0;\n  border-top: 13px solid #dcf8c6; border-right: 13px solid transparent; }\n.meta { float: right; margin: 12px -4px -4px 12px; display: flex; align-items: center; gap: 5px; }\n.time { font-size: 15px; color: #667781; line-height: 1; }\n.ticks { display: block; }\n.inputbar { flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #f0f0f0; }\n.field {\n  flex: 1; background: #ffffff; border-radius: 28px; padding: 15px 24px;\n  font-size: 20px; color: #8696a0; box-shadow: 0 1px 1px rgba(0,0,0,0.06);\n}\n.send { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #075e54;\n  display: flex; align-items: center; justify-content: center; }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='phone'\u003e\n  \u003cdiv class='topbar'\u003e\n    \u003cdiv class='back'\u003e\u003c/div\u003e\n    \u003cdiv class='avatar'\u003e{{.initials}}\u003c/div\u003e\n    \u003cdiv class='who'\u003e\n      \u003cdiv class='cname'\u003e{{.contact_name}}\u003c/div\u003e\n      \u003cdiv class='cstatus'\u003e{{.status}}\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class='icons'\u003e\n      \u003csvg width='28' height='20' viewBox='0 0 28 20' fill='none'\u003e\u003crect x='1' y='2' width='18' height='16' rx='3' fill='#ffffff'/\u003e\u003cpath d='M20 8l7-5v14l-7-5z' fill='#ffffff'/\u003e\u003c/svg\u003e\n      \u003csvg width='22' height='22' viewBox='0 0 24 24' fill='#ffffff'\u003e\u003cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/\u003e\u003c/svg\u003e\n      \u003csvg width='6' height='24' viewBox='0 0 6 24' fill='#ffffff'\u003e\u003ccircle cx='3' cy='4' r='2.4'/\u003e\u003ccircle cx='3' cy='12' r='2.4'/\u003e\u003ccircle cx='3' cy='20' r='2.4'/\u003e\u003c/svg\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class='chat'\u003e\n    \u003cdiv class='datechip'\u003e{{.date}}\u003c/div\u003e\n    \u003cdiv class='msg in'\u003e{{.message1}}\u003cspan class='meta'\u003e\u003cspan class='time'\u003e{{.time1}}\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\n    \u003cdiv class='msg out'\u003e{{.message2}}\u003cspan class='meta'\u003e\u003cspan class='time'\u003e{{.time2}}\u003c/span\u003e\u003csvg class='ticks' width='24' height='14' viewBox='0 0 24 14' fill='none'\u003e\u003cpath d='M1.5 7.5l4 4L12 4' stroke='#53bdeb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/\u003e\u003cpath d='M9 8.5l3 3L18.5 4' stroke='#53bdeb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/\u003e\u003c/svg\u003e\u003c/span\u003e\u003c/div\u003e\n    {{if .message3}}\u003cdiv class='msg in'\u003e{{.message3}}\u003cspan class='meta'\u003e\u003cspan class='time'\u003e{{.time3}}\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e{{end}}\n  \u003c/div\u003e\n  \u003cdiv class='inputbar'\u003e\n    \u003cdiv class='field'\u003eMessage\u003c/div\u003e\n    \u003cdiv class='send'\u003e\u003csvg width='26' height='26' viewBox='0 0 24 24' fill='#ffffff'\u003e\u003cpath d='M3 21l19-9L3 3v7l13 2-13 2v7z'/\u003e\u003c/svg\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"contact_name":{"type":"string","required":true,"maxLen":40,"description":"Contact name shown in the chat header."},"date":{"type":"string","default":"Today","maxLen":20,"description":"Date chip shown above the conversation, e.g. 'Today' or 'Yesterday'."},"initials":{"type":"string","maxLen":3,"description":"Avatar initials shown in the header circle."},"message1":{"type":"string","required":true,"maxLen":280,"description":"First message — an incoming white bubble from the contact."},"message2":{"type":"string","required":true,"maxLen":280,"description":"Second message — your outgoing green bubble with blue read ticks."},"message3":{"type":"string","maxLen":280,"description":"Optional third message — an incoming white bubble; leave empty to show only two bubbles."},"status":{"type":"string","default":"online","maxLen":40,"description":"Presence line under the contact name, e.g. 'online' or 'last seen today at 09:41'."},"time1":{"type":"string","default":"10:12","maxLen":10,"description":"Timestamp inside the first bubble."},"time2":{"type":"string","default":"10:14","maxLen":10,"description":"Timestamp inside the second bubble."},"time3":{"type":"string","default":"10:15","maxLen":10,"description":"Timestamp inside the third bubble."}}}}