An InteractiveMessage is a specialized object that encapsulates an interactive unit within a chat message, such as an embedded form that users can fill out directly within the chat interface. This enhances user engagement by making the chat experience more interactive and responsive to user input.
This method marks a message as interacted by identifying it with the provided Id. It also logs the interactive element associated with the interaction.
JavaScript
TypeScript
CometChat.markAsInteracted(message?.getId(), elementId) .then((response) => { console.log("Mark As Interacted", response); }) .catch((error) => { console.log("error while markAsInteracted", error); });
CometChat.markAsInteracted(message?.getId(), elementId) .then((response) => { console.log("Mark As Interacted", response); }) .catch((error) => { console.log("error while markAsInteracted", error); });
Response
On Success — markAsInteracted() returns a success message:
Parameter
Type
Description
Sample Value
message
string
Confirmation message
"The message id 25308 has been marked as interacted for the user cometchat-uid-7."
A key feature of InteractiveMessage is checking whether a user’s interactions with the message meet the defined InteractionGoal.You would be tracking every interaction users perform on an InteractiveMessage (captured as Interaction objects) and comparing those with the defined InteractionGoal. The completion of a goal can vary depending on the goal type:
Goals
Description
Keys
Any Interaction
The goal is considered completed if there is at least one interaction.
CometChat.GoalType.ANY_ACTION
Any of Specific Interactions
The goal is achieved if any of the specified interactions occurred.
CometChat.GoalType.ANY_OF
All of Specific Interactions
The goal is completed when all specified interactions occur.
CometChat.GoalType.ALL_OF
None
The goal is never completed
CometChat.GoalType.NONE
This user interaction tracking mechanism provides a flexible and efficient way to monitor user engagement within an interactive chat session. By defining clear interaction goals and checking user interactions against these goals, you can manage user engagement and improve the overall chat experience in your CometChat-enabled application.InteractionGoal The InteractionGoal represents the desired outcome of an interaction with an InteractiveMessage. It includes:
elementIds: A list of identifiers for the interactive elements.
type: The type of interaction goal from the CometChat.
The InteractiveMessage can be sent using the sendInteractiveMessage method of the CometChat class. The method requires an InteractiveMessage object and a CallbackListener for handling the response.Here is an example of how to use it:
JavaScript
TypeScript
CometChat.sendInteractiveMessage(message) .then((message) => { console.log("message sent successfully", message.getSentAt()); }) .catch((error) => { console.log("error while sending message", { error }); });
These event listeners offer your application a way to provide real-time updates in response to incoming interactive messages and goal completions, contributing to a more dynamic and responsive user chat experience.
Listener Cleanup: Always remove message listeners when they are no longer needed. Remove the listener in componentWillUnmount() or the cleanup function of a useEffect hook to prevent memory leaks.
An InteractiveMessage is constructed with the receiver’s UID, the receiver type, the interactive type, and interactive data as a JSONObject. Once created, the InteractiveMessage can be sent using CometChat’s sendInteractiveMessage() method. Incoming InteractiveMessages can be received and processed via CometChat’s message listener framework.
Best Practices
Use descriptive, unique listener IDs (e.g., "interactive-form-listener") to avoid conflicts with other listeners
Always remove message listeners on component unmount to prevent memory leaks
Set allowSenderInteraction to true only when the sender needs to interact with their own message (e.g., previewing a form)
Define clear InteractionGoal types to accurately track user engagement with interactive elements
Handle both onInteractiveMessageReceived and onInteractionGoalCompleted events to provide a complete interactive experience
Troubleshooting
Interactive message not sending: Verify that interactiveData is a valid JSON object and all required fields (receiverId, receiverType, messageType) are set
Not receiving interactive messages: Ensure the message listener is registered with onInteractiveMessageReceived and the user is logged in
Goal not completing: Check that the InteractionGoal type matches the expected interactions — use ANY_ACTION for simple cases and ALL_OF only when every specified element must be interacted with
markAsInteracted failing: Confirm that the message ID and element ID are valid and that the user has permission to interact with the message
Duplicate events: Verify you are not registering the same listener ID multiple times without removing the previous one
