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
:
Name | Description | Type |
---|---|---|
clearMessage | Removes the current in-app message (if any) from context state |
|
displayMessage | Render a local in-app message |
|
message | current in-app message (if any) loaded in context state |
|
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.
Name | Description | Type |
---|---|---|
components? | Message override UI components |
|
MessageComponents
prop
The Functional UI components that render in-app message content
Name | Description | Type |
---|---|---|
BannerMessage? | Banner UI component (top, middle, and bottom layouts) |
|
CarouselMessage? | Carousel UI component (default provided for React Native only) |
|
FullScreenMessage? | FullScreen UI component |
|
ModalMessage? | Modal UI component |
|
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: