Building a Live Chat Widget from Scratch using React

Question

I am trying to build a Live chat Widget from scratch using React.js and Node.js and was wondering if anyone knows of any resources or tutorials to make it?

I'm trying to do make one but I don't want to use any 3rd party apps because of the long-term cost (everyone has a free trial but it's paid monthly after that) and I would love the guided experience of building it.

Any information helps! Thanks so much for your time.

Vehement

Answer 1

I recommend you start with my blog article series about how to build a web widget. This is a step-by-step complete tutorial with GitHub repositories.

You already know what a widget is, so you can start reading from part 2: Web widgets (Part 2): Widget him! - how to make a widget and load it to the website.

Part 3: Web widgets (Part 3): API Cookbook is about how to make an API for the widget.

The bonus part: Web widgets (Bonus): Why iframe? is about the benefits of loading widgets into an iframe.

If you need UI components for your chat, please check my React chat library: https://github.com/chatscope/chat-ui-kit-react.

Additional useful library for managing chat state in react is: React headless chat hook.

For message transport, you can use a plain websocket, but it's less painful to use Socket.io or uWebsockets

Chaplet

Wow this helps so much, I was just going to jerry-rig it but this is huge! Thank you so much! – Vehement

For the "Web Series (part 2) widget him!", after we do everything, are we supposed to still have an echo of whatever we type in? – Vehement

Yes, you can check this by running both apps (loader and widget) on branches stage-2-3 – Chaplet

@Vehement If my answer solved your issue, please mark it as accepted. Thanks! – Chaplet

@Chaplet You are super awsome. – Crew

These are great resources. – Mien