Customer Chat Demo

Click the gear in the top right to set the background URL and Connect chat widget. Press P for present mode, ⌘ . or Ctrl . to open settings.

Exit present

Demo Settings

Display URL

Background iframe. Many sites block iframing — install an "Ignore X-Frame Options" extension if needed.

Widget Mode

Default uses the Connect Communications widget snippet. Custom uses our built-in chat UI talking to a Connect contact flow directly.

Connect Widget Picker

Saved snippets show here. Team-shared come from widgets.json; your own ones save locally.

Connect Snippet

Paste the full snippet — including the <script> tags is fine.

Connect Instance

Pulled live from your AWS account.

Contact Flow

Active CONTACT_FLOW types only. Must be a chat-capable flow (e.g. one that calls a Lex bot or AI agent).

Display name

Header text

Welcome message (shown by widget on open)

Auto-open chat on load

Programmatically open the Connect widget when the page loads.

Theme presets

Icon background

Icon foreground

UI accent

Tints the gear, buttons, and badge accents.

Custom widget styling

Position

Panel size

Font family

Font size

Corner radius

Bubble icon

Colors

Header bg

Header text

You bubble bg

You bubble text

Bot bubble bg

Bot bubble text

Send button

Default language

Sent to Connect as language contact attribute. Customer can also switch from the chat menu.

Toggle features

Formatting toolbar

Bold, italic, list, link.

Emoji picker

😀 button on the toolbar.

File attachments

📎 button. Real Connect attachment upload.

Markdown rendering

Render bot/agent messages as markdown.

Notification sound

Soft ping when a new message arrives while the panel is closed.

Download transcript

Menu item that exports the conversation as .txt.

End chat button

Menu item that lets the customer end the conversation.

Re-engage after end

"Start new chat" button when the conversation is over.

Voice call

Enable voice call

Adds a phone button to the chat header. Uses Connect StartWebRTCContact + Chime SDK.

Voice contact flow

Optional. If empty, uses the chat flow above. Voice flows typically branch on $.Channel = VOICE.

Pre-chat form

Show pre-chat form

Collect customer details before starting chat or call. Sent as Connect attributes.

Field: name

Field: email

Field: phone

Branding URLs

Header logo URL

Optional. Shown to the left of the header text.

Bot avatar URL

Optional. Shown next to bot/agent messages.

Simulate proactive outbound

Generate a deep-link the customer would receive via SMS/email. Opening it auto-opens the chat with the agent already greeting them about the event.

Event type

Event description

Send from

Customer name (optional)

Send to

SES sandbox: only verified addresses can receive. Verify yours once at SES → Verified identities in the AWS console (us-east-1).

Custom email body

Body (plain text — paragraphs separated by blank line)

Button label

Sign-off

Footer line

My scenarios

Save the current event + email body as a reusable scenario so you can switch between them in seconds.

Email brand identity

These set the look of the outbound email and travel with the active preset.

Brand name

Tagline

Masthead color

Button / accent color

Logo URL

Optional. ~24px tall image; shown above the brand name in the email masthead.

Your SA name (used as the author when you publish)

Saved to your browser only. Other SAs will see this on presets you publish.

Anyone with this site can load any preset below. Only the original author should delete their entries.

No shared presets yet — publish one to get started.

No recent configs yet.