React Conversational UI

Overview

The React Conversational UI component enables you to add a great chat interface to any application. The Chat component has many customization options allowing it to easily extend its functionalities and allow the user to send and preview attachments like pictures, videos, contacts and more. The React component is very flexible and can be connected to any of the popular chat bots.

See React Conversational UI Overview demo

React Conversational UI - Overview, KendoReact UI Library

Chat Bot Integrations

Integration with bot services like Google DialogFlow and Microsoft Bot Framework comes out of the box. It will allow the user to find answers to the most common questions right away by communicating with a bot service using the KendoReact Chart.

See React Conversational UI Chat Bot Integrations demo

React Conversational UI - Chat Bot Integrations, KendoReact UI Library

Data Binding

The data for the React component can come from many different sources. We can have the data stored locally, load it and save it on the server, get it from a bot service or any streaming data service that can provide the data in JSON format.

See React Conversational UI Data Binding demo

Suggested Actions

The component offers the option to set up quick actions for the user to easily choose from, including directly calling the support team, writing an email or continuing to use the chat. Predefined options are a great way to show users all possible choices at once.

See React Conversational UI Suggested Actions demo

React Conversational UI - Suggested Actions, KendoReact UI Library

Message Attachments

The component accommodates different attachments and attachment layout for the messages. Attaching an image to a message or providing different layouts for a text attachment is a great way to enhance chat interactions.

See React Conversational UI Message Attachments demo

React Conversational UI - Message Attachments, KendoReact UI Library

Message Templates

The messages in the React Conversational UI component are fully customizable and can be modified to show different content. For example, show parsed markdown directly as a beautifully formatted message. Other options include rendering links, formatting value and including pictures or emoticons in the message. This will allow the user to better express themselves in a casual, or even a formal, chart conversation.

See React Conversational UI Message Templates demo

React Conversational UI - Message Templates, KendoReact UI Library

Toolbar

The Toolbar can be used to add any additional functionalities to the chat. We can provide the user with an option to attach an image, send a document, make a video conversation and many more.

See React Conversational UI Toolbar demo

React Conversational UI - Toolbar, KendoReact UI Library

Custom Rendering

We understand that each chat application has its specific and innovative features, and therefore we allow full customization of the component. This way you can add all cool and amazing features to the chat to make it unique.

See React Conversational UI Custom Rendering demo

React Conversational UI - Custom Rendering, KendoReact UI Library

Globalization

All built-in messages of the chat can be localized allowing each user to see the date and messages in their language and formatted based on the typical date formats for their culture.

See React Conversational UI Globalization demo

React Conversational UI - Globalization, KendoReact UI Library

Keyboard Navigation

The keyboard navigation feature provides the option to seemingly navigate through the messages and to send a message using only the keyboard.

See React Conversational UI Keyboard Navigation demo

Accessibility

We have added all needed WIA-ARIA attributes to make the component compliant with the Section 508 requirements and accessible for all screen readers. The message list is set as live region of type log to allow the screen readers to automatically read any new message as soon as they arrive.

See React Conversational UI Accessibility demo

React Conversational UI - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.