tooladvanced4-5 hours

Live Chat

Embed a chat widget on your website, manage conversations from an agent console, and follow up via email — powered by Commander Tables, Contacts, and Automations. Replaces Intercom, Drift, and Crisp.

What You'll Build

A live chat system with an embeddable customer widget and an agent console for managing conversations. Replaces Intercom, Drift, and Crisp.

Sections Included (5)

Agent Console

Split-pane inbox: conversation list on left, active chat on right with message input, customer info sidebar

Chat Widget

Embeddable chat widget for customer websites with pre-chat form, typing indicators, and file sharing

Canned Responses

Manage saved replies with shortcuts (type /greeting to insert), categories, and usage stats

Widget Settings

Configure widget appearance, welcome message, operating hours, pre-chat form fields, auto-reply

Dashboard

Metrics: open conversations, avg response time, resolution rate, satisfaction score, agent workload

Design

Colours: Trust-focused — blue (#2563EB) primary, white background, light blue (#EFF6FF) agent bubbles, light grey (#F3F4F6) customer bubbles, green (#059669) resolved, yellow (#D97706) waiting, red (#DC2626) urgent
Typography: Geist sans-serif throughout. Clear hierarchy: section headers, card titles, body text. Readable message font size (14-16px).
Mood: Professional, responsive, trustworthy. Chat should feel instant and personal.

Details

Category: tool
Difficulty: advanced
Time: 4-5 hours
Framework: react
Commander Tools: Tables, Contacts, Automations, Email, Chats

Related Blueprints