Set up in-app messaging
Amplify allows interacting with In-App Messaging APIs, enabling you to send messages to your app users. In-App Messaging is a powerful tool to engage with your users and provide them with relevant information. A campaign is a messaging initiative that engages a specific audience segment. A campaign sends tailored messages according to a schedule that you define. You can use the AWS Cloud Development Kit (AWS CDK) to create a campaign that sends messages through any single channel that is supported by Amazon Pinpoint: Mobile Push, In-App, Email, SMS or Custom channels.
The following is an example utilizing the AWS CDK to create the In-App Messaging resource powered by Amazon Pinpoint. Note: there are no official hand-written (L2) constructs for this service yet.
import { defineBackend } from "@aws-amplify/backend";import { auth } from "./auth/resource";import { data } from "./data/resource";import { CfnApp, CfnCampaign, CfnSegment,} from "aws-cdk-lib/aws-pinpoint";import { Policy, PolicyStatement } from "aws-cdk-lib/aws-iam";import { Stack } from "aws-cdk-lib/core";
const backend = defineBackend({ auth, data, // additional resources });
const inAppMessagingStack = backend.createStack("inAppMessaging-stack");
// create a Pinpoint appconst pinpoint = new CfnApp(inAppMessagingStack, "Pinpoint", { name: "myPinpointApp",});
// create a segment const mySegment = new CfnSegment(inAppMessagingStack, "Segment", { applicationId: pinpoint.ref, name: "mySegment",});
// create a campaign with event and in-app message templatenew CfnCampaign(inAppMessagingStack, "Campaign", { applicationId: pinpoint.ref, name: "MyCampaign", segmentId: mySegment.attrSegmentId, schedule: { // ensure the start and end time are in the future startTime: "2024-02-23T14:39:34Z", endTime: "2024-02-29T14:32:40Z", frequency: "IN_APP_EVENT", eventFilter: { dimensions: { eventType: { dimensionType: "INCLUSIVE", values: ["my_first_event"], }, }, filterType: "ENDPOINT", }, },
messageConfiguration: { inAppMessage: { layout: "TOP_BANNER", content: [ { // define the content of the in-app message bodyConfig: { alignment: "CENTER", body: "This is an example in-app message.", textColor: "#FFFFFF", }, backgroundColor: "#000000", headerConfig: { alignment: "CENTER", header: "Welcome!", textColor: "#FFFFFF", }, // optionally, define buttons, images, etc. }, ], }, },});
//create an IAM policy to allow interacting with Pinpoint in-app messagingconst pinpointPolicy = new Policy(inAppMessagingStack, "PinpointPolicy", { policyName: "PinpointPolicy", statements: [ new PolicyStatement({ actions: [ "mobiletargeting:GetInAppMessages", "mobiletargeting:UpdateEndpoint", "mobiletargeting:PutEvents", ], resources: [pinpoint.attrArn + "/*", pinpoint.attrArn], }), ],});
// apply the policy to the authenticated and unauthenticated rolesbackend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
// patch the custom Pinpoint resource to the expected output configurationbackend.addOutput({ notifications: { amazon_pinpoint_app_id: pinpoint.ref, aws_region: Stack.of(pinpoint).region, channels: ["IN_APP_MESSAGING"], },});Install Amplify Libraries
First, install the aws-amplify library:
npm add aws-amplifyInitialize 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.
import { Amplify } from 'aws-amplify';import { initializeInAppMessaging } from 'aws-amplify/in-app-messaging';import outputs from '@/amplify_outputs.json';
Amplify.configure(outputs);initializeInAppMessaging();