{"id":"fe8bc7d0-e227-45b7-aef4-d7edb1f05e82","name":"iMessage Chat Screenshot","slug":"imessage-chat-screenshot","category":"post-screenshots","description":"An authentic iMessage-style chat screenshot with a contact header, gray and blue bubbles and a 'Delivered' receipt — great for testimonials, product teasers and social proof in decks and landing pages.","sample_params":{"contact_name":"Sofia Marchetti","initials":"SM","message1":"Hey! Did you ship the new OG images yet? Marketing keeps asking 😅","message2":"Just did — every page renders its own card from one template URL now.","message3":"No more Figma exports. Ever.","timestamp":"Today 9:41 AM"},"spec":{"name":"imessage-chat-screenshot","width":900,"height":780,"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, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n  background: #ffffff; display: flex; flex-direction: column;\n}\n.nav {\n  flex: none; background: rgba(249, 249, 249, 0.97);\n  border-bottom: 0.5px solid #c6c6c8;\n  padding: 22px 28px 14px; position: relative;\n  display: flex; flex-direction: column; align-items: center;\n}\n.back {\n  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);\n  width: 17px; height: 17px; border-left: 4px solid #007aff; border-bottom: 4px solid #007aff;\n  border-radius: 2px; rotate: 45deg;\n}\n.avatar {\n  width: 78px; height: 78px; border-radius: 50%;\n  background: linear-gradient(180deg, #a8b0bc, #8a93a2);\n  color: #ffffff; font-size: 32px; font-weight: 600; letter-spacing: 1px;\n  display: flex; align-items: center; justify-content: center;\n}\n.contact {\n  margin-top: 8px; font-size: 19px; color: #1c1c1e;\n  display: flex; align-items: center; gap: 5px; max-width: 70%;\n}\n.contact span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.chev {\n  flex: none; width: 9px; height: 9px; border-top: 2.5px solid #b6b6ba; border-right: 2.5px solid #b6b6ba;\n  border-radius: 1px; rotate: 45deg; margin-top: 1px;\n}\n.chat { flex: 1; padding: 26px 30px 30px; display: flex; flex-direction: column; overflow: hidden; }\n.stamp { text-align: center; font-size: 18px; color: #8e8e93; font-weight: 500; margin-bottom: 22px; }\n.row { display: flex; margin-bottom: 14px; }\n.row.right { justify-content: flex-end; }\n.msg {\n  position: relative; max-width: 72%;\n  padding: 16px 24px; font-size: 27px; line-height: 1.32;\n  border-radius: 26px; overflow-wrap: break-word; white-space: pre-wrap;\n}\n.in { background: #e9e9eb; color: #000000; }\n.out { background: #007aff; color: #ffffff; }\n.tail::before {\n  content: ''; position: absolute; bottom: 0; width: 26px; height: 26px;\n}\n.tail::after {\n  content: ''; position: absolute; bottom: 0; width: 26px; height: 26px; background: #ffffff;\n}\n.in.tail::before { left: -9px; background: #e9e9eb; border-bottom-right-radius: 20px 17px; }\n.in.tail::after { left: -26px; border-bottom-right-radius: 13px; }\n.out.tail::before { right: -9px; background: #007aff; border-bottom-left-radius: 20px 17px; }\n.out.tail::after { right: -26px; border-bottom-left-radius: 13px; }\n.receipt {\n  text-align: right; font-size: 17px; font-weight: 600; color: #8e8e93;\n  margin: -6px 8px 0 0;\n}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='nav'\u003e\n  \u003cdiv class='back'\u003e\u003c/div\u003e\n  \u003cdiv class='avatar'\u003e{{.initials}}\u003c/div\u003e\n  \u003cdiv class='contact'\u003e\u003cspan\u003e{{.contact_name}}\u003c/span\u003e\u003ci class='chev'\u003e\u003c/i\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class='chat'\u003e\n  \u003cdiv class='stamp'\u003e{{.timestamp}}\u003c/div\u003e\n  \u003cdiv class='row'\u003e\u003cdiv class='msg in tail'\u003e{{.message1}}\u003c/div\u003e\u003c/div\u003e\n  \u003cdiv class='row right'\u003e\u003cdiv class='msg out{{if not .message3}} tail{{end}}'\u003e{{.message2}}\u003c/div\u003e\u003c/div\u003e\n  {{if .message3}}\u003cdiv class='row right'\u003e\u003cdiv class='msg out tail'\u003e{{.message3}}\u003c/div\u003e\u003c/div\u003e{{end}}\n  \u003cdiv class='receipt'\u003eDelivered\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 under the avatar in the chat header."},"initials":{"type":"string","maxLen":3,"description":"Initials shown inside the gray avatar circle, e.g. 'SM'."},"message1":{"type":"string","required":true,"maxLen":300,"description":"First message, shown as a gray incoming bubble from the contact."},"message2":{"type":"string","required":true,"maxLen":300,"description":"Reply, shown as a blue outgoing bubble."},"message3":{"type":"string","maxLen":300,"description":"Optional second blue outgoing bubble; leave empty to show only two messages."},"timestamp":{"type":"string","default":"Today 9:41 AM","maxLen":30,"description":"Centered gray timestamp above the conversation, e.g. 'Today 9:41 AM'."}}}}