CASE STUDY · CUSTOMER ENGAGEMENT
Embeddable live chat for business websites
We designed and built a complete live-chat product, from the backend and real-time messaging layer to the agent web app and the embeddable widget, as the web channel of a client’s business messaging platform.
1line of embed code to add chat to any website
3parts: agent web app, embeddable widget and API
Real-timetwo-way messaging over WebSockets
18 monthsof continuous development
THE CHALLENGE
What needed to happen
The client’s businesses could already talk to customers inside its messaging app, but most customers first arrive on a business’s website. The client needed a web channel: a chat widget any business could drop onto its site without developer help, styled to match its brand, with conversations landing instantly in an inbox the team could answer from, and connected to the rest of the platform.
WHAT WE DELIVERED
One snippet of code,
live conversations on any website.
Agent web app
- Registration with email verification codes and password reset
- Dashboard and inbox management
- Conversation list with live chat view
- Sound and on-screen alerts for new messages
- File sharing with rich rendering of links and code
Embeddable chat widget
- A unique embed code per inbox, added with a single snippet
- Brand colours and appearance customised without code
- Live preview of the widget before publishing
- A reusable chat component library documented in Storybook
Real-time messaging backend
- Conversation rooms with instant two-way delivery
- Message history persisted for every chat
- Attachments stored securely in cloud object storage
- Inbox tokens that keep visitor sessions isolated
- Token-based authentication with refresh tokens
Platform integration
- An integration API so businesses on the wider platform can switch on web chat
- Webhooks to pass messages between channels
- REST endpoints for sending messages from bots and other systems
- Interactive API documentation
ENGINEERING & OPERATIONS
- TypeScript across the web app and API
- Socket.IO for low-latency, two-way messaging
- Redux Toolkit with persisted state so sessions survive reloads
- Security headers, request validation and hashed credentials
- In-memory caching for frequently accessed data
- Automated deployment pipeline with GitHub Actions
- Dependency vulnerability scanning and generated code documentation
WHAT IT MADE POSSIBLE
- A new web channel for the client’s business messaging platform
- Businesses able to add branded live chat to their websites in minutes
- Visitor conversations answered in real time from one shared inbox
- Web chat connected to the platform’s other channels and bots
- A reusable chat component library for future products
TECHNOLOGY
Tools we used
ReactTypeScriptRedux ToolkitAnt DesignSocket.IONode.jsExpressMongoDBMongooseAWS S3JWTSwaggerStorybookGitHub ActionsSnyk
Client name and confidential details withheld.MORE WORK
Other case studies
Travel & hospitality · Case studyA members-only social travel platformAn end-to-end ecosystem that helps verified members discover, host and join trips, events and dining experiences, chat in real time, and book premium yachts, villas and restaurants.5connected productsiOS · Android · Webplatforms~150API endpointsRead the case study ↗Healthcare & life sciences · Case studyAI clinical decision support for integrative medicineAn AI clinical decision-support platform for traditional-medicine practitioners, combining evidence-cited case analysis, safety checks, research tools and full clinic management.50+source textsWeb · AI · APIsplatforms~140API endpointsRead the case study ↗HR & payroll · Case studyPayroll operations & workforce management suiteA payroll operations console and an employee self-service app that bring time tracking, scheduling, time off, payments and payroll documents together for employers and their teams.3connected appsWeb · iOS · Androidplatforms3languagesRead the case study ↗Telecom & messaging · Case studyWhite-label email marketing & delivery platformA white-label email platform for a business messaging provider: campaigns, templates, contact lists, transactional APIs and SMTP relay, sold to clients through a three-level reseller hierarchy.3role-based portals4servicesAPI · SMTPsending channelsRead the case study ↗Media & publishing · Case studyAd-free news reading with micropaymentsA consumer news app where readers unlock premium articles without ads or paywalls using a micropayment wallet, and can earn credit through brand offers, surveys and data sharing.iOS · Androidplatforms4environments2+ yearsof continuous releasesRead the case study ↗Real estate & proptech · Case studyProperty intelligence for real-estate investorsA mobile property intelligence app that lets real-estate investors explore parcels on a map, see ownership, tax and sales data, and manage deals from the field.iOS · Androidplatforms5property data views2.5 yearsof releasesRead the case study ↗Education & edtech · Case studyAI-powered exam preparation platform for dental studentsAn AI-powered learning platform that prepares dental students for their national board exam with case-based courses, timed mock exams, a searchable e-library and an AI study assistant.37screens~130API endpoints20+subject librariesRead the case study ↗Retail · Case studyPaint store point of sale on ERPNextA custom point-of-sale system for a paint retailer, built on ERPNext with a fast React front end, a synced colour and tint catalogue, contractor job sites and integrated card payments.8POS screensReact · ERPNextstack3 monthsof developmentRead the case study ↗Events & exhibitions · Case studyTrade-show lead capture for exhibitorsA mobile CRM that helps exhibitors capture and qualify leads on the trade-show floor with voice notes that turn into text, photos, documents and a simple pipeline from pre-lead to converted.iOS · Androidplatforms20+screens5 monthsof developmentRead the case study ↗Energy & utilities research · Case studyMember research portal with AI-assisted searchAn enterprise Drupal platform for a research and advisory firm: a gated member research portal with personalised dashboards, single sign-on, Salesforce and events integrations, and AI-assisted research search.29custom modules3+ yearsof developmentDrupal · ReactstackRead the case study ↗