How I Built FlowChat SDK: A Real-Time Customer Support Widget Using Spring Boot, React, MongoDB, and WebSockets

Lakshan Mihiranga — Sat, 30 May 2026 13:53:32 +0000

Over the past few weeks, I've been building a side project called FlowChat SDK - a real-time customer support widget designed to help developers add customer communication to their applications in minutes.

The idea came from a problem I encountered repeatedly while working on web applications.

The Problem

Whenever I wanted to add customer support chat to a project, I found myself facing the same challenges:

Many solutions were too expensive for startups and small businesses.
Integration often required large SDKs and complex setup processes.
Most platforms included dozens of features that many projects would never use.
Customization was often limited or locked behind premium plans.

I wanted something that was:

Lightweight
Easy to integrate
Real-time
Customizable
Developer-friendly

So I decided to build it myself.

Introducing FlowChat SDK

FlowChat is a real-time customer support widget that can be integrated into any website using a simple script tag.

The goal is straightforward:

Help developers and startups add modern customer communication to their products without spending days integrating chat systems.

Tech Stack
Backend

Java 21
Spring Boot 3
Spring Security
JWT Authentication
Spring WebSocket (STOMP)
MongoDB Atlas

Frontend

React
TypeScript
Tailwind CSS
Vite

Deployment

Vercel
Cloudflare Pages
MongoDB Atlas

System Architecture

The platform consists of three main components:

1. Admin Dashboard

The admin dashboard allows support agents to:

View conversations
Respond to users in real time
Customize widget appearance
Manage integrations

2. Widget SDK

The widget can be embedded into any website using a generated script.

Features include:

Floating chat widget
Real-time messaging
Mobile responsiveness
Live customization
Domain whitelisting

3. Spring Boot Backend

The backend handles:

Authentication
Conversation management
Message persistence
WebSocket communication
Tenant configuration

A simplified architecture looks like this:

Website Visitor
│
▼
FlowChat Widget
│
▼
WebSocket (STOMP)
│
▼
Spring Boot Backend
│
▼
MongoDB Atlas
│
▼
Admin Dashboard

Why I Chose Spring Boot

For this project, Spring Boot felt like the right choice because:

Excellent WebSocket support
Mature security ecosystem
Easy JWT integration
Strong MongoDB support
Familiar development experience

Implementing real-time messaging using STOMP over WebSockets was surprisingly straightforward once the authentication layer was in place.

One Challenge: Securing Widget Integrations

One concern I had early was:

What prevents someone from copying another customer's API key and embedding the widget elsewhere?

To solve this, I implemented domain whitelisting.

Each widget can only operate on approved domains configured by the customer.

This provides an additional layer of protection and helps prevent unauthorized usage.

Improving the Onboarding Experience

Initially, users needed to:

Create an account
Customize their widget
Copy the embed script
Download a demo HTML page
Test the integration manually

That worked, but it created unnecessary friction.

So I introduced a feature called:

Launch Hosted Demo

Now the flow is:

Create an account
Customize the widget
Click "Launch Hosted Demo"
Start chatting instantly

This allows users to experience the product in minutes without touching any code.

One of the biggest lessons from building FlowChat was:

Reducing onboarding friction often creates more value than adding new features.

Current Features

Real-time messaging
WebSocket communication
Widget customization
Domain whitelisting
Admin dashboard
Multi-tenant architecture
JWT authentication
MongoDB persistence

Lessons Learned

1. Simplicity Wins

It's tempting to build every feature you can think of.

The biggest progress came from focusing on one problem:

Customer communication.

2. Developer Experience Matters

The easier a product is to integrate, the more likely developers are to adopt it.

A simple integration flow can be more valuable than dozens of advanced features.

3. Ship Early

Many developers spend months planning.

Building and deploying an MVP quickly generates real feedback and reveals problems you would never discover during planning.

What's Next?

Some features I'm considering for future releases:

File attachments
AI-powered responses
Analytics dashboard
Team collaboration
Email integration
WhatsApp integration

Try FlowChat

Admin Dashboard:
https://flow-chat-sable.vercel.app/

Documentation:
https://flowchat-8w5.pages.dev/docs

I'm currently looking for feedback from developers, founders, and anyone building SaaS products.

If you've built something similar or have suggestions for improvement, I'd love to hear your thoughts.

DEV Community: Lakshan Mihiranga

How I Built FlowChat SDK: A Real-Time Customer Support Widget Using Spring Boot, React, MongoDB, and WebSockets