Chatbot UI Demo - AK Design System

Chatbot Designs

Four different directions for chatbots: classic support, floating sales widget, in-product copilot and concierge style.

Embedded panel Widget Copilot Concierge

Support

Sales

Copilot

Concierge

Compact Variants

Two embedded designs that work for websites, help centers and landing pages.

Design 1

Support Chat

A classic service chatbot for help centers, delivery questions and account issues.

Support Assistant

Live knowledge base connected

Resolve delivery and account issues quickly.

A classic service layout with clear suggestions, calm status feedback and accessible message contrast.

Track order Change address Refund policy

Hi Maya, I can pull your shipment status or update your invoice contact.

2 sec ago

Please check where order AK-2038 is currently delayed.

just now

Ask for support help...

Design 2

Sales Widget

A compact chatbot widget for landing pages focused on demos, pricing and lead qualification.

Floating website widget

Revenue Concierge

Qualifying leads in real time

Compact, high-contrast CTA style.

Optimized for landing pages that need a visible conversion widget without hiding the brand color.

Want a quick product recommendation or a pricing estimate?

Show me the plan for a 25-seat customer support team.

Book demo Pricing PDF ROI calculator

Type your growth question...

Wide Product Variants

Larger chatbot designs for SaaS products, portals and premium service experiences.

Design 3

Copilot Workspace

A wide chatbot surface for admin products, backoffice tools and internal assistants.

Best for authenticated products

Ops Copilot

Connected to CRM, tickets and release logs

I found three accounts at churn risk. The strongest signal is a drop in weekly active agents and slower first response time.

Draft an outreach plan and prioritize by ARR.

Prepared a segmented action list and added renewal dates, owner names and adoption blockers.

Suggested actions

Nova Retail High risk

Flowly GmbH Renewal window

Helio Freight Needs follow-up

Ask the copilot to summarize, draft or update records...

Design 4

Luxury Concierge

A softer, premium direction for hospitality, travel, events and high-end commerce.

Uses the same classes with another tone

Aurora Concierge

Booking assistant for premium journeys

24/7 live handoff

Curated recommendations with a more atmospheric UI.

This direction leans into richer gradients and softer cards for brands that want the assistant to feel more like a hosted service than a tool.

Weekend itinerary Private transfer Dining reservation

I prepared three Berlin evening plans with car service, tasting menus and late check-in support.

Keep it walkable and add one rooftop option.

Ask for a curated itinerary...