In-App Template Library
In-app templates can be a bit complicated. This page contains templates that you can copy into your workspace to get started, and even some components that you might want to use—like buttons, grids, etc.
How it works
An in-app message template provides your message layout and content, including text areas and images that you can customize when you create a message in Customer.io. But, because message templates are made of actions, blocks, grids, and so on, they can sometimes be hard to create. This page contains some templates that can help get you started.
To use one of these templates, you’ll can copy the code on this page into the Code View editor option in your in-app templates.
Before you get started, make sure that you’ve set up your Branding first! We set up our templates with default brand names. After you copy a template into your workspace, you can adjust it to fit your needs.
Have you already set up in-app branding?
If you haven’t configured your in-app Branding settings, you might want to do that first. These templates will work with our default brand styles, but your Branding determines the colors, padding, and font styles—so your messages look like native parts of your app or website.
| Create a message template... | and use it in a campaign |
|---|---|
 |  |
Use a template on this page
Templates on this page use the default branding names and values. If you changed the names of your colors, text styles, or padding values, you may need to edit values after you copy one of the templates on this page to your workspace.
In any case, you’ll need to adjust the Text and Image components after you copy a template from this page to your workspace, to make the template fit the kind of message you want to send, your brand styles, your graphics, etc.
- Go to Content > In-App Messages.
- Under Messages, click New Message or select the message you want to change.
- If you’re starting with a new message, we suggest you pick the Blank template. When you copy a template from this page, you’re probably going to replace the entire contents of your template anyway.
- Give your template a Name and click Create Message.
- In your new message click Code View.
- On this page, find the template you want to use click Copy above the code sample.
- Go back to your new message, and paste the code you copied, replacing the contents of the code editor. Make sure you replace the empty brackets that in the code editor!
- Now you can customize your template!
Customize your template
After you copy over a template, you can adjust the code manually—find and replace your branding options, images, etc. Or, you can switch to the Designer View and update your branding values that way.
In general, you’ll want to change the content of the Text, Image, and action components in your message. You can either replace values with the static text, or you can add variables—in the format $properties.variable-name that you can populate when you use your message template in a campaign.
- Use static text to maintain strict control over the options that other members of your team have when they use your message template. You can’t replace or change static text when you use your template in a message.
- Use variables (like
$properties.var) to customize your message template (including liquidA syntax that supports variables, letting you personalize messages for your audience. For example, if you want to reference a person’s first name, you might use the variable{{customer.first_name}}.) whenever you use it in a campaign. You can add variables in the middle of a line, or as the entire body of text.
Welcome message example
When you enable in-app messages in your workspace, an Example Welcome message is added automatically for you to explore and customize.
In the video above, we walked through the example welcome. Now, here’s that same message, updated for an education app. The goal of the message is to guide a new user through their first step to learning a new language.
There’s also a $properties.name value in the header. That generates a name field when you use your message in a campaign. In our example, we’ve populated the image with {{customer.first_name}}
 | |
Announcement message example
When you enable in-app messages in your workspace, an Example Announcement message is also added automatically for you to explore and customize. In the following video, we’ll walk through this message and share tips on how to customize it for your audience.
In the video, we used a static heading and body text. You’ll want to modify the text and images to fit your use case, but you can make an all-purpose announcement message by replacing the text fields with $properties.heading and $properties.body; this will generate heading and body fields in the preview when you use this message template.
 | |
Banner message example
This is a simple banner example. Something you can show anywhere in your app that’s not very intrusive but might let customers know about a new feature, something they’ve missed, an update to your app, and so on.
This example doesn’t contain any templated fields. If you want to customize the message when you use it in a campaign or broadcast, you can replace the contents of the text component(s) with $properties.<name-of-your-field>.
 | |
Banner message example with an image
This is an advanced banner example that includes an image and uses two horizontal list components to keep the image and text to the left while the close button stays to the right. We use flex values in this example to set a 2:8 proportion between the image block and the markdown block, and a 9:1 proportion between the left group (image + markdown) and the right group (close).
 | |
Announcement with liquid text example
This announcement example shows what you can do when you turn all of your message content into variables. The preview looks pretty boring, but you’ll find a populated version below: all the image and text components for this template use variables ($property.<var>) that you can populate when you use this template in a campaign or broadcast.
Here’s what this template looks like when you use it in a campaign and populate all the fields.
 | |
Push opt-in example #1
This is an example that you can use to opt people into push notifications. Note that the Enable Push action is set to Application and an enable_push_event value. You should replace this value with whatever value you’ll pass to your app, and the Customer.io SDK, to enable push notifications.
 | |
Push opt-in example #2
This is an example that you can use to opt people into push notifications. Note that the Enable Push action is set to Application and an enable_push_event value. You should replace this value with whatever value you’ll pass to your app, and the Customer.io SDK, to enable push notifications.
 | |
Carousel example
This is an example of an in-app carousel that can showcase products, courses, offers, and more. You can use liquid to customize the list per person, and the inline display setting to embed your message into existing pages and screens.
 | |
Copied to clipboard!
