Marketing automation

마케팅 자동화

Use customer actions to trigger the right message and next step.

···
html
<div class="workflow"><div class="start">SIGNUP</div><div class="stem"></div><div class="decision">FIRST ACTION?</div><div class="fork"><span>NO</span><span>YES</span></div><div class="outcomes"><div class="help">SEND HELP</div><div class="next">NEXT STEP</div></div><div class="token"></div></div>
css
.workflow{position:relative;width:min(83%,490px);height:80%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:900 clamp(10px,max(3.7vmin,1vw),16px)/1 sans-serif;letter-spacing:.05em}.start,.decision,.outcomes>div{padding:clamp(7px,1.6vmin,15px);border:2px solid var(--fg);background:var(--surface);text-align:center}.start{background:var(--fg);color:var(--bg);width:50%}.stem{height:clamp(12px,3vmin,28px);border-left:2px solid var(--accent)}.decision{width:60%;border-color:var(--accent);color:var(--accent)}.fork{display:flex;width:78%;justify-content:space-between;position:relative;padding-top:clamp(17px,4vmin,35px);color:var(--muted)}.fork::before{content:'';position:absolute;top:clamp(8px,2vmin,17px);left:13%;right:13%;border-top:2px solid var(--accent)}.fork::after{content:'';position:absolute;top:0;left:50%;height:clamp(8px,2vmin,17px);border-left:2px solid var(--accent)}.outcomes{display:flex;width:100%;justify-content:space-between;gap:20%}.outcomes>div{flex:1;white-space:nowrap}.help{animation:choice 4s ease-in-out infinite}.next{animation:choice 4s ease-in-out 2s infinite}.token{position:absolute;width:clamp(9px,2vmin,18px);aspect-ratio:1;border-radius:50%;background:var(--accent);left:50%;top:3%;animation:travel 4s ease-in-out infinite}@keyframes travel{0%{top:3%;left:50%;opacity:0}15%{opacity:1}45%{top:50%;left:50%}70%{top:75%;left:12%}90%,100%{top:75%;left:12%;opacity:0}}@keyframes choice{0%,35%,100%{box-shadow:none}65%{box-shadow:5px 5px 0 var(--accent)}}

Marketing automation runs messages, waits, branches, and records based on defined customer actions and conditions. It can respond to context instead of sending everyone the same message at the same time.

The demo branches after signup depending on whether a first action is complete, sending help or a next-step prompt. Define conditions, frequency caps, and exit rules clearly.

Bad events or consent state can trigger irrelevant messages. Verify branches with real data and provide a way to stop the workflow.

When to use

Use it for onboarding, reactivation, or post-purchase flows after checking event quality and message consent.

Open as page ↗