CODEWITHSUNDEEP
node.jsreactjswidgetchatlive
Shaneeyb
Shaneeyb

Reputation: 145

Building a Live Chat Widget from Scratch using React

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.

Upvotes: 6

Views: 8269

Answers (1)

Antek
Antek

Reputation: 650

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

Upvotes: 15

Related Questions