Set up in-app messages

Updated

This page is part of a setup flow for the SDK. Before you continue, make sure you've implemented previous features—i.e. you can't receive in-app notifications before you identify people!

graph LR getting-started(Install SDK) -->B(Initialize SDK) B --> identify(identify people) identify -.-> track-events(Send events) identify -.-> push(Receive push) identify -.-> in-app(Receive in-app) click getting-started href "/sdk/expo/getting-started/#install" click B href "/sdk/expo/getting-started/#initialize-the-sdk" click identify href "/sdk/expo/identify" click track-events href "/sdk/expo/track-events/" click register-token href "/sdk/expo/push" click push href "/sdk/expo/push" click rich-push href "/sdk/expo/rich-push" click in-app href "/sdk/expo/in-app" click test-support href "/sdk/expo/test-support" style in-app fill:#B5FFEF,stroke:#007069

How it works

An in-app message is a message that people see within the app. People won’t see your in-app messages until they open your app. If you set an expiry period for your message, and that time elapses before someone opens your app, they won’t see your message.

You can also set page rules to display your in-app messages when people visit specific pages in your app. However, to take advantage of page rules, you need to use screen tracking features. Screen tracking tells us the names of your pages and which page a person is on, so we can display in-app messages on the correct pages in your app.

graph LR a[app user triggers
in-app message]-->d{is the app open?} d-->|yes|f[user gets message] d-->|no|e[hold message
until app opens] e-->g{did the message
expire?} g-->|no, wait for user
to open the app|d g-->|yes|h[user doesn't
get the message]

Set up in-app messaging

Before you can take advantage of in-app messaging, you need to set up your workspace to receive in-app messages. You’ll find your in-app settings under Settings > Workspace Settings > In App Settings.

You also need to set enableInApp to true in your configuration options.

import { CustomerIO, CustomerioConfig, CustomerIOEnv, Region } from 'customerio-reactnative';

const data = new CustomerioConfig()
data.logLevel = CioLogLevel.debug
data.autoTrackDeviceAttributes = true
    
// In-app messages are optional and disabled by default
// To enable in-app messages, set enableInApp to true
data.enableInApp = true

CustomerIO.initialize(env, data) 

Page rules

You can set page rules when you create an in-app message. A page rule determines the page that your audience must visit in your app to see your message. However, before you can take advantage of page rules, you need to:

  1. Track screens in your app. See the Track Events page for help sending screen events.
  2. Provide page names to whomever sets up in-app messages in fly.customer.io. If we don’t recognize the page that you set for a page rule, your audience will never see your message.
Set up page rules to limit in app messages by page
Set up page rules to limit in app messages by page

Keep in mind: page rules are case sensitive. If you’re targeting your mobile app, make sure your page rules match the casing of the name in your screen events. If you’re targeting your website, your page rules should always be lowercase.

The first page rule is Web contains /dashboard. The second page rule is iOS contains Dashboard.
The first page rule is Web contains /dashboard. The second page rule is iOS contains Dashboard.
Copied to clipboard!
  Contents
Current release
 1.0.0-beta.16
Is this page helpful?