JavaScript Chat UI Control

Overview

The JavaScript Chat UI is a lightweight and highly customizable control designed for creating modern chat interfaces. It displays conversations between two or more users, offering powerful features like real-time typing indicators, on-demand message loading, message suggestions, and a great user experience.

• JavaScript Chat UI demo

Templates

Supports templates for customizing the empty conversation area, messages, typing indicator, and more. These templates allow users to create a unique, personalized chat experience that integrates seamlessly into their applications.

Built-in themes

The JavaScript Chat UI supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by overriding SASS variables or using the Theme Studio application.

• Theme Studio application

JavaScript Chat UI code example

Easily get started with the JavaScript Chat UI using a few simple lines of HTML and TS code example as demonstrated below. Also explore our JavaScript Chat UI Example, which shows how to render and configure the JavaScript Chat UI.

<div>
    <div id="chat-ui"></div>
</div>

import { ChatUI, UserModel, MessageModel } from '@syncfusion/ej2-interactive-chat';

let customer: UserModel = {
    id: 'user-1001',
    user: 'Richard Rose'
};

let supportAgent: UserModel = {
    id: 'agent-1001',
    user: 'Donald Krish'
};

let chatMessages: MessageModel[] = [
    { text: 'Hi, I need help with my order.', author: customer },
    { text: 'Sure, could you provide your order ID?', author: supportAgent }
];

let chatUI: ChatUI = new ChatUI({
    messages: chatMessages,
    user: customer,
    width: '400px',
    height: '500px'
});

chatUI.appendTo("#chat-ui");