DEV Community

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

Posted on

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

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.

Top comments (0)