React Conversational UI

  • Add an extensible, customizable chatbot interface to your React apps. Integrates with popular chat bot services.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Conversational UI Header
  • Add a Customizable Chat Interface to your React App

    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


All KendoReact Components

Next Steps