30

Inline in-app messages

How it works

Unlike traditional in-app messages, which appear on top of your app or website, inline in-app messages act like a part of the content on your page. They let you dynamically populate parts of your app and talk to your customers without interrupting their experience.

To support inline messages, you’ll add container elements that we call positions to your website or app. When you set up your message, you’ll specify the position for your message. When you send that message to your users, we’ll insert the message at the position you specified, so the message looks like a part of your app!

If you’re sending messages, you might need to talk to a developer for help adding in-app message positions to your app. And, if you’re a developer, you’ll need to work with whoever sends messages to figure out where you should place inline message positions and what IDs to set for them.

Set up your website for inline messages

Wherever you want to display an inline message, you’ll need to add a container element to your website with an id. We call this a position. You can add multiple positions to your website, so you can display inline messages wherever it’s convenient for you and your users.

You’ll target the position by id when you set up your message in Customer.io.

For example:

<div id="inline-message-container"></div>

Set up your iOS app for inline messages

Wherever you want to display an inline message in your app, you’ll need to add a View and set an elementId value. We call this a position. You can add multiple positions to your app, so you can display inline messages wherever it’s convenient for you and your users.

You’ll use the elementId when you set up your message in Customer.io to specify where your message should appear.

Inline message support is currently in a “snapshot” build that follows our main release path, but we plan to merge it into our main release path soon. See our iOS documentation for help adding inline message support to your iOS app.

Send an inline in-app message

Before you can send inline messages, you’ll need to add inline support to your website or iOS app.

When you set up your message, you’ll select the Inline Display option and set the Position (the ID of the container) where you want to display your message. You may need to talk to a developer to get this information.

In general, you’ll want to set up your message to persist until it expires or is dismissed.

Time to display

We poll for in-app messages when a customer opens your website or app. When a customer first opens your app or website, it might take a moment for the message to appear.

When we display a message, it’ll cache in the user’s browser or app, so it’ll continue to appear when a customer refreshes or returns to your app or website.

Inline message metrics

When you send a message, we’ll record that it’s been Sent. Your message sits in queue until a person opens your app or website. When people visit your app and we display the message, we’ll show that it’s been Opened—and then it becomes eligible for subsequent metrics like clicks, etc.

We don’t record subsequent impressions. If you set up your message to persist (which we recommend), it’ll cache on the client and continue to display until it expires or is dismissed—but we’ll only record the Opened metric when we first deliver the message.

Why is my message sent but not opened?

When you send a message, it waits in queue until someone opens your app or website. It’s typical that messages remain in the Sent state for a while. But if you notice that most, or all, of your messages remain in the Sent state, you should check that:

1. The Position ID exists. Make sure you typed the correct ID in the Position # field.
2. Your message’s page rule specifies pages in your website or app where the Position ID doesn’t exist. If you send your message on pages where the Position ID doesn’t exist, we won’t display your message.