You're right, when using a custom chat launch button with the embedded code approach for the Omnichannel widget in mobile apps, you lose the out-of-the-box unread message count indicator. The Live Agent SDK, at the time of writing, doesn't directly expose an API to fetch this unread message count for custom UI elements.
However, you can achieve this functionality by leveraging the events provided by the Live Agent SDK and managing the unread message count within your mobile application's state. Here's a potential approach:
Leveraging SDK Events and Managing State in Your Mobile App:
- Subscribe to Relevant SDK Events: The Live Agent SDK emits various events during the chat lifecycle. You need to subscribe to the events that indicate new incoming messages from the agent. The most relevant events are likely:
newMessage: This event is triggered whenever a new message is received in the conversation. You'll need to filter these messages to identify those sent by the agent (as opposed to the customer).
- Maintain an Unread Message Counter in Your Mobile App:
- Introduce a variable in your mobile app's state management (e.g., using React's
useState, Vue's ref, or similar mechanisms in other frameworks) to keep track of the number of unread agent messages. Initialize this counter to zero.
- Implement Logic within the
newMessage Event Handler:
- When the
newMessage event is triggered:
- Check the
message.sender or a similar property of the message object to determine if the message was sent by an agent.
- If the message is from an agent and the chat window is currently minimized or not in focus (i.e., the user hasn't actively viewed the new message), increment your unread message counter.
- Update Your Custom Button UI:
- Bind the value of your unread message counter to a visual element on your custom chat launch button (e.g., a badge or a text overlay).
- Whenever the unread message counter is updated, the UI of your custom button should reflect the new count.
- Reset the Counter When the Chat Window is Opened:
- When the user taps your custom chat launch button and the live chat widget is displayed (or brought into focus), you need to reset your unread message counter back to zero. This indicates that the user has now seen the new messages.
Example (Conceptual React-like Implementation):
import { LiveChatWidget } from '@microsoft/omnichannel-chat-widget';
import React, { useState, useEffect } from 'react';
function CustomChatButton() {
const [unreadCount, setUnreadCount] = useState(0);
const [chatVisible, setChatVisible] = useState(false);
useEffect(() => {
const onNewMessage = (message) => {
if (message.sender === 'Agent' && !chatVisible) {
setUnreadCount((prevCount) => prevCount + 1);
}
};
const onChatVisibleChanged = (visible) => {
setChatVisible(visible);
if (visible) {
setUnreadCount(0); // Reset when chat is opened
}
};
if (LiveChatWidget.isInitialized()) {
LiveChatWidget.on('newMessage', onNewMessage);
LiveChatWidget.on('chatVisible', onChatVisibleChanged);
} else {
const unsubscribe = LiveChatWidget.on('initialized', () => {
LiveChatWidget.on('newMessage', onNewMessage);
LiveChatWidget.on('chatVisible', onChatVisibleChanged);
unsubscribe(); // Clean up the initialized listener
});
}
return () => {
if (LiveChatWidget.isInitialized()) {
LiveChatWidget.off('newMessage', onNewMessage);
LiveChatWidget.off('chatVisible', onChatVisibleChanged);
}
};
}, [chatVisible]);
const handleCustomButtonClick = () => {
LiveChatWidget.toggleChat();
};
return (
<button onClick={handleCustomButtonClick}>
Chat Now
{unreadCount > 0 && <span className="unread-badge">{unreadCount}</span>}
</button>
);
}
export default CustomChatButton;
Key Considerations:
- Identifying Agent Messages: Carefully examine the structure of the
message object emitted by the newMessage event to reliably identify messages sent by agents. The property name might vary slightly depending on the SDK version.
- Chat Window Visibility: You'll need a way to track whether the chat widget is currently visible to the user. You can likely use the
chatVisible event of the SDK for this purpose.
- Persistence (Optional): If you want to persist the unread message count across app sessions, you'll need to implement local storage or a similar mechanism.
- Performance: Ensure your event listeners and state updates are efficient to avoid performance issues in your mobile app.
- Error Handling: Implement appropriate error handling for the SDK events.
- SDK Version: The exact event names and message object structure might differ slightly based on the version of the Live Agent SDK you are using. Refer to the documentation for your specific SDK version.
Limitations of This Approach:
- Client-Side Management: The unread message count is managed entirely on the client-side within your mobile app. This means if the user has the same chat open on another device, the count might not be perfectly synchronized across devices unless you implement a more complex backend synchronization mechanism.
- Initial Load: When the app initially loads, you won't have the historical unread message count unless you implement a way to fetch and store this information.
In summary, while the Live Agent SDK doesn't offer a direct API to retrieve the unread message count, you can effectively implement this functionality for your custom button by subscribing to the newMessage event, maintaining an unread message counter in your app's state, and updating your custom button's UI accordingly. Remember to reset the counter when the chat window is opened.
Share
Report
11
All responses (
Answers (
