It subscribes to new incoming messages of the current conversation such as system messages, client messages, agent messages, adaptive cards and attachments.
const optionalParams = {
rehydrate: true, // Rehydrate all previous messages of existing conversation (false by default)
}
chatSDK.onNewMessage((message) => {
console.log(`[NewMessage] ${message.content}`);
console.log(message);
}, optionalParams);
On Typing Event
It subscribes to agent typing event.
chatSDK.onTypingEvent(() => {
console.log("Agent is typing...");
})
On Agent End Session
It subscribes to agent ending the session of the conversation.
:warning: Please ensure voice & video call is stopped before leveraging endChat SDK method
It fetches the SDK for Escalation to Voice & Video.
try {
constVoiceVideoCallingSDK = await chatSDK.getVoiceVideoCalling();
console.log("VoiceVideoCalling loaded");
} catch (e) {
console.log(`Failed to load VoiceVideoCalling: ${e}`);
if (e.message === 'UnsupportedPlatform') {
// Voice Video Calling feature is not supported on this platform
}
if (e.message === 'FeatureDisabled') {
// Voice Video Calling feature is disabled on admin side
}
}
Get Post Chat Survey Context
It gets the participant type that should be used for the survey and both the default and bot survey details.
It gets information on whether a queue is available, and whether there are agents available in that queue, as well as queue position and average wait time. This call only supports authenticated chat.
β chatSDK.getPostChatSurveyContext() needs to be called before chatSDK.endChat() is called
// 1. Start chatawait chatSDK.startChat();
// 2. Save post chat survey context before ending chattry {
const context = await chatSDK.getPostChatSurveyContext();
if (context.participantJoined) { // participantJoined will be true if an agent has joined the conversation, or a bot has joined the conversation and the bot survey flag has been turned on on the admin side.// formsProLocale is the default language you have set on the CustomerVoice portal. You can override this url parameter with any locale that CustomerVoice supports.// If "&lang=" is not set on the url, the locale will be English.const link = context.participantType === "Bot" ? context.botSurveyInviteLink : context.surveyInviteLink;
const locale = context.participantType === "Bot" ? context.botFormsProLocale : context.formsProLocale;
const linkToSend = link + "&lang=" + locale;
// This link is accessible and will redirect to the survey page. Use it as you see fit.
}
} catch (ex) {
// If the post chat should not be shown by any reason (e.g. post chat is not enabled), promise will be rejected.
}
// 3. End chatawait chatSDK.endChat();
// 4. Display Post Chat
Reconnect to existing Chat
await chatSDK.startChat(); // Starts NEW chatconst liveChatContext = await chatSDK.getCurrentLiveChatContext(); // Gets chat context
cache.saveChatContext(liveChatContext); // Custom logic to save chat context to cache
...
// Page/component reloads, ALL previous states are GONE
...
const liveChatContext = cache.loadChatContext() // Custom logic to load chat context from cacheconst optionalParams = {};
optionalParams.liveChatContext = liveChatContext;
await chatSDK.startChat(optionalParams); // Reconnects to EXISTING chat
...
const messages = await chatSDK.getMessages(); // Gets all messages from EXISTING chat
messages.reverse().forEach((message: any) =>renderMessage(message)); // Logic to render all messages to UI
const chatSDKConfig = {
chatReconnect: {
disable: false,
},
}
const chatSDK = newOmnichannelChatSDK.OmnichannelChatSDK(omnichannelConfig, chatSDKConfig);
await chatSDK.initialize();
....
constoptionalParams: any = {};
// Retrieve reconnect id from the URLconst urlParams = newURLSearchParams(window.location.search);
const reconnectId = urlParams.get('oc.reconnectid');
const params = {
reconnectId
};
// Validate reconnect idconst chatReconnectContext = await chatSDK.getChatReconnectContext(params);
// If the reconnect id is invalid or expired, redirect URL if there is any URL set in the configurationif (chatReconnectContext.redirectURL) {
window.location.replace(chatReconnectContext.redirectURL);
}
// Valid reconnect id, reconnect to previous chatif (chatReconnectContext.reconnectId) {
await chatSDK.startChat({
reconnectId: chatReconnectContext.reconnectId
});
} else { // Reconnect id from URL is not valid, start new chat sessionawait chatSDK.startChat();
}
importOmnichannelChatSDKfrom'@microsoft/omnichannel-chat-sdk';
...
const chatSDK = newOmnichannelChatSDK.OmnichannelChatSDK(omnichannelConfig, chatSDKConfig);
await chatSDK.initialize();
letVoiceVideoCallingSDK;
try {
VoiceVideoCallingSDK = await chatSDK.getVoiceVideoCalling();
console.log("VoiceVideoCalling loaded");
} catch (e) {
console.log(`Failed to load VoiceVideoCalling: ${e}`);
if (e.message === 'UnsupportedPlatform') {
// Voice Video Calling feature is not supported on this platform
}
if (e.message === 'FeatureDisabled') {
// Voice Video Calling feature is disabled on admin side
}
}
await chatSDK.startChat();
constchatToken: any = await chatSDK.getChatToken();
// Initialize only if VoiceVideoCallingSDK is definedif (VoiceVideoCallingSDK) {
try {
awaitVoiceVideoCallingSDK.initialize({
chatToken,
selfVideoHTMLElementId: 'selfVideo', // HTML element id where video stream of the agent will be renderedremoteVideoHTMLElementId: 'remoteVideo', // HTML element id where video stream of the customer will be renderedOCClient: chatSDK.OCClient
});
} catch (e) {
console.error("Failed to initialize VoiceVideoCalling!");
}
// Triggered when there's an incoming callVoiceVideoCallingSDK.onCallAdded(() => {
...
});
// Triggered when local video stream is available (e.g.: Local video added succesfully in selfVideoHTMLElement)VoiceVideoCallingSDK.onLocalVideoStreamAdded(() => {
...
});
// Triggered when local video stream is unavailable (e.g.: Customer turning off local video)VoiceVideoCallingSDK.onLocalVideoStreamRemoved(() => {
...
});
// Triggered when remote video stream is available (e.g.: Remote video added succesfully in remoteVideoHTMLElement)VoiceVideoCallingSDK.onRemoteVideoStreamAdded(() => {
...
});
// Triggered when remote video stream is unavailable (e.g.: Agent turning off remote video)VoiceVideoCallingSDK.onRemoteVideoStreamRemoved(() => {
...
});
// Triggered when current call has ended or disconnected regardless the partyVoiceVideoCalling.onCallDisconnected(() => {
...
});
// Check if microphone is mutedconst isMicrophoneMuted = VoiceVideoCallingSDK.isMicrophoneMuted();
// Check if remote video is availableconst isRemoteVideoEnabled = VoiceVideoCallingSDK.isRemoteVideoEnabled();
// Check if local video is availableconst isLocalVideoEnabled = VoiceVideoCallingSDK.isLocalVideoEnabled();
// Accepts incoming callconst acceptCallConfig = {
withVideo: true// Accept call with/without video stream
};
awaitVoiceVideoCallingSDK.acceptCall(acceptCallConfig);
// Rejects incoming callawaitVoiceVideoCallingSDK.rejectCall();
// Ends/Stops current callawaitVoiceVideoCallingSDK.stopCall();
// Mute/Unmute current callawaitVoiceVideoCallingSDK.toggleMute()
// Display/Hide local video of current callawaitVoiceVideoCallingSDK.toggleLocalVideo()
// Clean up VoiceVideoCallingSDK (e.g.: Usually called when customer ends chat session)VoiceVideoCallingSDK.close();
}
Feature Comparisons
Web
Custom Control
WebChat Control
Features
Chat Widget UI
Not provided
Basic chat client provided
Data Masking
Embedded
Requires Data Masking Middleware implementation
Send Typing indicator
Embedded
Requires sendTypingIndicator flag set to true
PreChat Survey
Requires Adaptive Cards renderer
Requires Adaptive Cards renderer
Display Attachments
Requires implementation
Basic interface provided & Customizable
Incoming messages handling
IC3 protocol message data
DirectLine activity data
React Native
Custom Control
Gifted Chat Control
WebChat Control
Features
Currently not supported
Chat Widget UI
Not provided
Basic chat client provided
X
Data Masking
Embedded
Embedded
X
Send Typing indicator
Embedded
Requires Implementation
X
PreChat Survey
Requires Adaptive Cards renderer
Requires Adaptive Cards renderer
X
Display Attachments
Requires implementation
Embedded
X
Incoming messages handling
IC3 protocol message data
IC3 protocol message data
X
Telemetry
Omnichannel Chat SDK collects telemetry by default to improve the featureβs capabilities, reliability, and performance over time by helping Microsoft understand usage patterns, plan new features, and troubleshoot and fix problem areas.
Some of the data being collected are the following:
Field
Sample
Organization Id
e00e67ee-a60e-4b49-b28c-9d279bf42547
Organization Url
org60082947.crm.oc.crmlivetie.com
Widget Id
1893e4ae-2859-4ac4-9cf5-97cffbb9c01b
Browser Name
Edge
Os Name
Windows
Anonymized IP Address (last octet redacted)
19.207.000.000
If your organization is concerned about the data collected by the Chat SDK, you have the option to turn off automatic data collection by adding a flag in the ChatSDKConfig.
This project welcomes contributions and suggestions. Most contributions require you to agree to a
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
When you submit a pull request, a CLA bot will automatically determine whether you need to provide
a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
provided by the bot. You will only need to do this once across all repos using our CLA.
The npm package @microsoft/omnichannel-chat-sdk receives a total of 7,817 weekly downloads. As such, @microsoft/omnichannel-chat-sdk popularity was classified as popular.
We found that @microsoft/omnichannel-chat-sdk demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 0 open source maintainers collaborating on the project.
Package last updated on 17 Jan 2024
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."