Integrate an Out-of-the-Box Notifications Preferences Center into Your Web Application

Shreya:

Alright? And we're live with Maria: and Christian from our engineering team who built out the preference center. Hello, everybody. My name is Shreya:, and I am the host of the weekly workshop series called Decode, where we come here and we talk about notifications and how to build an awesome notification experience within your application. Maria: and Christian, can you guys tell us a little bit about yourselves, your background and what brought you here today?

Shreya:

We'll start with Maria:.

Maria:

Yeah. Hi everyone. My name's Maria: I’m an engineering manager here at Courier with our product engineering organization and I'm here to talk about Preferences Center. A little bit about me I started at Courier about 7 to 8 months ago. And I come from a background of big building consumer products that actually have had to build notifications, and I have had to build in preferences as well.

Maria:

I personally feel so passionate that Courier is doing this because I know the pain as a developer in the past of having to build this out myself. So I'm super excited, super passionate and putting myself in the mind of the consumer, which is the dev persona itself.Yeah, so I want to talk some more about that.

Shreya:

Awesome. Thank you so much. And Christian, do you want to tell us a little bit about your background and what got you here today?

Christian:

Sure. My name is Christian Glassiognon I worked here as a software engineer on sort of the product side of things. So I worked on preferences for a while, basically since I started at the company around the same time as Maria:. Now I’m working on other fun projects coming out soon here at Courier. And yeah, I built out my own email and subscribing tools before and spent a lot of time trying to clean up my email inbox because it's just very annoying and so preferences is a really nice feature, really fun to build, especially because I felt the pain of trying to manage all that stuff.

Christian:

So yeah, that's a little, little bit about myself.

Shreya:

Yeah, it's a lot of work. And I mean, what would we do without you guys here building it out for us? I want to say thank you to Tejas and Maria: for joining us and the chat Tejas said that he's going to add this intro music into his programing playlist. And honestly, that intro music is the only thing that wakes me up in the morning and gets me enough energy for this livestream we were just talking about.

Shreya:

Like, why is this so early in the morning? I don't know. I scouted all that, but whatever. And we also have Maria: saying “Hi,." Hi Maria:, how are you doing? Thanks for joining us. So yeah, we can go ahead and dive right into it. Tell us a little bit about what preferences is, what the preference center is and what it meant for you to build out something like this.

Shreya:

Why did you even get started with it?

Maria:

Christian? Do you wanna go? I know you’re really excited about it.

Christian:

Sure.

Christian:

Yeah. So, you know, Courier as a company, we want to give you sort of all the tools you would ever need to manage anything related to notifications. And we want it to be something that anybody on your team is enabled to sort of go and do. So we built out preferences in a way where your PM could do it, your engineers could set it up and it will just sort of work out of the box and work the way that you expect it to.

Christian:

And we make it very easy to integrate into the rest of our application, you know, So with our preference center, you can set up all your notifications and then you can take tha set up that you have integrated into your notification templates, integrate it into the brand that you have, you know, build out your own preference yourself via our APIs.

Christian:

So we give you a lot of options to set it up. And we also give you a very good way to sort of see what your users are doing as well in terms of preference logging in case you need that. You know, with can’t spam laws here in America and with sort of other regulations around the world is lvery important to respect your users notification preferences.

Christian:

You could potentially get fined for it and we don't want you to ever run into those problems you know, being the people who are helping you set up your notifications. So that's the idea behind preferences.

Maria:

Yeah, to add to that, that was a great overview. To answer the question of what I feel like we started building this out and why we kind of built it out, obviously Courier is a solution towards like notifications infrastructure and we want to make it easy for our customers to integrate notifications into their product with the least amount of engineering and best resource investment as possible so that our customers can focus on building their core products. Honestly, you can't have notifications and be able to engage with your users… I have two courier pigeons in my in my living room.

Maria:

if you hear them. Yeah, we're beta testing them. So yeah. Anyway, so back to what I was saying was, you know, preferences and notifications go together. You don't want to be annoying your users and there's a higher chance of your users engaging with the product more if you give them the ability to have control over what they want to hear from me about or not.

Maria:

And honestly, it just establishes more trust. So it's kind of like a given. So Courier had a preferences solution before, but never like this where you had a nice like built out UI where you can easily integrated with their already created notification templates and things like that. It was honestly a joy to dedicate the couple of months that we spent on this, Christian and I, and then another one of our other colleagues Suhas. Really thinking about what we wish we would have had when we had had to have done this in the past ourselves as developers.

Maria:

Honestly, I'm really excited to go through it and it can be a no code solution or it can also be as customized, like Christian mentioned, going through APIs. So yeah.

Shreya:

And Dennis too. Yeah. Thank you so much Suhas and Dennis. You know what they say when your users are happy your engineers are happy. I don't know if they say that, but I'm saying it today. Yeah, and thank you, Dennis and Seth for also joining us in the YouTube chat. Awesome. So let's go ahead.

Shreya:

I feel like we're in the wilderness right now. Every time we hear like the little birds chirping in the background, if anyone's curious, they're the birds that actually send out your notifications. They like take a little…

Maria:

You know, Exactly. They're really excited about Preferences Center.

Shreya:

They're very excited! I love it. So if you've been with us before? We've been building on this really awesome e-commerce Segment demo site that was given to us by the Segment team. And today what we're going to do is talk a little bit about how we can take all of these events that are pulling in from the website as your users are engaging with it and put them to use based off of I don't know what it's going to say there, but basically start setting notifications that are a little bit more, that are a little bit better and smarter based off of what the users want to hear.

Shreya:

So we also have Josh joining us in the chat. Thank you so much. Yeah, I'm going to let you guys take it away. Maria: and Christian, can you walk me through the process of getting up and ready with preferences within Courier?

Maria:

Yeah. So I have a question for you, Shreya: What what kind of notifications are you sending to your users right now with this e-commerce app?

Shreya:

That's a great question. So right now we sort of ideating behind what anyone who's building an e-commerce website would want to build. And I think one workflow we've worked on before with Seth in the Segment livestream was when you have items in your cart and you want to kind of let your users know, Hey, you have an item in your cart or Hey, you've gone through your checkout process or something like that, right?

Shreya:

Like you can build automations based off of those events.

Maria:

Yeah, that's a super common use case. And so I think what would be a perfect first case to cover is are you already filing a Segment event for when the user files puts an item in their cart.

Shreya:

Yeah. So we can check it out when a user adds an item to their cart. You know what happens over here? It says product added. And you're right, we actually do have a couple automations set up so we can kind of zoom into these automations. This is checkout and this is item added to cart. So this is the one you're talking about, right?

Maria:

Yeah. Yeah. So I see that you have a new item added to cart template here, so perfect. You already did like 90% of the work. Now it's just that little bit to integrate it into preferences. So if you go to the designer sidebar. Yes, go ahead.

Shreya:

Let me just open it a new tab and of course.

Maria:

Yep. And if you see there, there's a third tab that says preferences. So when you are first taken to Preferences Center, we added some very common high level subscription topics. So actually, Christian, you're very good at walking through the different components of the Preferences Center. You want to go?

Christian:

Yeah. So we we give you by default with a new workspace, a few preference topics and then a default preference section. So sections are sort of the of the group of preference topics that you have and then preference topics group together all of your notification templates. And with a preference section, it allows you to customize which channels your users are receiving notifications on. And then if you're one of our contractor customers, we give you the ability to give your users the ability to select which channels they want to receive those notifications onthemselves. With our topics, we sort of have three sets of defaults where you can either always receive the notifications or having acquired some notifications have notifications where users have to manually opt in.

Christian:

So it's very good for things like marketing where, you know, you don't want spamming users with tons of notifications, but if they want see marketing notifications they can. And then we have just your general. This user will receive a notification by default, but they can turn it off. So that's our general notifications topic there. So you know, for things like adding items to your cart, maybe a user won't always want to see that notification.

Christian:

So we'll walk through what it's like to add that notification template to the marketing side of things. But with, you know a checkout your user is always going to want see when they checkout and they paid for something. So we'll walk through the process of adding that to our account notifications topic down there. And then with this sort of preference center, you get by default, if you click on preview page, you get your nice preference center that we make it very easy to integrate into your brand.

Maria:

As and as you all have noticed, we have yet to go into any IDE VS code or anything. Yeah, something we didn't mention in the beginning. A host update. Yeah. So every time you add a new topic, you're able to preview and this is we'll walk through later how you can link this hosted page into your notification template such that if your your users get an email, they can click on to that link and be taken to what we're calling the Preferences Center.

Shreya:

I love this and it's so easy to use especially for the end user. We were talking a little bit about how this is really just about making your user experience a lot easier and a lot faster in terms of just managing notifications. I don't want to have to go click on like five different links and be like, Oh, okay, I want this type of notification.

Shreya:

What is a general notification? What is marketing? These are very easy to understand and intuitive, and it's very easy to understand that if I click on this once I'm opted out, if I click on this twice, I'm back in and that this is required. So no matter how hard I try, I can't get out of getting my account notifications.

Christian:

Yeah, and you see we have our Courier branding on nice and post on there. But all of this branding is customizable through our brands sort of product. And with that it will automatically customize the page. You don't have to go on like, say, I want the space to be customized in this way, do even more work, which is like by default, it will take whatever default brand you have so.

Shreya:

Awesome and to clarify, this is the part of the brand that you can change. This is not part of the brand that you can change. This is something that's part of the free tier that it's going to do that, right?

Christian:

Awesome. So we give you the ability to customize what that footer looks like.

Shreya:

Given us the cash cache. Awesome. So let's go ahead and talk a little bit more about this page specifically, because this is where we would want our engineers and our product managers to land and be able to manage notification topics and everything. As you were talking about, what is the process to decide or just you let me know how to navigate this.

Maria:

Okay, so we were talking about linking your new item added to cart to a topic and Christian mentioned I think that's a good use case for marketing. So if you go into that marketing topic, you click on the little pencil on the right hand side. Yep. And then here you have the topic configuration screen, and here you can decide what if you want to rename it, let's say let the yes because we agree the default topic name doesn't work for you.

Maria:

You can go ahead and change it to marketing. Marketing item marketing. I don't know.

Shreya:

Marketing. Yeah. We could like for example, newsletters or whatever you like.

Maria:

Yeah, yeah, that's right. So and then if you go into link notifications on the left hand side, there's a different tab there. Okay, So here's where you're actually going to add the notification. So you want to fall under the subscription topic umbrella. So as you can see here, new item added to cart. Sounds like I think your workspace has a hacker because as they linked that template already to a different topic here saying general notifications.

Maria:

So you're not only able to link fresh new templates to a topic but if a top if notification is already linked to a different topic, it tells you, hey, this is linked to a different one, but you can still like switch it over easily via the same screen. So let's go ahead and move this new item added to cart.

Maria:

So if you click it.

Shreya:

New item as added... This is newsletter, so I'm going to click on the newsletter one. Is that okay?

Maria:

Oh, I thought we're going to do marketing now. Yeah, well that's fine. Yeah. Let's do newsletter when you see that.

Shreya:

Awesome. I do like the fact that it sort of just like labeled that the other one was already in general so that I don't have to like think about, Oh my God, which notifications do I want in here? Which ones do I not want?

Maria:

And exactly.

Shreya:

Also Dennis is in the chat saying: “Ain't no hacker. That's just how good Courier is!” And actually, I'll have to admit that was me going in before the livestream and just like playing around and making sure things were good.

Maria:

That was me making a joke. Yeah, that's totally organic.

Shreya:

I love how Dennis is so excited about Couriers. It's like this is how good Courier is!

Maria:

Courier can read your mind and knows what you mean. That's the future. Okay, so yeah, we have this newsletter email link to your topic. Now you will need to publish your changes. So let's go ahead and make sure that that goes in. So as easy as that, know that page is live and in production. So let's trigger the newsletter email.

Christian:

Do we.

Maria:

Have a use case?

Christian:

Do we also want to finish setting up adding the checkout to cart?

Shreya:

I have a bunch of stuff here.

Maria:

Shreya: is the client here. So you need to tell us what you need.

Shreya:

Little bit I think there's we already have newsletters. We know that there's order confirmation which I guess is more of like a required one. Right. So can we talk a little bit about the difference between having something that's default on having something that's default off and having a required default? What does that mean?

Christian:

Yeah, so default required just means that by default, that notification has like a user has to receive that they're unable to opt out of it. So we'll say by default that notification is required for user to be received. Default off means that a user can opt into it. So by default a user will not receive that notification unless they say that they want to receive it, then default on just means that they will always receive the notification until they opt out of it.

Christian:

When you create a topic by default, by default we set the default state to on. So by default notifications are set to on unless they opt out. That’s a lot of default.

Shreya:

So I've just sort of like categorized them. I don't even remember if I categorized them correctly. But the main thing is that if we we have our little Twitter confirmation here that's linked and required. So regardless of what the user decides, they're going to get this email versus if they have the ability to manage notifications before they get that email or at any point, they're never going to get something like new items not add to cart or reminder to purchase if they've turned general notifications specifically off.

Shreya:

Awesome. So I'm going to go ahead and publish these changes and I really just want to see this in action. We know what this preview page looks like. Can you tell us a little bit about how like the person who's sending the notification, whether that's the engineer, whether it's a designer on their team, how would they go about making sure that the user can manage their notification within the actual email that they're getting?

Christian:

Yeah. So there's sort of two ways to do it. But the best way is just integrating into one of your brands, a link that says manage your preferences like every user's probably seen it a million times before in every email that they get that little link that says unsubscribe or manage your preferences. So if you go to your brand.

Shreya:

Okay.

Christian:

Over there.

Shreya:

Head to my brands.

Christian:

And then we can hop into my first brand. And so all the all the styling, by the way, for your host page comes from this default brand that you set. But we can go into this footer, we can click on edit for content and social icons, and then we can type in, manage your preferences.

Shreya:

Manage preferences. Oops, I don't know what I did. Oh yeah. Okay. It's good.

Christian:

Should be good. And then I would actually hop over to our our documentation quickly. It's actually really great. I don't know that I want to highlight.

Shreya:

Highlight and we'll go ahead and send the link to our docs in the chat as well. And I see preferences right here suite.

Christian:

So we have I think you use case guide if you check their. Hm. Where is it? There's a guide somewhere in there in the deep forest of our documentation add a host, if you click on like maybe host a page.

Shreya:

Let's click on hosted page and this is about how you can add it directly within a notification. We're thinking about brands. Oh, this part over here. Awesome.

Christian:

Fortunately, it all works the same way. So that little it says: “In the hyperlinked modal and you have that specific string…”

Shreya:

So this string is to link these words or any words that however you want to call it to the manage preferences page that we saw earlier as a preview. Awesome.

Christian:

So you have to do all the job of like filling in that that notification link as an actual link. We also have link tracking as well. So you can see like if your user just clicked on that or not.

Shreya:

Clicking on it would disable it. So we'll leave that over here. A quick question while we're on this. Is there a way to maybe just do like an unsubscribe or as manage preferences? The only that we can do, yeah.

Christian:

So there's a way to add an unsubscribe link. It's the same process. The stream that you have to save is a little bit different. It's .unsubscribe instead of .preferences. And then if you need to find that you can always Google like query unsubscribe link like we have good SEO, the first thing that pops up.

Shreya:

Yep. thanks Mike and Maria:. Oh awesome. And I want to also mention that as Christian was saying, you don't have to just do this from the brand, although doing it from the brand is probably a really good idea and I wish I thought of that yesterday, but you can also do it within the actual designer. And that's what I did when we were sort of preparing.

Shreya:

I went in and I got really excited about buttons within the template editor and I added a manager preference button to all of them. So what you're going to see now is that these emails have the button and they have the manage preferences footer in the footer that Christian just told us to build and this is like an easy fix.

Shreya:

We can just delete it. I'm not going to delete it from all of our examples, but I'll delete it from the first one that we're seeing over here. Really quickly, we have our automation that says product added, it's published, it's ready to code. Can we can we try to see this in action now?

Maria:

Let's do it.

Shreya:

Awesome. So I'm just going to go ahead and add something to cart and since I've added two items to cart, this was already there before. Ideally stuff. I should have gotten two emails I was going to say stuff should show up. That's not a very good way of describing this experience.

Maria:

Stuff will always show up.

Shreya:

Stuff will always show up yeah. Okay I got two emails. You can see them over here, both sent around the same exact time.

Maria:

We want to see them in your inbox.

Shreya:

Absolutely. Let's see, we have this is an old email and then this is 10:23 of the ones that we just gotted it, got it. I can't talk today. I don't know what's going on.

Maria:

So yeah, Shreya:,now, if you go back to that email… Not the one from 9:41.

Shreya:

Oh not this one, the other one. Yes.

Maria:

Yeah. You're just shopping all day, every day. That's all I've been doing. All right. Okay. So as you can see here, the brand footer has that link that Christian walked you through. How to set up. So if you click on it as a user, got a notification, I am so annoyed. I don't want to get an email every time I add an item to cart.

Maria:

And so if you let's say you want to opt out of the general notifications, this wasn't a newsletter, just opt out of that and you want to continue shopping.

Shreya:

Yeah, yeah. I don't want to get an email every single time I add something to cart, I'm going to add a bunch of stuff and I don't want to get four emails for that. So let's see what that looks like in the logs. okay.

Maria:

There's a question mark.

Shreya:

This is great. Yeah.

Maria:

Yeah, Why not? Why is that great? Yeah. There you have opted out of that notification. You're not for these kinds of notifications, so you're not going to get anymore so you can continue shopping internationally.

Shreya:

Yeah, I always love demoing the logs when we're trying to show something that's supposed to get an error because it feels like there should be like this big like event. But it's just like, Oh, it didn't go through. Okay, cool.

Maria:

Which is what we expected, but I think it's good. Yeah. No, I mean, it it kind of shows the responsiveness of our product. Like we not only show the consumer side, but we show like, hey, you'll be able to see all these things within your Courier dashboard as well.

Shreya:

So yeah, great. Tejas just said: “That's what you really need when you do too much shopping."

Maria:

Exactly, Exactly.

Shreya:

Much. I feel like there's a hint of judgement there.

Maria:

There’s never too much.

Shreya:

That was really fast. Is there anything else that we want to show off? Anything else we can do? I think we have another automation?

Christian:

Let's let's let's check out an item and we'll show sort of that that flow there as well that you'll always see the rotation suite.

Shreya:

I'm going to check out all these items. I'm going to go ahead and check out his guest. Keep in mind that this is a demo app, so none of this actually works. I can just go ahead and pay and it's not going to ask me for any money.

Maria:

All of that for $20?!

Shreya:

I wish every shopping experience was like this.

Maria:

So yeah, you should see that automation should have kicked in. We should have sent you an email.

Shreya:

So we have an automation from that time and it had a delay of one minute. So that's a good sign that we don't have an email just yet.

Christian:

Yeah. Also, if you ever want to know how anything about automations works, I think we did a previous livestream rate trade with for our fabulous CTO Seth. I'm sure those contain a little bit of that.

Shreya:

So automations are on the supply chain. We actually also have a podcast that was just released like yesterday I think with Seth and Ben, one where they talk about automations and Segment and how that entire ecosystem works.

Maria:

Yeah, so, you know, and, and to shout out Segment a little bit more like you have Segment, you can easily integrate your notifications. And now with Preferences Center again I want to highlight we have not gone into any code editor and we got up and running in 20 minutes with a very thorough explanation of Preferences Center. So imagine you going through this on your own and even less time you can already get this up and running.

Maria:

So that is just like super exciting. And I'm sorry, I'm going to pat Courier on the back for this one.

Shreya:

You absolutely should. I mean, this is a really big feat. And as an engineer that's working on a regular product, you never want to have to go out and build something like this from scratch, Right? Like, this is not what you're trying to build. If you're building an e-commerce website, you want to focus on the e-commerce aspect of it.

Shreya:

I can't talk today at all. You don't want to have to focus about on like preference notifications, but you can give your users a really awesome experience. Awesome. So I got this email or at least I should have gotten this email and I can go back into my inbox and see that I didn't get those four item out of emails, but I did get my order confirmation, which is fantastic.

Shreya:

And this has two links because I didn't edit the template. But you know, you guys are smarter than I am, so you'll you'll make sure not to do that.

Christian:

Or, you know, if the user ever says, I got a notification, I thought I unsubscribed from it and they're very frustrated. If you want, we can go over to the users page and check out user preference logs and it lets you sort of see if you users actually unsubscribe from something or if they just thought they did and they haven't yet very useful for support stuff especially, you know, if your user ever files like a GDPR or not GDPR a can't spam complaint you know that saves you a lot of fees for that.

Shreya:

Where did you tell me to go? I think I missed it.

Christian:

Yep. So each user in the user's page, I think the Courier test user. So you see that bird tab there has their preference logs so you can see you popping out of notifications what time they did that, what topic they did the sort of the opting it or opting out on. And that's just like a really great way to say like okay, you were actually subscribed to this notification at this time, you unsubscribed afterwards.

Christian:

So that's why you got an email and you know make sure you go and unsubscribe.

Shreya:

This is awesome. I didn't know this existed. Oh my God, this is great. Okay.

Maria:

Surprise!

Shreya:

I love this. Okay. Is there anything else that we want to demo? Anything else you want to say about preferences?

Maria:

We're really excited for our customers to start using it and look forward to hearing feedback and hearing how we can make it that much easier for you guys. So thanks for everyone for tuning in and yeah, I expect a lot of karma for this.

Shreya:

Dennis said the same thing.

Shreya:

I didn't even know we had the preferences log, but that is really awesome. So yeah, anything else that you want to say.

Christian:

Go check out. You know, obviously sign up for Courier when you do you get all these very nice things by default it will make preferences very easy to set up. Our onboarding is pretty good. So lgetting your first notification sent will be pretty quick as well. We have a really cool Gmail integration. That's good for testing, but it allows you to send emails very quickly documentation as well.

Christian:

We put some effort into that to make sure it's really easy to understand, really easy to get up and running. We'll probably put more effort into that stuff as well. But yeah, if you have any questions, we have really good support people and obviously it's very easy to reach us as well as engineers.

Maria:

Shout out to Ron.

Christian:

Yeah, shout out to Ron, Ron is a hero, but we also as engineers would like tickets that come through. So it will probably be very easy to reach Maria: or me or, you know, sort of any of the engineers who have worked on preferences.

Maria:

So yeah, we're definitely always open for feedback and hearing if things aren't working. And I want to plug Dennis because I feel really bad for not adding, I'm always thanking him like in internal meetings. And that's the one thing we do publicly. Dennis is our product manager collaborating with us on preferences and yeah, we wouldn't have been able to do it without him as well.

Shreya:

Dennis is the best and honestly, I think we were talking a little bit about this when we were discussing the podcast that's going to come out next week, but our engineers, they sort of use you guys have this mentality of believing that you're part of your customers team. And I think that's what sort of takes Courier at the next level to where it's not just that we're providing a product or just the support, but we're actually providing our engineers time as well, not just to make sure that Courier is successful, but that it successfully integrates into your application.

Shreya:

And on that note, that's all we have today for preferences. Go check out the documentation. Let us know what you think. As Maria: and Christian said, thank you guys so much for joining us. Maria: and Christian, you guys are amazing. You guys built such an awesome product and I'm excited to see how people are using it. And we will see you next week.

Shreya:

Bye.

Maria:

Awesome. Thank you, everyone.