Webix JavaScript Chat and Messenger widget review
In this article, we will take a detailed look at the new complex Chat-Messenger widget from Webix.
This app has become available with the release of Webix version 7.4. Unfortunately, opensource version users will not be able to access the new Chat-Messenger. It is only available in the Webix Pro version.
BTW. If you represent a software development company, you can get free access to all Webix Pro tools under the Webix partnership program.
However, users of all Webix versions can access Templates Catalog, which has a free Chat / Messenger JavaScript Template.
What are complex Webix widgets?
UI widgets are traditionally known as some UI elements of interaction like buttons, toolbars, grids. Webix develops the idea of UI components much deeper, offering compound UI solutions for various application tasks (File Management, Document Management, User Management, Task Management). Such solutions are included in the list of complex UI widgets. In practice, these solutions are ready-made Reactive Apps with their UI logic, backend layer, and detailed documentation. These applications are designed for integration into any web business applications and serve the purpose of saving working time and budget on the development of IT projects.
Chat-Messenger spec
Code
The widget is built as a Webix Jet app, which means:
- customizable Jet views to fine-tune interface chunks
- data and backend services to provide custom logic for working with data
- ES6 syntax.
Backend
- WebSockets technology for live updates
- token-based authentication
- ready-made Golang backend
Features
- user-friendly design
- private chats
- group chats
- ability to edit chats
- highly customizable
Free trial/demo
Documentation
Features overview
Webix Chat UI has a classic design. The left panel contains a list of chats\channels “Chats”. By clicking on “Users” tab, you can see a list of all contacts for the current account.
This division into chats and contacts is somewhat redundant. Most online messengers manage a general list. But the goal of Webix Chat is to provide as many UI templates as possible for further configuration and customization.
The Chats section displays chat rooms with 1 or more contacts. The user may run through the following functions:
- invite new users from the contact list to a conversation
- delete users from the conversation
- set a custom name for the chat
- set a custom image as your chat icon
- leave/delete the chat.
In the Users section, you can send direct messages to any contact. After starting a conversation, you can invite other users to join the conversation. In this case, a new chat room will be created, which will be shown in the Chats list.
Webix Chat-Messenger supports editing and deleting messages. When editing, the message text is uploaded to the message box. The user can only edit and delete their own messages.
The Users list supports displaying the status of contacts
· online
· offline
· DND
Built-in search works separately for the Charts and Users lists. The search is performed by
· contact name
· chat room name
Conclusion
Chat/Messenger JavaScript complex Webix widget is a full-featured SPA reactive App with a ready-made frontend and backend layer. This solution is designed for quick integration into any web project where you need to implement Chat-Messaging functionality. This application is based on the Webix Jet platform, which greatly simplifies further customization and support. For example, creating a new Design skin (for this purpose, you can use Webix Skin Builder), implementing new features, integrating with domain contacts list.
The Webix team thought through the chatting workflow in detail and designed a beautiful and concise interface with rich UI logic and a variety of UX cases.
You can download JavaScript Chat and Messenger widget form this link. You will have access to a 30-day trial. To prolong the trial period or get an extended trial, you can contact Webix managers.
The commercial license for Chat and Messenger widget is available in any Webix package. You can find the terms and prices on this page.
