Integrate your application
In your application directory, you should first install the necessary dependencies for using In-App Messaging.
1npm install aws-amplify
Initialize In-App Messaging
To finish setting up your application with Amplify, you need to configure it using the configure
API. Next, to interact with In-App Messaging APIs, you need to first initialize In-App Messaging by calling the initializeInAppMessaging
API directly imported from the in-app-messaging
sub-path. This is required to be called as early as possible in the app lifecycle.
1import { Amplify } from 'aws-amplify';2import amplifyconfig from './amplifyconfiguration.json';3import { initializeInAppMessaging } from 'aws-amplify/in-app-messaging';4
5Amplify.configure(amplifyconfig);6initializeInAppMessaging();
Install Amplify UI for React
Although Amplify In-App Messaging can be used as a standalone JavaScript library, this guide will show you how to use it together with Amplify UI which currently supports integration with React and React Native to get started quickly.
1npm install @aws-amplify/ui-react @aws-amplify/ui-react-notifications
Integrate Amplify UI
Amplify UI provides a Higher-Order Component for ease of integrating the In-App Messaging UI with your application. Simply wrap your application root component in, for example, App.js
.
1import { withInAppMessaging } from '@aws-amplify/ui-react-notifications';2
3import '@aws-amplify/ui-react/styles.css';4
5const App = () => <>In-App Messaging</>;6
7export default withInAppMessaging(App);
Below is an example of what your entry file should look like:
1import React, { useEffect } from 'react';2import {3 initializeInAppMessaging,4 syncMessages,5 dispatchEvent6} from 'aws-amplify/in-app-messaging';7import { Button, View } from '@aws-amplify/ui-react';8import { withInAppMessaging } from '@aws-amplify/ui-react-notifications';9import { record } from 'aws-amplify/analytics';10import '@aws-amplify/ui-react/styles.css';11import amplifyconfig from './amplifyconfiguration.json';12
13Amplify.configure(amplifyconfig);14initializeInAppMessaging();15
16// To display your in-app message, make sure this event name matches one you created17// in an In-App Messaging campaign!18const myFirstEvent = { name: 'my_first_event' };19
20const App = () => {21 useEffect(() => {22 // Messages from your campaigns need to be synced from the backend before they23 // can be displayed. You can trigger this anywhere in your app. Here you are24 // syncing just once when this component (your app) renders for the first time.25 syncMessages();26 }, []);27
28 return (29 <View>30 {/* This button has an example of an analytics event triggering the in-app message. */}31 <Button32 onClick={() => {33 record(myFirstEvent);34 }}35 >36 Record Analytics Event37 </Button>38
39 {/* This button has an example of an In-app Messaging event triggering the in-app message.*/}40 <Button41 onClick={() => {42 dispatchEvent(myFirstEvent);43 }}44 >45 Send In-App Messaging Event46 </Button>47 </View>48 );49};50
51export default withInAppMessaging(App);
You can now build and run your app in your terminal. If you click on one of the buttons shown in the above example, the in-app message you defined in the Pinpoint console should be displayed in your app.