microsoft/omnichannel-chat-widget

microsoft/omnichannel-chat-widget

Description: Omnichannel Live Chat Widget UI Components offers a re-usable component-based library to help create a custom chat widget that can be connected to the Dynamics 365 Customer Service experience.

Language: TypeScript

License: MIT

Stars: 69

Forks: 74

Open issues: 44

Created: 2022-04-11T22:08:25Z

Pushed: 2026-06-09T15:42:09Z

Default branch: main

Fork: no

Archived: no

README:

Omnichannel Live Chat Widget UI Components

@microsoft/omnichannel-chat-widget is a React-based UI component library which allows you to build your own live chat widget experience using @microsoft/omnichannel-chat-sdk.

> NEW! Check out our new Developer Guide, which has detailed explanations of all component interfaces accompanied with sample code.

> NEW! Veresion 1.2.0 introduces draggable widget, allowing the widget panel to move anywhere in the browser window. Set draggableChatWidgetProps.disabled to true to disable this behavior. See interface.

Table of Contents

1. [Introduction](#introduction) 1. [Installation](#installation) 1. [Example Usage](#example-usage) 1. [Components](#components) 1. [See Also](#see-also)

Introduction

Omnichannel Live Chat Widget UI Components offers a re-usable component-based library to help create a custom chat widget that can be connected to the Dynamics 365 Customer Service experience.

For more information about Live Chat Widget, see here.

Releases

New releases are published on a regular basis to ensure the product quality.

Chat Widget

| Version | Docs | Release Date | End of Support | Deprecated | | -- | -- | -- | -- | -- | | 1.5.0 | Release Notes | 2023-11-21 | 2024-11-21 | | | 1.4.0 | Release Notes | 2023-10-25 | 2024-10-25 | | | 1.3.0 | Release Notes | 2023-09-18 | 2024-09-18 | | | 1.2.3 | Release Notes | 2023-09-07 | 2024-09-07 | | | 1.2.2 | Release Notes | 2023-08-16 | 2024-08-16 | | | 1.2.1 | Release Notes | 2023-07-24 | 2024-07-24 | | | 1.2.0 | Release Notes | 2023-07-20 | 2024-07-20 | | | 1.1.0 | Release Notes | 2023-06-08 | 2024-06-08 | | | 1.0.5 | Release Notes | 2023-05-26 | 2024-05-26 | | | 1.0.4 | Release Notes | 2023-05-08 | 2024-05-08 | | | 1.0.3 | Release Notes | 2023-04-24 | 2024-04-24 | | | 1.0.2 | Release Notes | 2023-04-06 | 2024-04-06 | | | 1.0.1 | Release Notes | 2023-03-23 | 2024-03-23 | | | 1.0.0 | Release Notes | 2023-03-22 | 2024-03-22 | |

Chat Components

| Version | Docs | Release Date | End of Support | Deprecated | | -- | -- | -- | -- | -- | | 1.1.0 | Release Notes | 2023-12-12 | 2024-12-12 | | | 1.0.9 | Release Notes | 2023-12-07 | 2024-12-07 | | | 1.0.8 | Release Notes | 2023-10-31 | 2024-10-31 | | | 1.0.7 | Release Notes | 2023-09-13 | 2024-09-13 | | | 1.0.6 | Release Notes | 2023-08-18 | 2024-08-18 | | | 1.0.5 | Release Notes | 2023-07-20 | 2024-07-20 | | | 1.0.4 | Release Notes | 2023-06-20 | 2024-06-20 | | | 1.0.3 | Release Notes | 2023-06-08 | 2024-06-08 | | | 1.0.2 | Release Notes | 2023-06-06 | 2024-06-06 | | | 1.0.1 | Release Notes | 2023-04-04 | 2024-04-04 | | | 1.0.0 | Release Notes | 2023-03-15 | 2024-03-15 | |

Installation

npm i @microsoft/omnichannel-chat-sdk
npm i @microsoft/omnichannel-chat-widget

or

yarn add @microsoft/omnichannel-chat-sdk
yarn add @microsoft/omnichannel-chat-widget

The repo also contains the ``@microsoft/omnichannel-chat-components package, which is a collection of UI components. The @microsoft/omnichannel-chat-widget`` package is an integration of the Chat SDK and the UI components. To install the UI components separately, do

npm i @microsoft/omnichannel-chat-components

or

yarn add @microsoft/omnichannel-chat-components

Example Usage

The basic example below takes in the `````` component along with the Chat SDK to create a customized Omnichannel chat widget. > :warning: The Chat SDK has to be _initialized_ before being passed in.

import * as React from "react";

import { LiveChatWidget } from "@microsoft/omnichannel-chat-widget";
import {…