OneSignal's Vice President of Product, Zack Hendlin, goes over how to use OneSignal's newest features for In-App Messaging. Learn how to use In-App Carousels and Surveys with this live demo! The transcript of the webinar can be found below.
Hi, my name is Zach, and I'm VP of Product here at OneSignal.
Today, we're going to be covering In-App Messaging, specifically Carousels and Surveys. These are two really powerful sets of functionality that we've just shipped, and I want to share them with you today. I'm going to walk through what they are. I'm going to go through a couple of use cases and actually show you in the product how you can use them to better onboard people to your app, to explain new features you ship, to ask them for feedback, and even ask them about their preferences so that you can then retarget them with more relevant in-app messages or push notifications or emails or other content. You can actually allow users to tag themselves based on what they're interested in. This is also a great way to get a quick sense of in-app messages and what they're capable of using OneSignal.
So, agenda is going through in-app, carousel, use case around onboarding a user to your app or to a new feature, use case around requesting location or push notification permissions. This is actually really useful because, when you're asking someone to authorize your app for location or for notification permissions, you want to give them context as to why. If you don't do that, there's a good chance that they're going to say no, particularly on iOS, where you only have one chance to ask someone for notification permission before the operating system blocks you from asking again.
You can actually use in-app messaging as a way to pre-prompt them and say, "Hey, will you consent to give us location permission? Or will you consent to give us a notification permission?" And then only if they say yes that you trigger the native prompt. So, it lets you make sure that you're using your one shot at the point when a user is receptive and willing to give you those permissions.
We'll go through a survey use case and how you can use outcomes and tags to build really great experiences to ask your users about what feature they want you to build, or even do a lightweight version of things like Net Promoter Score or other quick surveys or quick feedback approaches.
And then finally, we'll go through a Q and A.
What is In-App Messaging?
So, let’s get started with what in-app messaging is. In-app messages are things that appear in your app and look native. Unlike push notifications where a user has to give you permission to be able to send them push notifications, with in-app messages, they can go to everybody who has your app installed. This is nice because it lets you actually build screens of content that all your users can see, not just the people who have turned on push notifications.
You can customize in-app messages with images and gifs and buttons and texts. You see an example here on the right where you can build these really high-quality visual experiences using the wizard we get in OneSignal.
You can also control when in-app messages appear, so you can use the same segmentation engine. That's part of the core OneSignal product to decide who sees things and when they see them and when they stop seeing them. You can even have them read up here. So, for instance, if you wanted to ensure that every time a user, let’s say got to a new level in your game and you said, "Hey, you got to a new level. Congratulations." Maybe I'll show that congratulations gift for a message or something like that, telling them they got a new level.
I see there's a question from Sonny about web push notifications. I'm not going to touch on that right now because I want to focus on the mobile in-app messaging case, but happy to cover that at the end.
And then finally, one really nice thing about in-app messages is they go live virtually immediately within 30 seconds when you decide them to start appearing. And so, instead of having to go write code to show a user something and then submit that to the app store and then set it live. So folks can go download the latest version of your app with app store, here it just happens, which makes it really, really easy to quickly iterate and even measure how well these are working.
Overview of In-App Carousels
Carousels is a new set of functionality that we just shipped actually in last week or so. Carousels allow you to create a much richer experience. So, instead of one screen of content, you can actually build up to 10 screens of content, and each screen can have 10 different elements on it, up to 10 different elements. You'll see the pagination dots here in the bottom portion of this in-app message that allows a user to know where they are and go between pages of content.
This functionality actually is pretty differentiated. Not a lot of folk offer this. Firebase doesn't offer it. Braze doesn't offer it. Leanplum doesn't offer it. It's actually something that when I was a product manager at LinkedIn, I would've really liked to have, because we put mobile engineers working on a new user, a new onboarding flow for a feature week built, and we wanted it to work on iOS and we wanted it to work on Android. It took us a lot of time of dedicated mobile engineering to be able to build that out and test it and submit it to the app store and so on.
So, this is a great way without having to write any code that you can create these great onboarding feature, walk through educational experiences. If you're an ecommerce site, you might even use this as a way to show someone, let's say a couple seasonal fashions that you want to walk them through to explain, let's say offers that might be interesting or relevant for them.
Thanks, Jennifer. I'm glad you're excited for this. We'll get into a live demo in just a second.
One thing I'll mention for carousel is that it's only available on our paid plans. And the reason for that is, it required us building out this additional functionality that obviously takes time and effort on our part. And we think it represents really a way to build a much more crafted experience for your end users than just showing them one screen of content. And we think that that brings a lot of value.
So, I want to quickly walk through a couple of great use cases for in-app messaging that we already see people doing today. And all of these, we have customers who are using it in some form today. We see ecommerce sites saying to users who they've tagged as adding a product to their cart or interested in something, "Hey, there's only a few of these left," or "Why don't you complete your purchase?" like an abandoned cart use case. Also showing them new products. Let’s say there's new seasonal fashions that come in. You want to make a user aware of.
The second use case we see is ratings where you ask someone how they're enjoying the app. If they hit this button for RATE NOW, that will actually send them to the app store. You just drop in the link to your app store and a page for your app and you'll see actually that a user can then natively rate your app. A great way to do this if you want to ensure that only your more enthusiastic users are rating you in the app store is ask them, "Hey, what do you think about us?" One option is, "I'd rate you a five," and the other option is "No thanks." If they say "I'd rate you a five," maybe you send them into the app store. They say, "Hey, I have feedback or I have questions." Maybe you tag them and have your customer support team follow up to understand their concerns.
So, you can use this as a way, not just to get reviews, but also to learn from your customers. We see people using this as a way to give special offers, like limited time and coupon codes or special promotions. We see people using in-app messages with outcomes, which we'll talk about, for a lightweight version of surveys. And then finally, we see this also used as a great way for folks to either trigger a forum, to invite a friend or something in the app that allows you to ensure that your enthusiastic users are actually pulling in their friends and helping you grow your app.
So, right now, I'm actually going to switch over to a live demo where we're going to go through the product itself, and I will show you how we can create a great onboarding in-app message using carousel.
So, I'm going to go to my OneSignal dashboard right here, and I'm going to go click this dropdown and say 'new in-app message'. That's going to bring up the new in-app message creation screen. So, I'm going to specify, let's say 'Yoga App Onboarding'. You'll see right now, I don't see where I would add a carousel. So, carousels actually only work for full screen in-app messages. And the reason is, that's typically how you see carousels used in a lot of apps. That's a user paradigm that folks are adjusted to and see in a lot of other apps.
If I wanted, of course, I could have an in-app message that just appears at the top. This might be great for 'Today only - 10% off' if I wanted that to show to all users who came to my app today. I could also use center, bottom updates, 'friend request completed'. I could have this just appear for a brief portion of time so I can have it only show for a couple seconds or something if I wanted. In this case, I'm actually going to focus instead on carousel.
Creating In-App Carousels
So, I'm going to go here to full screen mode, and then I'm going to hit CREATE CAROUSEL. And what that's going to do is it's going to actually start creating additional cards. But before I do that, I want to use the fact that when I create a carousel and start adding new cards, it will actually automatically copy my style settings from the first card, and that makes it easier. So, I'm going to go add another text block, hit ADD BLOCK, HIT TEXT. Let me see the second text block a little bit below the first one. The use case I'm thinking through here is onboarding for an app that helps people practice yoga at home.
I'll add an image. I've got a SAVE down. Move my image up. I'll create a background that matches that. And here, let's say I'm going to get rid of a button because they don't necessarily need that right now. And I'm going to add some text in a color that I think will look good. let me also specify that text color here. If I wanted, I could go modify the text size and all that stuff. Somehow my image has a weird background color, so I will deal with that just I guess by using black here for now.
And then what I'm going to do here is hit CREATE CAROUSEL. CREATE CAROUSEL clone this card into a second part. So, I'm going to hit CREATE CAROUSEL and you'll see Card 2 has just been added. I can click between Card 1 and Card 2. You'll also see down here at the bottom, I have these dots. These dots indicate which carousel card I'm currently on.
One really cool thing is I can actually see this preview update as I click between cards. So now, I'm going to create my second card where I'll say, let's say the second screen is going to say 'Stay healthy' and explain to users that they can do a daily 10, 20 or 30 minute routine from their living room with my app.
I'm going to upload a different image. I have it as screen two. Actually now that I look at it, maybe I want my 'Stay healthy' to be a little brighter. Great. So, I'll go back to my first card here and maybe reuse that same teal color. You'll see here, I can actually swipe in this preview between the screens, and the cards, the card count here will automatically update to match the screen that I'm currently previewing.
I'm going to add a third screen here that continues to walk users through what this app will do and say, 'Learn to relax' and explain the basics of my app, that these are guided classes that help you learn the basics of yoga before you dive into more advanced, let's say one-on-one coaching or something like that.
I'm going to update my image here so that it will actually explain the third part of my product. And then I'm going to add one more card. And here, I actually want to explain why our users should give me push permission because I want to send them daily reminders that they should be exercising. for me to send them daily reminders, they need to enable push permission.
Since I want to ask them for push permission, I'm also going to need to add a button. So, let me just first add an image here corresponding to this final screen of someone meditating, being happy. And I'm going to ask them for push permission. The way I'm going to do that is I'm going to add a button and say 'enable notifications'. Maybe I'll add another option here, which is a text that says 'not right now'. I'm going to make that a little smaller, let's say it's 12. A user will be able to click that. If they want, that can dismiss the card. Actually, I'll add that as a button, an action that is dismissible. So, button, 'not right now'. It's 12. It's text. I'm actually going to have the background match, the black hair, and I'll put it in a gray text.
Great. So, one other thing I need to do is actually link this button that I just created for enabled notifications to actually ask people for notification permission. And that's this push prompt for iOS. On Android, they natively get pushed permission so you don't need to ask for it. But you could ask them for location, which Android does not natively give to you if you wanted to prompt them for location. Let's say, if I wanted to let them know when a nearby yoga classroom is happening. So now, if someone's on iOS and they click these enabled notifications, they're going to get a request for a notification permission from the native iOS permission prompt.
I'm going to add one other thing here, which is when someone says 'not right now', I'm going to add a tag. This is going to indicate refused_push_permission, and I want to set it to 'true'. The reason this is valuable is because it's going to let me go back to these users maybe a week from now, maybe a month from now, and maybe give a better explanation of the types of things they're missing out on by not turning on push permission. And so, it's a great way for you to be able to tag your users without having to write any code. I could then take this tag and use it to show to particular users in the future.
I'd go Add Segment, Create Segment, specify user tags. So then when user tag is refused_push_permission is true, these would be all of the people who initially said, "No, I don't want to give you push permission." But I could go back and send them another in-app message in the future that better explains what they might be missing out on and why they might want to turn it on.
I see a question from Jennifer: "Is it safe to say you should not add a button to any except the final card?" It's up to you. If you're trying to get someone to give you push permission, or you're trying to get someone to give you location permission, you might actually sequence that. You could say, "Hey, Screen 1, here's what my app does. Screen 2, we're going to connect you with a local yoga class who turned on location." That might be your second screen or a second card. And then your third card might be, "And turn on notifications so we can let you know a day before these yoga classes start."
If you wanted to ask for multiple permissions or you wanted to ask for location, explain in a screen or two when you were going to ask for push permissions or something like that, you could actually want to have buttons on multiple screens of your carousel.
One thing I'll here is that you will want to specify if you are using buttons on multiple carousel screens, you'll want to make sure that the button doesn't dismiss the carousel. So, you would uncheck this 'Dismiss on click' because 'Dismiss on click' will dismiss the whole in-app message. In this case, I'm fine with that because they're on the final screen of my carousel. But if I let's say had one screen that asks for location and second screen that was asking for push, I would want to make sure that location 1, the first one, doesn't dismiss the whole carousel.
I see a question from John around using video or gifs instead of an image. So, you can't actually use a video, but you can use a gif. It actually works really well and the frame rate is quite high. So, it effectively looks like a video. We have people who do that today. It's actually a really cool experience. Maybe I'll try and show you that in the next use case when I go through.
So now that I've gone through and set up all of these cards for my in-app message, I can go preview it on my test devices. And so, if you have your device set up, you can actually easily preview these and see how they look on your phone. So, I'm going to select, let's say a test user here. When you send a notification to a test device, an in-app message to a test device to preview, what you'll actually see is you'll get a push notification. And when you click that and open it, you will then see a preview of your in-app message.
You'll see, I can actually easily swipe through all these screens we just created. So, in 5 or 10 minutes, we've created an onboarding flow that looks good and uses our native assets. We've asked folks for push permission and we've previewed it on our own device to make sure that it looks great.
The next step here would really be just to set it live. I can say when I want it to start showing, when I want it to trigger if I wanted to reshow this. In this case, since it's onboarding, I don't want it to reshow. But let's say I was trying to get people to upgrade. They want a free version of my app and I wanted them to upgrade to the paid one. I might maybe once every 30 days remind them what they're missing out on. So, if you've ever used Strava [23:45 inaudible], these apps that have a paid offering, it's a great way to be able to reshow if you know that a user is missing out on some of your functionality and would benefit from upgrading.
So the final step here is just to set it to live. We'll confirm my settings. Now, this message is available to all of my users who were in this segment that I specified. If I want, I can also specify my segments in more specific ways. We cover that in our documentation. If you want to be able to include segments or exclude segments, you can do all of that stuff here.
Creating In-App Surveys
Great. So, we just went through a use case on how you would onboard someone and if you would ask them for permissions. Next, I want to talk about surveys. Surveys are really, really powerful because today, if you want to understand your users, there's a couple of ways. You can send them a survey and have them go fill out a Google form, which doesn't look very professional. You could use something like Survey Monkey or Qualtrics to try and understand your users and go pay them a bunch of money. And then you have to email your users and link them to this external site, which isn't in the context of your app and doesn't feel native to your experience. To understand who you want to target in those systems, you would actually need to sync all your user data to make sure that you're targeting just the subset of users that you're interested in reaching.
I see a quick question from Victoria: "Will this not show until they open the app on iOS since they've not given push permission?" So, you can actually with in-app messages reach your whole user base on mobile - Android iOS - and then all the wrappers - Flutter, Xamarin and so on. And so, they do not. Your users do not need to have push permission on in order to receive these in-app messages.
Now, they will only see the in-app messages when they are in your app. unlike push notifications, which can show up on the lock screen, because they've given you permission for that, in-app messages don't require that permission. So, in-app messages will show up whenever someone opens your app, assuming they meet the segment criteria that you've outlined, which is great because it means you can reach your whole user base.
Obviously, push notifications are super powerful in reaching folks, even when they're outside of your app. But again, someone needs to give you those permissions first to turn on push, whereas in-app messages don't require that.
Great question, Victoria. Thanks.
So now, I'm going to touch on a survey use case and how in-app messages can work with outcomes and tasks. So, let's say for example, I want to ask my users what their level of satisfaction with my app is. Here I'm not necessarily trying to get them to rate me in the app store, but I'm trying to understand a rough sense of something like a Net Promoter Score or my user is, on average, happier or less happy with the experience I'm delivering. And maybe for the folks who were really unhappy, I might want to reach out to them.
I see there's a question from Ross Vaughn about if OneSignal can be used with Unity. Yeah. So, actually, you can look at OneSignal Unity and there's actually a Unity SDK that we have. You can actually go see it in the documentation if you just punch in OneSignal Unity that we do have a Unity SDK that you can use. This will walk you through all of the setup steps. So, yes, there is a Unity SDK for OneSignal.
So, I'm going to go create a new in-app message here, and this is going to be Lightweight Customer survey. This might be something you want to run to a small percentage of your users, maybe once a month, just to track how overall user happiness is trending. What I want to do here is actually, I want to take John's suggestion for a cool gif. So, we'll find a gif for a survey. I'll see if I can find a nice example of a gif that I want to use. These are fun, maybe a little less professional than I'm looking for.
I could create my own. Here’s the Batman one. So, let's say I'm trying to be fun. And so, I'm going to take this gif. Actually, I guess it has a watermark on it, so we might not use that one. Okay. This one is fun. So, I'm going to copy this link here, and I'm going to drop that in here in the URL field for this image.
I'm going to style this a little bit so that it looks a bit better. I'll explain maybe to a user by adding a text block why I'm asking them for their feedback. 'We're always working to improve our app and your feedback helps us track how we're doing.' And then maybe I want to give a motivation for folks to fill this out. 'One lucky winner will get a $100 Amazon gift card for just clicking below.'
Cool. So, what I'm going to do here is move this image here and I'm going to actually create a number of buttons. And what I'm going to do with these buttons is tagged them to both an outcome and a user tag. And so, I'm going to say 1. I'm going to say that's the lowest, just so people know lowest to highest. I want it to match the background color and stuff that I have. I don't want it to necessarily feel like a button. I want it to look a little bit more integrated. So, I'm going to change the background color and I could make it match exactly.
One thing I'm going to do is actually have it not match exactly but have it be on a color scale where one will indicate that they're not interested and maybe as a light color or something like that, and all the way up to, let's say five. So, I'm going to create an outcome, and that's gonna allow me to track how many people clicked that button. And so, I'm going to say 'rate_1'. I click this thing, CREATE NEW OUTCOME. What you see here is it says we will also create a tag so that you can retarget these users. So, what it's telling me is OneSignal is automatically going to create a tag for which users click that button.
Background, light orange, and then make the font size a bit smaller. Cool. And then I'm going to create another block, Button 2, Button 3, Button 4, and Button 5. It's just going to read 2, 3, 4, and 5. I'm going to make sure that my size here is 16 for each of the buttons. Actually, if I wanted to do this in a little bit more clever way, I could just say CLONE BLOCK. So, I'm going to do that. So, that will ensure that the settings here from my first block get copied down. So then I don't need to specify size and color for each of the subsequent buttons. Hit CLONE BLOCK and make this one, say 2. And then I'm going to update the outcome here to say 'rate_2'. Same for 3, 4, and 5.
I don't love exactly the way this looks, so I might want to refine it a bit. Maybe I actually make it white to green, and I change my background. So, let's do that and that actually might give a better visual indication. So, I'll have white at the bottom for Button 1. 2 will be closer to a light blue. We'll still leave it a gray. 3 is neutral. What we've got here is a white color, the text black. And then we'll go into, let's say like a light blue. 5 will be maybe a dark blue.
So, here's a way where I can give a quick rating scale - 1, 2, 3, 4, 5. I can easily map that here to an outcome and to a tag. You'll see, actually, I can remove the tag if I want, but with this rename tag, I can actually see what it's doing behind the scenes. I can see that it's creating a tag for every user who clicks on this button, any of these buttons, with the value of true. And that will then allow me to go retarget those people.
So, all I do is hit MAKE MESSAGE LIVE and all my users will immediately start doing that. And then I can go view the results of this lightweight customer survey. And this could just as easily be asking my users, which of these five features are you most interested in next? What should we build next? What's your biggest pain point? Any of those things. I can go view immediately the delivery results here. If I go hit DELIVERY and then I hit outcomes, I can actually go see how these responses are starting to come in.
And so, if I go look at my app, I now see this in-app message. I'm going to rate myself for this app, let's say four. So, I just hit the 4 button. And now, when I go to my outcomes screen, I can also see this from my main dashboard screen, where I see this add outcome. One thing to note here is that the outcomes that happen in an in-app message will show up as unattributed. They won't show up as direct or indirect. They'll show up as unattributed.
So, I'm going to go here to DELIVERY. I will start sharing my screen again. I'm working on a staging environment here. So, it's possible that it might be a little bit more laggy than the production environment that all of all of you will have. But what I'll see here is that outcomes, when I go to unattributed, I'll have an option for rate. Now, it's still updating because I'm on a staging environment, but you'll then be able to see by date and even by hour and even at a minute level of resolution, the number of ratings, rate_1, rate_2, rate_3, rate_4, rate_5.
Now, since I just showed it to myself and it didn't go to a lot of users, that's not populated for all those different reigning parameters. But I would just add them here as rate_ and it will populate. I can also, of course, go and look at the delivery statistics for this in-app message that I just set live where it will show me a preview of it as well as how many folks saw it and all that stuff.
One final thing that's cool is I could then export a CSV of all these outcomes. So, if I hit EXPORT, it will just send me an email, a CSV of all the outcomes, all the ratings that I just generated. I can see those as they come in or I could wait for them to flow in over a couple hours or so. That's a great way to survey your users, solicit product feedback using in-app messages.
I'll show you one other really quick thing, which is how one of our customers is actually using this. And then I'll take any questions that folks have. So, let me share my whole screen.
Great. And so, you can actually look at one other cool way that one of our customers is using in-app messaging with segments. So, they'll define groups of people who have gone to the local coffee shop and have this app, this rewards app, Joe, but haven't come back in 14 days. And so, they tag these users and they look at who hasn't come back in 14 days. And then let's send them a push notification if they've turned that on. And then once that person is in the app, they'll show them a discount code, a promo code, Java here, just start the order. And when someone hits START ORDER, that will actually deep link them to a specific ordering page in the app.
And so this is a great way that you can use push notifications alongside in-app messages to create cohesive user experiences by using segments to define who sees the push, using segments to define who sees the in-app, and then actually tracking with outcomes when someone completes a purchase, when someone upgrades. You'll be able to see that in the outcome screen that we just looked at to actually track all the outcomes that happen that you care about. Great examples of outcomes are purchases, someone posting content, someone referring a friend, things like that.
So, that was a quick walkthrough of in-app messages, carousels and surveys using OneSignal. And with that, I would love to answer any questions that you might have. You can click the Q and A button in Zoom, or you can also ask questions in the chat, and I'm happy to cover any of those. or if there's no questions, thank you so much for joining. If you do have any questions, you can always ask our support team just by going to onesignal.com or going into your dashboard, and you'll see a little option in the lower right hand corner to chat with us. And that staffed with our support engineers and our team that's happy to help you on anything that you might be curious about.
Thanks so much for joining. I'll stay on for another minute or two in case folks have questions and have a great rest of your day. Thanks.
You're welcome, Charles and Jennifer, thank you for joining. Bye Razon.
A couple of questions I see from Lauren: "Can a carousel be sent to a specific segment?" Yes. You can use segmentation here to define who sees it.
I see a question from John about daisy chaining in-app messages. So, what you could do is you can use an in-app message and you'll know who has seen it or dismissed it if you add a user tag. In the same way, I just said that you could add a click action. So, you add a user tag. You'll know who’ve seen that or clicked on that. And then you could then have a second in-app message where that user tag is true. So, someone who's seen that or clicked on the first one who then could see a subsequent one, and that's the way you could sort of daisy chain them.
Eva asked about minor changes when you were updating in-app messages. Yeah, that's just part of screen sharing and that's not part of the experience you would see natively.
Dawn asked: "What is involved to enable in-app messaging?" So, all you do to use in-app messaging with OneSignal is make sure you've got a mobile app configured in the OneSignal SDK. And then you can start using it. You want to be on the SDK that we've released in the last year, which almost all of our users are, if you haven't just updated in Android Studio or VS Code or Xcode. You could test it on your own device and make sure it's working.
You do need to be on a paid plan. So, if you're on a free plan, you'll want to upgrade to a starter or pro in order to be able to use in-app messaging functionality with carousels and with outcomes as we mentioned.
Frank asked if there's a way to collect text answers from users within an in-app. Not right now. It's something we're thinking about either through letting you add your own HTML blocks or adding a configurable field and is certainly something that we're looking at as expanded functionality. Thanks for sharing. I see that both Frank and John are interested in it. So, that's a great signal for us as a future product to ask.
And then finally, the last question I see here is from Grace asking if there is a recording of this that we'll send out. So, what we'll do is we'll actually just post it to our YouTube channel, and we'll do that in the next day. So, by Friday, end of day, latest Monday of next week, we will have this posted if you just go to OneSignal's YouTube channel. This video will be posted there.
Any other questions? Yeah. Final question was about a recording. Yeah, that will be posted to the YouTube channel.
Alright. Thank you so much, everybody, for joining and have a great rest of your week. Bye.