6 awesome in-app HTML templates you can copy!
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.
Check out these six in-app templates:
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.
In-app template #1
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!)
<style>
.fixed {
position: absolute;
top: 24px;
right: 24px;
display: block;
}
</style>
<x-base>
<x-section style="background:none;" width="480px" margin="0px" padding="0px">
<x-image style="background:none; margin-bottom:0px;" align="center" width="480px" alt="Hero Image"
src="https://userimg-assets.customeriomail.com/images/client-env-138234/1719973434673_In_App_2_01J1V6FND8QF5QA4S7CZT5QTFW.gif" />
<x-image class="fixed" margin="66px 65px 0px 0px" align="right" behavior="dismiss" width="18px"
alt="Close Button"
src="https://userimg-assets.customeriomail.com/images/client-env-138234/1715273993010_Close-Button-Moss_01HXF4R2W373KTP00VADF3ZH0C.png" />
</x-section>
<x-section style="margin-top:-1px;" background="#0b353b" width="361px" margin="0px 8px 8px"
border-radius="0px 0px 8px 8px" padding="0px 0px 32px">
<x-heading-1 text-align="center" margin="32px 22px 8px" :font-size="22" :line-height="1.25" color="#ffffff">
Main headline
</x-heading-1>
<x-paragraph text-align="center" color="#ffffff" :line-height="1.4" font-weight="400" margin="17px 32px 0px"
:font-size="15">
Body paragraph
</x-paragraph>
<x-cta deep-link="" :font-size="12" margin="24px 32px 16px" color="#0b353b" width="auto" href="#"
:line-height="1.5" align="center" font-weight="700" :full-width="false" border-radius="4px 4px 4px 4px"
padding="16px" hover-background-color="#d2ffad" background-color="#e4ffce" tracked-response-name="CTA"
:new-tab="true" behavior="openDeeplink">
Call to action
</x-cta>
<x-cta :new-tab="true" text-decoration="underline" :font-size="12" :line-height="1.2" padding="0px"
margin="0px 32px" align="center" text-align="left" background-color="rgba(255, 255, 255, 0)" color="#e4ffce"
href="#" tracked-response-name="Text Link" behavior="openUrl">
Additional link
</x-cta>
<x-watermark />
</x-section>
</x-base>💡 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.
In-app template #2
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!)
<style>
.card {
position: absolute;
top: 20%;
left: 20%;
width: 350px;
height: 400px;
margin: 0px;
float: left;
perspective: 500px;
}
.content {
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover .content {
transform: rotateY(180deg);
transition: transform 0.5s;
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: #08272B;
line-height: 300px;
color: #03446A;
text-align: center;
font-size: 60px;
border-radius: 8px;
backface-visibility: hidden;
}
.back {
background: #08272B;
color: white;
transform: rotateY(180deg);
}
.textlink {
margin: 0;
height: 30px;
}
</style>
<x-base margin="500px">
<x-image margin="186px 0px 50px 50px" align="right" behavior="dismiss" width="26px"
src="https://userimg-assets.customeriomail.com/images/client-env-138234/1720454565704_CloseSquare_01J29HAKZTR16S0AQTHHK80W60.png" />
<x-section width="450px" style="height:700px;" padding="10px" margin="10px 0px">
<div class="card message_frame">
<div class="content">
<div class="front">
<div style="margin-left:-60px; margin-bottom:-200px; margin-top:-80px;"><img src="https://userimg-assets.customeriomail.com/images/client-env-138234/1720070340679_Marketing-DragDrop_01J1Y2X04MSS59N7GFC2S9PCJT.png" style="width:360px;">
</div>
<h1 style=" color: #D2FFAD;font-size: 36px; line-height: 40px; padding:50px">Large headline</h1>
<x-image margin="-200px 0 0 0" align="center" behavior="dismiss" width="36px"
src="https://userimg-assets.customeriomail.com/images/client-env-138234/1720450592178_Turn_01J29DHBF7DQ7T37BV8KXN4CXY.png" />
</div>
<div class="back">
<div style="margin-left:-60px; margin-bottom:-200px; margin-top:-80px;"><img src="https://userimg-assets.customeriomail.com/images/client-env-138234/1720070338597_Deverloper-Code_01J1Y2WY570QPX73C588XX1BWN.png" style="width:360px;">
</div>
<p style=" color: #D2FFAD;font-size: 18px; line-height: 25px; padding:50px 25px 0 25px">Descriptive
paragraph<br>for additional info</p>
<span style="max-height: 50px; line-height:0;"><x-cta tracked-response-name="Try Now"
style="max-height:50px; line-height: 0;" font-weight="600" height="40px" width="110px" hover-background-color="#e4ffce" color="#0b353b" background-color="#d2ffad" deep-link="#" behavior="openDeeplink" :new-tab="true"><span class="textlink">CTA</span>
</x-cta></span>
</div>
</div>
</div>
</x-section>
</x-base>💡 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.
In-app template #3
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!)
<style>
span {
color: transparent;
animation: blur 4s ease-out infinite;
-webkit-animation: blur 4s ease-out infinite;
}
span:nth-child(1) {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
span:nth-child(2) {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
span:nth-child(3) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
span:nth-child(4) {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
span:nth-child(5) {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
span:nth-child(6) {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
span:nth-child(7) {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
@keyframes blur {
0% {
text-shadow: 0 0 100px #1AA47B;
opacity: 0;
}
5% {
text-shadow: 0 0 90px #1AA47B;
}
15% {
opacity: 1;
}
20% {
text-shadow: 0 0 0px #1AA47B;
}
80% {
text-shadow: 0 0 0px #1AA47B;
}
85% {
opacity: 1;
}
95% {
text-shadow: 0 0 90px #1AA47B;
}
100% {
text-shadow: 0 0 100px #1AA47B;
opacity: 0;
}
}
@-webkit-keyframes blur {
0% {
text-shadow: 0 0 100px #1AA47B;
opacity: 0;
}
5% {
text-shadow: 0 0 90px #1AA47B;
}
15% {
opacity: 1;
}
20% {
text-shadow: 0 0 0px #1AA47B;
}
80% {
text-shadow: 0 0 0px #1AA47B;
}
85% {
opacity: 1;
}
95% {
text-shadow: 0 0 90px #1AA47B;
}
100% {
text-shadow: 0 0 100px #1AA47B;
opacity: 0;
}
}
*,
*:after,
*:before {
box-sizing: border-box;
}
:root {
--transition: 0.25s;
--spark: 1.8s;
}
button {
--cut: 0.1em;
--active: 0;
--bg:
radial-gradient(40% 50% at center 100%,
hsl(162 calc(var(--active) * 97%) 72% / var(--active)),
transparent),
radial-gradient(80% 100% at center 120%,
hsl(162 calc(var(--active) * 97%) 70% / var(--active)),
transparent),
hsla(162, 73%, 37%, 0.75);
background: var(--bg);
font-size: 2rem;
font-weight: 500;
border: 0;
cursor: pointer;
padding: 0.9em 1.3em;
display: flex;
align-items: center;
gap: 0.25em;
white-space: nowrap;
border-radius: 10px;
position: relative;
box-shadow:
0 0 calc(var(--active) * 6em) calc(var(--active) * 3em) hsla(162, 73%, 37%, 0.75),
0 0.05em 0 0 hsl(162 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
0 -0.05em 0 0 hsl(162 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;
transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
scale: calc(.5 + (var(--active) * 0.1));
}
button:active {
scale: 1;
}
svg {
overflow: hidden !important;
}
.sparkle path {
color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
transform-box: fill-box;
transform-origin: center;
fill: currentColor;
stroke: currentColor;
animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
animation-duration: 0.6s;
transition: color var(--transition);
}
button:is(:hover, :focus-visible) path {
animation-name: bounce;
}
@keyframes bounce {
35%,
65% {
scale: var(--scale);
}
}
.sparkle path:nth-of-type(1) {
--scale: 0.5;
--delay: 0.1;
--base: 100%;
}
.sparkle path:nth-of-type(2) {
--scale: 1.5;
--delay: 0.2;
--base: 80%;
}
.sparkle path:nth-of-type(3) {
--scale: 2.5;
--delay: 0.35;
--base: 90%;
}
button:before {
content: "";
position: absolute;
inset: -0.15em;
z-index: -1;
border: 0.1em solid hsl(162 73% 37% / 0.5);
border-radius: 14px;
opacity: var(--active, 0);
transition: opacity var(--transition);
}
.spark {
position: absolute;
inset: 0;
border-radius: 10px;
rotate: 0deg;
overflow: hidden;
mask: linear-gradient(white, transparent 100%);
animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}
@keyframes flip {
to {
rotate: 360deg;
}
}
.spark:before {
content: "";
position: absolute;
width: 200%;
aspect-ratio: 1;
top: 0%;
left: 50%;
z-index: -1;
translate: -50% -15%;
rotate: 0;
transform: rotate(-90deg);
opacity: calc((var(--active)) + 55);
background: conic-gradient(from 0deg,
transparent 0 340deg,
white 360deg);
transition: opacity var(--transition);
animation: rotate var(--spark) linear infinite both;
}
.spark:after {
content: "";
position: absolute;
inset: var(--cut);
border-radius: 100px;
}
@keyframes rotate {
to {
transform: rotate(90deg);
}
}
@supports(selector(:has(:is(+ *)))) {
body:has(button:is(:hover, :focus-visible)) {
--active: 1;
--play-state: running;
}
.bodydrop {
display: none;
}
}
button:is(:hover, :focus-visible)~ :is(.bodydrop, .particle-pen) {
--active: 1;
--play-state: runnin;
}
button:is(:hover, :focus-visible) {
--active: 1;
--play-state: running;
}
.sparkle-button {
position: relative;
}
.text {
font-weight: 600;
-webkit-background-clip: text;
color: white;
}
button svg {
inline-size: 1.25em;
translate: -25% -5%;
}
</style>
<x-base>
<x-section style="background:none;" align="center" outer-background-color="rgba(0, 0, 0, 0)" width="670px"
box-shadow="" margin="0px 30px 20px 0px" border-radius="8px" background-color="#ffffff" :line-height="1.5"
color="#666666" padding="0px">
<x-message width="auto" box-shadow="0 2px 10px 2px rgba(0, 0, 0, 0.3)" margin="20px"
padding="16px 20px 24px 15px" border-radius="8px" background="#08272b" :line-height="1.5" color="#666666">
<x-image margin="0px" align="right" behavior="dismiss" width="18px"
src="https://userimg-assets.customeriomail.com/images/client-env-138234/1715273993010_Close-Button-Moss_01HXF4R2W373KTP00VADF3ZH0C.png" />
<x-heading-1 :font-size="27" :line-height="1.2" text-align="center">
<span>Your animated<br>headline</span>
</x-heading-1>
<x-paragraph text-align="center" margin="20px 15px 0px" :font-size="16" color="#ffffff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</x-paragraph>
<div class="sparkle-button">
<button onClick="window.open('link', '_blank');
"message.openDeeplink('link', {name:'Call to action'})">
<svg class="sparkle" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.1689 13.5829 14.4994 13.0423 13.9587C12.5016 13.4181 11.8321 13.0241 11.097 12.814L8.25 12L11.096 11.187C11.8311 10.9769 12.5006 10.5829 13.0413 10.0423C13.5819 9.50162 13.9759 8.83214 14.186 8.097L14.187 8.096Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6 14.25L5.741 15.285C5.59267 15.8785 5.28579 16.4206 4.85319 16.8532C4.42059 17.2858 3.87853 17.5927 3.285 17.741L2.25 18L3.285 18.259C3.87853 18.4073 4.42059 18.7142 4.85319 19.1468C5.28579 19.5794 5.59267 20.1215 5.741 20.715L6 21.75L6.259 20.715C6.40725 20.1216 6.71398 19.5796 7.14639 19.147C7.5788 18.7144 8.12065 18.4075 8.714 18.259L9.75 18L8.714 17.741C8.12065 17.5925 7.5788 17.2856 7.14639 16.853C6.71398 16.4204 6.40725 15.8784 6.259 15.285L6 14.25Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6.5 4L6.303 4.5915C6.24777 4.75718 6.15472 4.90774 6.03123 5.03123C5.90774 5.15472 5.75718 5.24777 5.5915 5.303L5 5.5L5.5915 5.697C5.75718 5.75223 5.90774 5.84528 6.03123 5.96877C6.15472 6.09226 6.24777 6.24282 6.303 6.4085L6.5 7L6.697 6.4085C6.75223 6.24282 6.84528 6.09226 6.96877 5.96877C7.09226 5.84528 7.24282 5.75223 7.4085 5.697L8 5.5L7.4085 5.303C7.24282 5.24777 7.09226 5.15472 6.96877 5.03123C6.84528 4.90774 6.75223 4.75718 6.697 4.5915L6.5 4Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="text">Call to action</span>
</button>
</div>
<x-watermark />
</x-message>
</x-section>
</x-base>💡 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.
In-app template #4
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!)
<style>
.fixed {
position: absolute;
top: 24px;
right: 24px;
display: block;
}
</style>
<x-base>
<x-section class="message_frame" align="center" outer-background-color="rgba(0, 0, 0, 0)" width="670px"
box-shadow="0 2px 4px 0 rgba(0, 0, 0, 0.1)" margin="200px 0px" border-radius="8px" background-color="#ffffff"
:line-height="1.5" color="#666666" padding="0px">
<x-row margin="0px" :gap="16" :layout='[40,60]'>
<x-column style="padding:0px; margin:0px;" padding="0px">
<x-image :new-tab="true" href="#" behavior="openUrl" src="https://userimg-assets.customeriomail.com/images/client-env-138234/1719981754090_Add_Video_01J1VEDJ10BYDNCPXTEG5NS7A3.gif" align="left" width="256px" />
</x-column>
<x-column padding="0px">
<x-image align="right" margin="10px 20px 0px 0px" behavior="dismiss" width="18px"
src="https://userimg-assets.customeriomail.com/images/client-env-138234/1715273992530_Close-Button-Forest_01HXF4R2DGQ70XVN3G37A71RVR.png" />
<x-heading-1 margin="4px 32px 12px" :font-size="21" :line-height="1.25" color="#0b353b">Your headline
</x-heading-1>
<x-paragraph color="#0b353b" :line-height="1.4" font-weight="400" margin="0px 32px" :font-size="15">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </x-paragraph>
<x-cta deep-link="#" :font-size="13" margin="14px 32px" color="#e4ffce" width="auto" href="#" :line-height="1.5" align="left" text-transform="none" font-weight="700" font-family="Helvetica" :full-width="false" border-radius="6px 6px 6px 6px" padding="16px 20px" hover-background-color="#0e464d" background-color="#0b353b" tracked-response-name="Link name" :new-tab="true" behavior="openDeeplink">
Call to action
</x-cta>
<x-cta :new-tab="true" text-decoration="underline" :font-size="13" :line-height="1.2" padding="0px" margin="0px 32px" align="left" text-align="left" background-color="rgba(255, 255, 255, 0)" color="#0b353b" href="#" tracked-response-name="Link name" behavior="openUrl">
Additional link
</x-cta>
<x-image margin="11px 100px 0px 32px" align="left" src="https://userimg-assets.customeriomail.com/images/client-env-138234/1715273993629_DesignerCustomer-io_01HXF4R3FFF6RZ4FC7655V0D2D.png" />
</x-column>
</x-row>
</x-section>
</x-base>💡 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.
In-app template #5
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!)
<x-base>
<x-section width="auto" box-shadow="0 2px 4px 0 rgba(0, 0, 0, 0.1)" margin="16px" border-radius="16px"
background-color="#ffffff" :line-height="1.5" color="#666666" padding="24px 24px">
<x-message background="#ffffff">
<x-image tracked-response-name="close-button" align="right" behavior="dismiss" width="20px"
src="https://userimg-assets.customeriomail.com/images/client-env-138234/1715273992530_Close-Button-Forest_01HXF4R2DGQ70XVN3G37A71RVR.png" />
<x-heading-2 color="#0b353b">
{% if customer.first_name %}How's your day, {{ customer.first_name | titlecase }}?{% else %}How's your day?{% endif %}
</x-heading-2>
<x-box>
<x-cta href="https://customer.io/docs/journeys/new-in-app-editor/" :new-tab="true" hover-color="#0b353b"
hover-background-color="#e4ffce" tracked-response-name="on-fire" behavior="openUrl"
border-radius="8px 8px 8px 8px" :full-width="true" background-color="#0b353b">Fantastic, I'm on
fire! 🔥</x-cta>
<x-cta :new-tab="true" href="https://customer.io/docs/journeys/new-in-app-editor/"
hover-background-color="#0b353b" hover-color="#ffffff" tracked-response-name="coffee"
behavior="openUrl" color="#0b353b" border-color="#0b353b" border-radius="8px 8px 8px 8px"
:full-width="true" border-style="solid" background-color="#ffffff">Could use a coffee ☕</x-cta>
<x-cta href="https://customer.io/docs/journeys/new-in-app-editor/" :new-tab="true"
hover-background-color="#0b353b" hover-color="#ffffff" tracked-response-name="meh"
behavior="openUrl" color="#0b353b" border-color="#0b353b" border-radius="8px 8px 8px 8px"
:full-width="true" border-style="solid" background-color="#ffffff">Meh, just another day 😐</x-cta>
</x-box>
<x-paragraph color="#0b353b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor a aliqua.
</x-paragraph>
</x-message>
<x-watermark />
</x-section>
</x-base>💡 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 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.
In-app template #6
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!)
<x-base>
<x-message width="auto" background="#FBF9F8" :line-height="1.4" color="#343446"
:font-size="16" padding="16px">
<x-paragraph text-decoration="none" margin="0px">
<strong>Your Headline</strong><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</x-paragraph>
</x-message>
</x-base>💡 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. Nevermind, 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 >>