Amplify UI

In-App Messaging

Amplify UI In-App Messaging provides UI components for displaying in-app messages.

Overview

In-App Messaging allows you to better engage users with contextually appropriate messages rendered on events triggered by their activity while using your application. Create messages that look native to your application and deliver them to your users all without additional code changes.

Prerequisites

Getting Started

Integration with your application can be done with the InAppMessagingProvider and InAppMessageDisplay components directly, or wrap your app in withInAppMessaging (a React Higher-Order Component):

InAppMessaging.syncMessages is an asynchronous function that handles syncing remote in-app messages with the end user application.

InAppMessagingProvider and useInAppMessaging

InAppMessagingProvider exposes the value of the InAppMessagingContext (a React context) to its children. useInAppMessaging can be used to directly interact with InAppMessagingContext from within InAppMessagingProvider.

useInAppMessaging exposes the following functions and values of the InAppMessagingContext:

NameDescriptionType
clearMessageRemoves the current in-app message (if any) from context state
() => void
displayMessageRender a local in-app message
(message: Message) => void
messagecurrent in-app message (if any) loaded in context state
Message | null

In some use cases, you may want to forgo the usage of the default UI handling altogether while still leveraging the Amplify provided In-App Messaging React context and provider for in-app message context state. This can be achieved by wrapping your application in an InAppMessagingProvider and utilizing the useInAppMessaging hook to expose the values of the InAppMessagingContext.

InAppMessageDisplay

InAppMessageDisplay handles the display and lifecycle of an in-app message.

NameDescriptionType
components?Message override UI components
MessageComponents

The MessageComponents prop

Functional UI components that render in-app message content

NameDescriptionType
BannerMessage?Banner UI component (top, middle, and bottom layouts)
BannerMessageProps
CarouselMessage?Carousel UI component (default provided for React Native only)
CarouselMessageProps
FullScreenMessage?FullScreen UI component
FullScreenMessageProps
ModalMessage?Modal UI component
ModalMessageProps

Integrate Custom Components

You may provide your own In-App Messaging UI components to override the default Amplify provided UI components by utilizing the components prop of InAppMessagingProvider.

Style Override

The default Amplify UI components handle custom style using the styles prop:

Available style props:

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2023 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.