Lifecycle messaging

생애주기 메시징

Match messages to moments such as signup, first purchase, and repeat purchase.

···
html
<div class="msg"><div class="events"><b id="event">SIGN UP</b><span>EVENT</span></div><div class="wire">→</div><div class="card"><small>MESSAGE</small><strong id="message">START HERE</strong><i id="bar"></i></div></div>
css
.msg{width:min(90%,560px);display:flex;align-items:center;gap:clamp(8px,3vmin,25px);font:900 clamp(10px,max(1.8vmin,1vw),16px)/1.1 sans-serif}.events,.card{flex:1;min-width:0;border:2px solid var(--fg);padding:clamp(12px,3vmin,28px);background:var(--surface)}.events b,.card strong{display:block;font-size:clamp(12px,3vmin,24px);white-space:nowrap}.events span,.card small{display:block;color:var(--muted);font-size:clamp(10px,max(1.5vmin,1vw),12px);margin-top:12px}.card small{margin:0 0 12px}.wire{font-size:clamp(16px,5vmin,36px);color:var(--accent)}.card i{display:block;height:5px;width:70%;background:var(--accent);margin-top:14px;animation:pulse 2s infinite}@keyframes pulse{50%{width:100%;opacity:.5}}
js
const steps=[['SIGN UP','START HERE'],['FIRST BUY','HOW TO USE'],['REPEAT','THANK YOU']];let step=0;function show(){document.querySelector('#event').textContent=steps[step][0];document.querySelector('#message').textContent=steps[step][1];step=(step+1)%steps.length}show();setInterval(show,1800);

Lifecycle messaging changes the purpose of communication according to a customer's state or action. A signup message can help someone start, while a post-purchase message can guide use and the next experience.

In the demo, each incoming event changes the message on the right. A real journey also needs an event condition, a delay, and a way to prevent overlapping sends.

More messages are not the goal. Cancel a delayed prompt if the customer has already taken the requested action.

When to use

Use it to design messages from signup through first value and post-purchase care.

Open as page ↗