Conversational customer agent

대화형 고객 에이전트

Use a live question to choose a lookup, answer, or service action.

···
html
<div class="chatflow"><div class="ask">CUSTOMER <b id="question">WHERE IS MY ORDER?</b></div><div class="route"><span id="lookup">ORDER LOOKUP</span><span id="exchange">EXCHANGE GUIDE</span></div><div class="reply">AGENT <strong id="answer">ARRIVES THURSDAY</strong></div></div>
css
.chatflow{width:min(90%,610px);display:grid;gap:clamp(9px,3vmin,19px);font:800 clamp(10px,3.2vmin,15px)/1.2 var(--font-sans)}.ask,.reply{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:clamp(8px,2.5vmin,17px);border:2px solid var(--fg);background:var(--surface)}.ask b,.reply strong{color:var(--accent);text-align:right}.route{display:grid;grid-template-columns:1fr 1fr;gap:8px}.route span{text-align:center;padding:clamp(6px,2vmin,13px) 2px;border:2px solid var(--line);color:var(--muted);transition:.35s}.route span.active{border-color:var(--accent);background:var(--accent);color:white}
js
const cases=[['WHERE IS MY ORDER?','lookup','ARRIVES THURSDAY'],['WRONG SIZE','exchange','START AN EXCHANGE']];let n=0;function show(){const [question,route,answer]=cases[n];document.querySelector('#question').textContent=question;document.querySelector('#answer').textContent=answer;document.querySelectorAll('.route span').forEach(el=>el.classList.toggle('active',el.id===route));n=(n+1)%cases.length}show();setInterval(show,2300);

A conversational customer agent uses a live question and order context to look up information or perform a service action. Klaviyo said in 2026 that its customer agent draws on purchase history and marketing interactions.

The demo sends a delivery question to an order lookup and a sizing question to exchange guidance. The next action follows the current question rather than a fixed send schedule.

Provide a human path for unsupported policies or sensitive requests. Check both the basis for an answer and permission to act.

When to use

Use it when recurring questions need customer context and a useful follow-up.

Open as page ↗