Add a banner to your app.

Today, I'm going to be showing you the simplest way to use Unflow, which is our banner component.

You’ll have seen these all over various apps, and they’re a lovely way to get messages across to users.

If you open any commerce or fintech app you'll find these in some form or other.

We’re going to get this added with just a handful of code, then completely forget about that and look at how we can use it without touching Xcode or android studio.

We've recorded a quick walkthrough if you'd prefer to watch a video instead.

The Setup

Let’s get started on the web.

Open up Unflow, and create a new space by tapping the plus next to spaces.

This is the space that we’re going to put all our banner content in. We recommend creating one of these for each banner as you might want multiple, say one on your homepage and then one in your checkout flow.

We’ll call this one “Home”.

The visual style is really eye catching, but it doesn’t fit with our app, so let’s use the standard style. If you want something else, you can go fully custom using custom openers, and we also have a tutorial for that.

Next, let’s add a piece of content by tapping create new. Our gallery actually has some great examples, so we’ll start with one of those.

I quite like the onboarding template ( with some pretty graphics ), so let’s use that. I recommend playing around with a few of these to see which you like, as they’re great starting points.

In the delivery tab, we'll see the "show in my space" delivery option selected, and our "home" space too.

You can customise the image for the banner, and you'll see it in a little preview. I've changed it to be a nice stock image from unsplash

There's options here for making the screen pop-up as soon as a user is eligible to see it, and to send a push too. These can be super useful for pushing new features, but we won't use those today.

Select the content tab to get designing ( don't worry, we've done the hard part for you ).

We can see our lovely content, and we can customise this if we want. We can also run an A/B test if we’d like to, to see what we can do with some alternate content.

I've changed my screen to talk about my app.

On the last page, I have a CTA to enable notifications. Because my app already has deeplinks setup, I can use one that I already have and Unflow will be able to open that link for me. If your app doesn't have deeplinks setup, you'll need to get your developers to do that for you.

For now, lets just set that live, and head over to our app.

The code

We're presuming you have the SDK setup and initialised at this point. If you don't, the installation guide is here.

Our guide today is written in Swift & SwiftUI, but you can apply this exact same approach to any platform.

The SDK needs to be initialised, you'll need to set a user ID, and then you'll need to call sync. Here's what that code looks like in our demo app.

@main
struct moneyflowApp: App {
    private let unflowClient: UnflowSDK

    init() {
        // Make sure you add your API key.
        unflowClient = UnflowSDK.initialize(
            config: UnflowSDK.Config(
                apiKey: "",
                enableLogging: true // Disable in release builds.
            )
        )
        // Be sure to set your userId here.
        unflowClient.setUserId(userId: "ben-ten-bkn")
        unflowClient.sync()
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Next, we need to actually use our banner. This is super simple, and the only hard part is deciding where it goes!

Generally, the best spot for your main banner would be at the top of your homepage, underneath any existing headers you may have. In our app, we have a big balance header, then our content follows, so we'll put the banner above that.

Because our background color actually matches the banner, we'll provide the banner with a different color to use.

import SwiftUI
import UnflowUI

struct HomeView: View {
    var body: some View {
        NavigationView {
            VStack {
                BalanceView()
                    .padding()
                ScrollView(.vertical) {
                    VStack {
                        OpenerView(
                            spaceKey: "home",
                            backgroundColor: Color(uiColor: .systemGroupedBackground)
                        )
                        .padding(.vertical)
                        ...
                    }
                }
            }
            ...
        }
    }
}

When we open our app, we get this lovely banner, which after a tap shows our content.

Remember to make sure you call sync at reasonable times. We think the best time to do this is when the SDK is initialised, and then when the app comes into the foreground.

There's another step to take here that's going to make things super easy for marketers and product folk. We can track some basic analytics, like what screen users open and some small pieces of data like if they have a premium acconut or not.

If we do this, it allows people to set content live thats limited to certain people without having to get a dev involved again ( they can stick to the fun stuff )

Tracking analytics is simply done with trackEvent, and tracking attriubutes is setAttributes. Both accept metadata, and we recommend providing all the data you think is releveant.

The best time to track your attributes is as soon as you know them, i.e after logging the user in.

UnflowSDK.client.trackEvent(
    "opened_balance",
    attributes: [:] // Optionally provide some metadata
)

UnflowSDK.client.setAttributes(attributes: [
    "account_type": "basic"
])

It's worth noting that setting attributes wont set them immediatley, they'll be sent up with the next sync.

Thats all the code we need - you can ship a build with this and let product folk run wild.

Going further

Now we have our banner, there's plenty we can do. This space will show up if you've got content for it and hide if you don't, so you now have a fully remote controlled spot.

Lets consider an example of how we can do targeted messaging.

When you use an app like Monzo, you frequently see messages at the top of your balance like these. When you tap on them, you're taken to a new screen that contains a little more infomration, and usually a CTA.

Here's an example of what the CTA looks like, alonsgide an example of one of the pop-ups you get after tapping.

( This is a slightly older Monzo design, but the lil' banner is the same now. )

Whilst they could show this to everyone, its probably not very effective to show it to someone who already has a savings account.

Unflow can take care of this by limiting the content to only show to people that meet certain criteria.

In our app, lets show a promotional advert for premium accounts to anyone who's account isn't "premium" ( we'll also make sure that this shows as a pop-up ).

Lets head back to the dashboard and make some new content again in our home space. This time, we'll start with a blank story.

I've configured this with a premium looking image, and enabled showing the screen as soon as people match. I've also enabled push - this will only work if your app is configured for it ( send this to the devs ).

Now we need to make sure its only going to show to the right people.

Select edit audience, and you'll see all the options you have for filtering. This will be full of all your events.

For this example, i'm going to make sure the user has opened balance at least once, and that they're not a premium customer.

The editor will show a nice summary of your audience so you can tell at a glance who will see it.

Next you'll need to setup your content again. Videos work super well, but i'm just going for a bougie looking story with text on it. I've also setup a deeplink on this page. If you can't get deeplinks integrated into your app, an alternative is to have a page that tells the user where to go, then set the button type to close.

When we next open our app and sync, or that event is triggered, we'll see that screen if the account type matches the rules.

There's one last trick to show you - you can actually control how this banner looks right from the dashboard. Select your space, and then tap edit at the top.

Select visual and you'll see a lovely looking image based banner. The next time your app syncs, this will change over on its own.

With the content we just made, this is what we'll see in our app. Our basic customer sees the story pop-up, and the banner item, and our premium customer just sees the other content.

Thats all for today. We have a banner that rivals the big apps, and we only had to add a tiny amount of code. From here, you should look at how you can optimise your content with experimentation and monitor your results on our dashboard.

If you've got any questions, please reach out to us on our live chat available down below.