Weeks ago, our CTO, reached out to me and other co-workers to start researching bots, more specifically, chat-bots.
How can we implement this on an actual project?
The answer seems obvious, doesn’t it? A chat widget! Find the right package on NPM or Github, whether it’s for React, Angular, or Vue, and use it. But it’s not that easy. There was no package for the widget we needed. All I found was a lot of chat services; full- featured apps ready for enterprise users with a paid service, however, that’s not what we are looking for. So, how can we solve this?
Enter the widget!
That’s when we decided to create the React Chat Widget. An open source widget which can be added to your React App and voilá, you now have your own chat… well, not entirely, but we’ll get there soon.
Let’s see some code
The API is really simple and pretty straightforward. First, of course, you’ll have to add the package with either npm or yarn.
npm install react-chat-widgetyarn add react-chat-widget
Now, add the Widget to the root App component of our sample application.
The only required prop you’ll need is handleNewUserMessage which is the function that will receive the user’s message. You can then send it directly through a back-end API or do whatever else you may need to do.
Start adding text messages and responses to the incoming messages. The way you can do it is calling the function addResponseMessage(‘Response text’).
But let’s say you want to send a link instead of plain text. The function you need to call is addLinkSnippet(awesomeLink). This awesome link must be an object like:
{ title: 'Awesome page’, link: 'www.awesome-page.com’}
A snippet will be created with the title you specified and the link you intend to send. This doesn’t work both ways though. So only you, as a sender, can do this.
This is the basic API needed to make funcationalities work. You will see the widget interacting normally, sending and receiving messages in the correct order. By the way, Markdown styling is supported for the plain text messages! 😄
But this is not that customizable if we just leave it at that.
Custom styles to the rescue!
Although the default colors are amazing, I’m guessing they are not your apps color palette. Let’s change that for the sake of your design. You can add a custom title, subtitle, and avatar; and, of course, you can change every single element to match your design overriding them in the CSS.
Wrapping up
There are another features like custom components rendering and full screen that will not be covered here. Also, remember you’ll need to add a communication layer to your app to get this up and running.
Let’s rewind to the beginning of this post:
Chat-bots are an increasing market nowadays…
This is the perfect module to start your chat-bot. Start with the most basic ones, try Watson or api.ai and you’ll see that they’re great addition to your app. It will help you answer the most common questions about your business, without you going through every email copying and pasting responses.
What’s next?
This is just the beginning, we have so many ideas for future features such as notifications, more snippets and even support for multiple chats. We hope you find it useful!
If you have any suggestions, any idea you want to talk about, or find a bug, please post an issue or create a PR on GitHub and I’ll gladly reply it. Let us know what you think! Thanks to everyone at Wolox who helped build this project ❤
