Page updated Mar 26, 2024

In-App Messaging

Under active development: The addOutput method for Amplify Gen 2 is under active development. The experience may change between versions of @aws-amplify/backend. Try it out and provide feedback at https://github.com/aws-amplify/amplify-backend/issues/new/choose

Amplify allows interacting with In-App Messaging APIs, which enables 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. The following is an example utilizing the AWS Cloud Development Kit (AWS CDK) to create the In-App Messaging resource powered by Amazon Pinpoint.

amplify/backend.ts
1import {
2 CfnApp,
3 CfnInAppTemplate,
4 CfnCampaign,
5 CfnSegment,
6} from "aws-cdk-lib/aws-pinpoint";
7import { Policy, PolicyStatement } from "aws-cdk-lib/aws-iam";
8import { Stack } from "aws-cdk-lib";
9
10const backend = defineBackend({
11 auth,
12 data,
13 // additional resources
14});
15
16const inAppMessagingStack = backend.createStack("inAppMessaging-stack");
17
18// create a Pinpoint app
19const pinpoint = new CfnApp(inAppMessagingStack, "Pinpoint", {
20 name: "myPinpointApp",
21});
22
23// create a segment
24const mySegment = new CfnSegment(inAppMessagingStack, "Segment", {
25 applicationId: pinpoint.ref,
26 name: "mySegment",
27});
28
29// create a campaign with event and in-app message template
30new CfnCampaign(inAppMessagingStack, "MyCampaign", {
31 applicationId: pinpoint.ref,
32 name: "MyCampaign",
33 segmentId: mySegment.attrSegmentId,
34 schedule: {
35 // ensure the start and end time are in the future
36 startTime: "2024-02-23T14:39:34Z",
37 endTime: "2024-02-29T14:32:40Z",
38 frequency: "IN_APP_EVENT",
39 eventFilter: {
40 dimensions: {
41 eventType: {
42 dimensionType: "INCLUSIVE",
43 values: ["PURCHASE"],
44 },
45 },
46 filterType: "ENDPOINT",
47 },
48 },
49
50 messageConfiguration: {
51 inAppMessage: {
52 layout: "TOP_BANNER",
53 content: [
54 {
55 // define the content of the in-app message
56 bodyConfig: {
57 alignment: "CENTER",
58 body: "This is an example in-app message.",
59 textColor: "#FFFFFF",
60 },
61 backgroundColor: "#000000",
62 headerConfig: {
63 alignment: "CENTER",
64 header: "Welcome!",
65 textColor: "#FFFFFF",
66 },
67 // optionally, define buttons, images, etc.
68 },
69 ],
70 },
71 },
72});
73
74//create an IAM policy to allow interacting with Pinpoint in-app messaging
75const pinpointPolicy = new Policy(inAppMessagingStack, "PinpointPolicy", {
76 policyName: "PinpointPolicy",
77 statements: [
78 new PolicyStatement({
79 actions: ["mobiletargeting:GetInAppMessages"],
80 resources: [pinpoint.attrArn + "/*"],
81 }),
82 ],
83});
84
85// apply the policy to the authenticated and unauthenticated roles
86backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
87backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(pinpointPolicy);
88
89// patch the custom Pinpoint resource to the expected output configuration
90backend.addOutput({
91 Notifications: {
92 InAppMessaging: {
93 AWSPinpoint: {
94 appId: pinpoint.ref,
95 region: Stack.of(pinpoint).region,
96 },
97 },
98 },
99});

Initialize In-App Messaging

To initialize In-App Messaging you need to configure Amplify with Amplify.configure()

Working with In-App Messaging

Refer to the Amplify In-App Messaging documentation to learn how to send in-app messages to your app users.

References

Amazon Pinpoint Construct Library