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.

const myMessageReceivedHandler = (message) => {
  // Do something with the received message
};

const listener = InAppMessaging.onMessageReceived(myMessageReceivedHandler);

listener.remove(); // Remember to remove the listener when it is no longer needed

Message displayed

Add onMessageDisplayed listeners to respond to an in-app message being displayed to your user.

const myMessageDisplayedHandler = (message) => {
  // Do something with the displayed message
};

const listener = InAppMessaging.onMessageDisplayed(myMessageDisplayedHandler);

listener.remove(); // Remember to remove the listener when it is no longer needed

Message dismissed

Add onMessageDismissed listeners to respond to an in-app message being dismissed by your user.

const myMessageDismissedHandler = (message) => {
  // Do something with the dismissed message
};

const listener = InAppMessaging.onMessageDismissed(myMessageDismissedHandler);

listener.remove(); // Remember to remove the listener when it is no longer needed

Message 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.

const myMessageActionTakenHandler = (message) => {
  // Do something with the message action was taken against
};

const listener = InAppMessaging.onMessageActionTaken(
  myMessageActionTakenHandler
);

listener.remove(); // Remember to remove the listener when it is no longer needed

Notifying 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).

import { InAppMessageInteractionEvent } from '@aws-amplify/notifications';

const message = {
  // In-app message that you want to record an interaction on
}

/**
 * Interaction events that can be notified correspond to their respective listeners:
 *   'InAppMessageInteractionEvent.MESSAGE_RECEIVED_EVENT'
 *   'InAppMessageInteractionEvent.MESSAGE_DISPLAYED_EVENT'
 *   'InAppMessageInteractionEvent.MESSAGE_DISMISSED_EVENT'
 *   'InAppMessageInteractionEvent.MESSAGE_ACTION_TAKEN_EVENT'
 */
InAppMessaging.notifyMessageInteraction(
  message,
  InAppMessageInteractionEvent.MESSAGE_DISPLAYED_EVENT
);

const message = {
  // In-app message that you want to record an interaction on
}

/**
 * Interaction events that can be notified correspond to their respective listeners:
 *   'MESSAGE_RECEIVED_EVENT'
 *   'MESSAGE_DISPLAYED_EVENT'
 *   'MESSAGE_DISMISSED_EVENT'
 *   'MESSAGE_ACTION_TAKEN_EVENT'
 */
InAppMessaging.notifyMessageInteraction(message, 'MESSAGE_DISPLAYED_EVENT');