Respond to interaction events
Your code can respond with additional behavior to your users interacting with in-app messages by adding interaction event listeners.
Message received
Add onMessageReceived listeners to respond to an in-app message being received from the library as the result of an event matching the criteria of a synced in-app message. This is required if you are implementing a custom UI so that your UI can respond to event-triggered campaign messages but you may also find it helpful to listen for these messages for any other reason your application requires.
1import { onMessageReceived } from 'aws-amplify/in-app-messaging';2
3const myMessageReceivedHandler = (message) => {4 // Do something with the received message5};6
7const listener = onMessageReceived(myMessageReceivedHandler);8
9listener.remove(); // Remember to remove the listener when it is no longer neededMessage displayed
Add onMessageDisplayed listeners to respond to an in-app message being displayed to your user.
1import { onMessageDisplayed } from 'aws-amplify/in-app-messaging';2
3const myMessageDisplayedHandler = (message) => {4 // Do something with the displayed message5};6
7const listener = onMessageDisplayed(myMessageDisplayedHandler);8
9listener.remove(); // Remember to remove the listener when it is no longer neededMessage dismissed
Add onMessageDismissed listeners to respond to an in-app message being dismissed by your user.
1import { onMessageDismissed } from 'aws-amplify/in-app-messaging';2
3const myMessageDismissedHandler = (message) => {4 // Do something with the dismissed message5};6
7const listener = onMessageDismissed(myMessageDismissedHandler);8
9listener.remove(); // Remember to remove the listener when it is no longer neededMessage action taken
Add onMessageActionTaken listeners to respond to an action being taken on an in-app message. Typically, this means that the user has tapped or clicked a button on an in-app message.
1import { onMessageActionTaken } from 'aws-amplify/in-app-messaging';2
3const myMessageActionTakenHandler = (message) => {4 // Do something with the message action was taken against5};6
7const listener = onMessageActionTaken(myMessageActionTakenHandler);8
9listener.remove(); // Remember to remove the listener when it is no longer neededNotifying listeners
If you are using the Amplify In-App Messaging UI, interaction events notifications are already wired up for you. However, if you are implementing your own UI, it is highly recommended to notify listeners of interaction events through your UI code so that the library can take further actions prescribed by the installed provider (for example, automatically recording corresponding Analytics events).
1import { notifyMessageInteraction } from 'aws-amplify/in-app-messaging';2
3const message = {4 // In-app message that you want to record an interaction on5}6
7/**8 * Interaction events that can be notified correspond to their respective listeners:9 * 'messageReceived'10 * 'messageDisplayed'11 * 'messageDismissed'12 * 'messageActionTaken'13 */14notifyMessageInteraction({ message, type: 'messageDisplayed' });