Table of contents
In-app messaging is a powerful, dynamic channel for personalized connection. When done well, in-app messages are more than a marketing touchpoint—they can actually enhance the customer experience and deepen people’s affinity for your product. In this guide, you’ll find six of our favorite in-app message templates, including the HTML code you can copy and customize for your app!
Quick refresher: What are in-app messages?
Also called in-app notifications or pop-ups, these are the messages people receive while using your app. They can take several forms, and you can use them to do all kinds of things: welcome folks, onboard them, promote upsells, increase feature usage, gather feedback, and so much more.
Essentially, you can reach your customers when they are actively interacting with your brand and most ready to engage.
There are four primary types of in-app messages:
- Banners: messages that appear at the top or bottom of your app screen, typically with a call-to-action
- Modals (pop-ups): blocks of content that appear over the app’s content and can be exited with a click or swipe
- Surveys: short polls, usually a single question with just a few response options, delivered at strategic moments to get feedback
- Inline: embedded messages integrated into your app’s interface, often to provide contextual info or tips
Best of all, building in-app messages is easy! Read on to get details (and copy-paste HTML code) on six in-app templates you can implement now to enhance engagement and customer experience.
We designed these templates to celebrate the launch of our new drag-and-drop in-app builder, and we couldn’t keep them all to ourselves! Now you can create fun, engaging in-app messages to showcase your latest features and drive adoption. Simply copy the HTML code and paste it into our in-app editor.
Boundary-breaking animation
When to use it
These animations pop, making them the perfect choice for big announcements like a high-value feature launch or brand refresh. The modal message covers much of the screen, so customers can’t miss it. Think of them like a billboard or breaking news alert within your app, providing information people want and need to know.
HTML code (copy me!)
Pro tip
Be strategic about where and when you use this kind of in-app message. While they’re fun and eye-catching, they can distract and disrupt usability. Avoid deploying them on transactional pages or when someone’s in the middle of an action. Also, be selective about what kind of breaking news deserves this level of attention; you don't want to be the brand that overhypes everything.
Design pointer
Think outside the literal and figurative box—visuals can be extra compelling when they break the confines of the main in-app message container. Consider combining transparency, negative space, and animation (such as animated looping GIFs) to create something original and eye-catching. You can use an animation tool like After Effects to build these GIFs, just as we did for the example shown. This is a great way to highlight new UI interactions or explain complex concepts. Reminder: Update your max-width in the message settings. For this in-app message, the width is 480 px.
Flip card
When to use it
Flip cards can be a great way to showcase two equally important aspects of a feature, reveal a surprise, or provide a sneak peek! They give you the advantage of twice the space in the same amount of real estate and the ability to deliver your message in an eye-catching and exciting way. And because they require a tap or swipe to flip the card, they invite curiosity and engagement.
HTML code (copy me!)
Pro tip
Your branding should always be consistent, but be sure to create a visual contrast between the two sides of your card. Think about flipping over physical equivalents like postcards or playing cards—the emotional moment comes from revealing a difference between the front and back. Since your flip card is digital, include a clear visual cue (like an arrow) so people know they can interact with it.
Design pointer
Flip cards are engaging by nature: they require your customers to participate in the reveal. But you still need to entice that engagement through your design. You can make your flip card feel more tangible—and irresistible to play with—by using design elements that add depth: transparency, drop shadows, and elements that break outside the in-app container. And don’t forget, flip cards require extra padding around the container for an effective “flip” animation. Reminder: Update your max-width in message settings. For this in-app message, the width is 500 px
Glowing button
When to use it
Glowing button in-app messages are all about turning your CTA into the star of the show. Use this style to drive people to take an important action—like trying out a new feature, starting a free trial, or placing an order. A hypnotic button can inspire more click-throughs, but for those engagements to be meaningful, be sure customers understand why taking action will benefit them.
HTML code (copy me!)
Pro tip
Glowing buttons come in two flavors: animation on hover or an animation loop. If you go with the hover option, make it visually clear that it’s an interactive button. You don’t want your audience to miss out if they dismiss the message without interacting with the button!
Design pointer
Just like fireflies on a summer night, glowing buttons work best on a dark background, where you can really show off the luminosity and draw the eye. If you want to play with options before coding in Journeys, try using an online code editor like Codepen.io to test ideas and see what others have created. Reminder: Update your max-width in the message settings. For this in-app message, the width is 450 px.
Multimedia + text
When to use it
This type of in-app message centers around an image, GIF, or video that helps tell your story. It’s a great opportunity to show instead of tell. Consider situations where people need thorough yet concise information to get more value from your app. Onboarding, feature adoption prompts, and educational content are all excellent use cases!
HTML code (copy me!)
Pro tip
Keep screen size in mind. For your mobile audience, space is extremely limited. An image that's too small or too crowded will not effectively tell your story. You'll want to stack the media and text to maximize the usable space on mobile screens.
Design pointer
It's the unfortunate truth (for marketers) that most customers don't read all your text. So it's important to make sure your in-app message's visual and text components complement each other. Put the most important, must-read information in the headline and CTA buttons, where people are most likely to look. When your multimedia, headline, and CTA all convey a cohesive story, people naturally tend to read the rest of the text—and are more likely to engage and convert. Reminder: Update your max-width in the message settings. For this in-app message, the width is 1100 px.
Quick survey
When to use it
One of the most effective ways to get feedback is to ask for input while people are immersed in your product. Try a quick, single-question in-app survey for things like gathering feedback when someone uses a new feature, checking in during onboarding, CSAT surveys immediately after a customer support interaction, and NPS surveys to gauge overall customer satisfaction.
HTML code (copy me!)
Pro tip
When it comes to surveys, context matters—be strategic with the questions you ask and where you ask them. Are you looking for input from new customers or seasoned vets? Do you want to understand someone’s first use of a feature or the 500th? Target your surveys to points in the customer journey where feedback will be most valuable.
Design pointer
In-app surveys (https://customer.io/blog/in-app-surveys/) should be simple. Space is tight, attention spans are short, and you're asking for a favor while people are trying to accomplish something. So make it painless for them to respond to your survey instead of dismissing it (and possibly getting annoyed). Keep phrasing clear and tight, and focus your design on usability. You want to create visual appeal without making it harder to quickly read and respond.
Inline message
When to use it
The beauty of inline messages is that you can put them wherever you want—you’re not limited to the standard placements of top, bottom, right, center, etc. This is a great way to make messages appear like they’re a seamless part of your app’s UI. Try this approach for situations where integrated messaging would enhance the product experience, explain important info, help people use features, or consistently update your app’s content.
HTML code (copy me!)
Pro tip
There are tons of specific use cases for inline messages, but one that’s often overlooked is inserting new content into your app so that the customer experience feels fresh (without having to push an app update). Consider adding a static content block within your app with a rotating in-app message to highlight your latest blog post, handy tips, or timely announcements. Be sure to remove the dismiss button from your message to keep it persistent.
Design pointer
Match your message’s look and feel to your app’s UI styling as closely as possible to make it feel truly integrated into the experience. You’ll need a developer to add code to your backend so you can target specific placements within your app, but you’ll still need to craft the design in your messaging platform.
Create memorable, engaging in-app messages with Customer.io Journeys
Give your customers a chance to connect with you in a space where they’ll care about your messages—because they’re already in your product. Grab a template and start creating engaging in-app messages for your brand!
If that was an actual in-app message, you could just tap a button and be off to the races. Never mind, let’s get you where you need to go!
🤩 Stoked—let’s start building!
Just copy any HTML code above and paste it into the Journeys in-app message editor—then tweak to your heart’s content. To access the editor, create a new broadcast or campaign and select in-app message. And while you're at it, check out the drag-and-drop editor! Log in to Customer.io >>
🤔 Curious, but I want more options
Good news! We’ve built a library of templates for all kinds of in-app messages: banners, welcomes, announcements, promos, surveys, and more. Explore the templates library >>
😢I’m not a Journeys subscriber
Well, we don’t want you to miss out on the fun! Start building awesome in-app messages (and that’s just the tip of the iceberg) with a free 14-day trial—no credit card required. Start your free trial >>
