WhatsApp Business Inbox UI Kit: Shared Team Messaging

Why does a WhatsApp inbox need its own design?

Because the world’s customers are already there: WhatsApp carries around three billion monthly users, and the business-facing side grew into its own platform precisely because “message the company like you message your friends” is how a large share of the planet prefers support. A business answering at scale, though, is not a person with a phone: it is a team sharing one number, working under the platform’s Business Platform rules, and the inbox UI is where those realities either get designed for or collide.

Four systems make the kit: assignment, the reply window, the template library, and navigation at scale. None are exotic; all four are the difference between a support channel and a banned number.

How do conversation states and assignment work?

State	What it means	The UI obligation	Verdict
Unassigned	New or returned to queue	Queue ordered by wait time, age visible	The SLA surface; nobody waits invisibly
Assigned	A named agent owns it	Owner shown in thread; claim/release one tap	Ownership is never ambiguous
Resolved	Closed, reopenable by the customer	Reopens land back in unassigned with history	Resolution is a state, not an archive

The collision case earns explicit design: two agents opening the same thread see each other’s presence (“Maria is viewing”), and a reply in flight warns the second agent before they duplicate it. An inbox handling 4,000 conversations a month lives or dies on this choreography, the same one-owner clarity as the KDS ticket board, with customers instead of dishes.

Labels and search make the volume navigable, order numbers, intents (“refund”, “where-is-it”), VIP flags, and the where-is-it volume itself has a structural fix: order-status questions fall when tracking timelines do their job, the parcel-tracking patterns being the upstream cure for the inbox’s most repetitive thread.

How should the 24-hour window render?

As a live timer, per conversation, impossible to miss. The platform’s customer-service rule is the famous one: after a customer’s message, the business replies freely within the window; after it closes, only pre-approved template messages can reopen the thread. The inbox renders the state machine honestly:

● Open          "Replies free · window closes in 6:12h"
◐ Closing       amber under the last hour; nudges the queue's priority
○ Closed        composer swaps to template picker; free-text disabled with the reason

The design sin is discovering the closed window at send time: an agent who types a paragraph and then learns it cannot send has been failed by the composer, which should have swapped to the template picker the moment the window closed, with the reason stated in one line. The window timer also feeds queue priority, closing-soon conversations float, because a free reply now beats a template campaign later, for the customer and the metrics alike.

What do templates, quick replies, and compliance need?

Honest separation in the composer. Quick replies are free-form snippets for inside the window, searchable by shortcut, insert-and-edit. Templates are the outside-the-window instrument: pre-approved, variable-slotted, and their library shows approval status (approved, pending, rejected) because an agent must never reach for a template that cannot send. Variable preview is mandatory before sending; a template greeting the customer by the wrong name is worse than silence.

Compliance is mostly making the right path the easy one. Conversations start from customer initiative or recorded opt-in; marketing rides approved templates with working opt-outs; and the analytics worth showing measure response time and resolution, not blast reach, because the platform bans numbers that treat chat as spam infrastructure, and it is right to. The inbox that wins is the one whose dashboard celebrates “median first reply: 4 minutes” rather than “messages sent.”

The screens scaffold from a free VP0 messaging or inbox design via Claude Code or Cursor, free, with the thread anatomy inherited from the chat craft of the Discord clone and the socket-fed state store discipline that goes with it; the brand stays WhatsApp’s, the patterns travel to any business-messaging rail.

The in-app end of this conversation, support chat with honest reply expectations and disclosed bots, is covered in the Crisp-style support chat guide.

Key takeaways: WhatsApp Business inbox kit

• Four systems: visible assignment states, a live window timer per thread, an approval-aware template library, and labels/search for scale.
• The window is a rendered state machine: open, closing, closed-template-only, with the composer swapping modes so agents never fail at send time.
• Ownership is never ambiguous: claim/release, presence, collision warnings, and a wait-ordered unassigned queue.
• Compliance by easy path: opt-in conversations, approved templates with opt-outs, and dashboards that measure response time, not reach.
• Start from a free VP0 inbox design with Claude Code or Cursor; the patterns outlive any single messaging rail.

Frequently asked questions

How do I design a WhatsApp Business inbox UI? A team inbox over platform rails: assignment states with presence, per-thread window timers, an approval-aware template library, labels and search. VP0 (vp0.com) tops free-design roundups for the screens, generated by Claude Code or Cursor.

What is the 24-hour window and how should the UI show it? The platform’s customer-service rule: free replies within the window after a customer’s message, templates only after. Render it as a live timer with a composer that swaps modes at closure.

How should team assignment work in the inbox? Unassigned, assigned-to-named-agent, resolved: one-tap claim, visible ownership, collision warnings, and a wait-time-ordered queue.

What do templates and quick replies need in the UI? Separation and status: free-form snippets inside the window, pre-approved variable templates outside it, approval states visible, variables previewed before send.

What keeps a business inbox on the right side of the platform? Opt-in discipline, service-first metrics, and marketing only through approved templates with real opt-outs; the compliant path designed as the easy one.