Create a Notification Inbox for User Activity Updates with Node.js

Shreya:

Alright. Oh, my God. I love that music. I know. Everyone always loves it. It really gets me pumped up at 10 a.m. in the morning when I really just want to be taking a nap. But we're here with Decode with Riley, and today we're going to be talking about notification inboxes for user activity. Hi Riley, How are you doing today?

Riley:

I'm good. I totally would rather be in bed still.

Shreya:

Exactly. My name is Shreya. I am your host of this weekly live workshop series called Decode, where we talk about all things notifications and we bring engineers from all over the world and from Courier to talk a little bit about what it takes to build a solid notification system. Riley, Could you tell us a little bit about yourself and just like introduce us to the type of work that you do at Courier?

Riley:

Yeah, I'm Riley. I am an engineer here at Courier. And for the last couple years, I've been really focusing on our embedded project, which is bringing Courier technology to other people's websites. Kind of like a white labeling thing specifically. We've been working on inbox a lot lately and working on different ways to send messages to your browser, because a lot of times delivery messages to a browser.

Riley:

There are things like browser, push and mobile push, but a lot of times you have to kind. Those are really difficult to integrate and the inbox for us is relatively easy to integrate. So that's what we are going to be walking through today.

Shreya:

Awesome. And Riley, I believe that you're one of our first engineers working at Courier. Could you tell us a little bit about your experience being here for the last four years?

Riley:

Yeah, it's been ia wild ride. It's really cool to go from working in an attic to now being on our third office and having snacks in the office, which is great. We were in the attic of a bookstore and there were no windows for a while, and I thought I was crazy for taking the job, but so far so good.

Riley:

And we are still here and we are doing great.

Shreya:

That's crazy. In four years, you can go from an attic to windows and snacks, guys. I feel like that's how you know when you've made it.

Riley:

And we have plenty of plants in the office to.

Shreya:

And plants, we do have awesome plants at our office. Awesome. We're going to post a few like a few pictures of our office on our Instagram, so go ahead and check that out at some point. But today, we're going to talk about notifications with inbox. So this is the first time we're actually showing inbox in our live streams. So can you tell us a little bit about what that experience looks like?

Shreya:

And then we'll just dive right into this project?

Riley:

Yeah. So really it's you can kind of think of it as like a history of messages that somebody has been sent a similar to like, you know, your Gmail inbox. But we support different actions like read unread archive and really we also support Toast. So if a new message comes in, we do support the ability to pop up a message to say something has happened.

Riley:

As far as unread indicators let you know that there are messages and that can be configured to either show a number or just show a dot. And we have a lot of really cool plans for the future. So stay tuned.

Shreya:

Awesome. We have Maria joining us from YouTube saying “Hi!” Hi, Maria. And we also have FuleSnable joining from Twitch. This is our first time livestreaming on Twitch. So hopefully that experience is good for you guys. Thank you so much Fule. Alright. I'm going to go ahead and share your screen Riley, so if you don't mind just removing the Streamyard part and then we'll go and get started.

Shreya:

And we have Tejas saying “Hello, hello, Where's Blu?” That's the question.

Riley:

Blu bear?! She’ll show up eventually and tell me she's hungry, so.

Shreya:

She'll take her time. She's the real star of the show this week. Alright. Let's go ahead. And so if you've been here in the last few livestreams, you've seen this e-commerce website. That Segment went and made for their demos, and we've been using it for our demos as well. So thank you. Shout out to a Segment and for Ben for sharing this with us.

Shreya:

We are now going to take this to the next step and integrate inbox today. So Riley, do you mind sort of telling us what it takes? Like what changes do we have to make to our code to prepare this project for inbox?

Riley:

There's a couple of things we need to think about when it comes to integrating that. So first thing that we might want to do is jump over to our docs at Courier.com. Check out our inbox section here.

Shreya:

Awesome. Could you use command plus to just zoom in a little bit since streamyard squishes everything and makes it smaller. Awesome. Maybe like a couple more would be great. And while you're doing that Maria said, “Came for blue and stayed for inbox!” and that really is all of us today.

Riley:

So yeah we kind of talk about the inbox and these are some of the things that we had talked about before message list, batch code filters, real time updates and eventing. And what we really want to do is we want to get set with our React components because that's essentially the app here that we have to figure to the app that we have over here is also a React application.

Riley:

So we're going to be using the Courier's React. We do also support kind of framework agnostic component, but we want to focus on our react. So…

Shreya:

Right. So really quickly, sorry for cutting you off. Riley. We have a question that's asking Phil is asking: “What is Courier?”.

Riley:

So Courier is a notifications platform. You can think of it as a notifications as a service. If you have, you know, use functions out of service software as a service, it's essentially giving you access to notification APIs that you can integrate into your system and allow you to kind of get the power of Courier, which is going to be routing design, notification designers, logs, automations, audiences, basically a whole plethora of different things that you would want to do when it comes to building out a notification platform.

Riley:

Note This is specifically for transactional notification and things for like marketing notifications are better suited for things like conversion rate conversion tracking. And those things are not built in as first class systems into Courier. So it's basically I have events in my system like logged in products on sale, product order completed. You have a one on one coming up.

Riley:

Basically just the events that happen in your system and then you want to trigger an email, a text, a inbox message to get sent out. Courier is your one stop shop to get all that stuff done.

Shreya:

Exactly. I really like talking about user engagement from like a developers perspective because you don't really want to spend so much time trying to like send people notification or how to get them use your app. But at the end of the day, when you're building a product, you want people to use that app, right? Like you want people to engage with it, like you're building a solution for something and people will often just download an app and forget that it exists.

Shreya:

So notifications are really valuable way to make sure that people keep coming back to it. But you also don't want to spend like hours and hours over months trying to build your own notification system from scratch. So that's what Courier offers. That's a really great question Fule, thanks for asking and let us know if you have any other follow up questions.

Shreya:

Alright, Riley, go ahead and continue talking about you.

Riley:

You reminded me of one thing. And this is an old CEO that I had who used to talk about it a lot. We used to do e-commerce as a service e-commerce platform and our old CEO used to talk about the difference between core and critical. And usually when you are building something, you're building your core platform. So you're like a, an app that does, you know, like human resources and performance reviews.

Riley:

So your core is going to be keeping people engaged, keeping notes, doing things like that. But the critical part of that is going to be notifying people of different things that are happening at your core, your critical and you should never give away your core, but you can definitely give what you're critical to help you focus on your core.

Riley:

So I like to think of things as what's your core what’s your critical notifications are critical. Might not be your core. They are our core. We have plenty of critical things that we do not build ourselves that we rely on other people for.

Shreya:

I love that I'm actually going to steal that next time I took my Courier.

Riley:

WelI stole it, so I feel like. So here we're at our documentation of Courier how to get started, and we'll see that with Courier. We have two components we really want to focus on. Maybe probably three here, but for now, where we want to think about, we have our our Courier provider, which is going to basically be the component that holds all of our state and then gives us access to our APIs.

Riley:

And then we have our inbox, which is going to be the UI that is related to all of the inbox, different things like that. So these are the two components that we need. So for an inbox, so basically we'll have a script here and we will basically add our provider so we can come over here. This is our our eCommerce Segment demo site you can see here and then we will yarn and Courier provider.

Shreya:

You might need to you might need to zoom into the code as well.

Speaker 1

I did.

Shreya:

Yeah.

Speaker 1

A little bit less. Just more.

Shreya:

Yeah. I think the monitor just like shrinks everything up of importance.

Riley:

So I usually don't use the monitor.

Speaker 1

Yeah.

Riley:

Okay. So you tell a provider and then we install the inbox and installing the Courier inbox and stuff is really, really easy. And so what we want to do here is after we've done this, we probably need to talk about… Let's look at the Courier provider. The Courier provider, as we can see here, has one to has two properties that we need to pass into it.

Riley:

And you'll see here, if we talk about authentication, we have a bunch of different authentication things here to help you basically lock in the authorization to your inbox when you first get started. We don't have any auth to help people get started, so we're going to be focusing on building with no auth. Later, we can talk about building into JSON web tokens to really scope the ability for people to grab exactly only what they need.

Riley:

So if we're looking here at the Courier provider, make sure you've installed the Courier provider in your workspace. So if we jump over here.

Shreya:

I have a real quick question about the auth part of it. If you decide not to use auth and you have like a production ready app that's being used by like 100 people, what does that mean? What's going to happen?

Riley:

So everything will work fine. The problem that you will see is that if somebody knows somebody else's username they could go request messages from a different user, which is why we really encourage you to lock down your auth before going to production. And that's kind of what our guide over here is talk about authentication. And we do say before going production you should implement stricter authentication as described below.

Riley:

So that's where JSON web tokens because they say that, hey, only give me access to this user ID and this user ID, can only read messages and write events and that's what you really want to be doing when you go to production, especially if you're sending potentially sensitive information to users. You don't want that stuff to leak, but to get up and running, we we do allow it to be wide open.

Shreya:

Yeah. I imagine like if you have shipping updates or something and then someone's able to just like grab the location of your order. Yeah.

Riley:

Okay. So here this is a Courier provider. Courier channel. This basically allows sending to inboxes and toast notifications. So we can go here and click add this saves it and then what we want here, if we're going back to the Courier provider, is that we want the client key. So the client key is the public facing key and can be found over here.

Riley:

So this is a public key. This basically identifies your workspace. So we will copy. Well, since we've installed it, let's actually copy. Let's get these guys want these two. If we're looking at our app over here, I'm thinking that we want to put our inbox over here by the cart or maybe over here…Let's put over here by the cart.

Riley:

So to find the cart, I think it is in the header over here actually lets close this. So we're over here in the header. We'll see that here is our cart and we'll put it right next to it. So if we plop our Courier provider and our Courier inbox in here it should be as simple as grabbing this. So doing that.

Riley:

So grab our client key here. Plop that guy over here.

Riley:

Plop that guy.

Riley:

Over here.

Speaker 1

And.

Riley:

User ID, I think that the user ID for this example is CourierTest maybe?

Shreya:

So your user ID would be the way that you've added your users within Courier. Actually Riley, do you mind showing the user's page in the Courier workspace just so that… Yeah.

Riley:

So here we have.

Shreya:

You might need to zoom into this page a little bit as well.

Shreya:

Thank you.

Riley:

Is it zoom by tab? Is that what it is?

Shreya:

It might be, yeah.

Riley:

Okay. Yeah. So we have basically the userID that you pass into the Courier provider has to match with a user in our system. You know, you don't technically need to have a user in our system, but the user that you're sending to has to match here or else obviously this just identifies who we're delivering it to. And then obviously the Courier user ID will be your user ID in your system.

Riley:

We do not create user IDs at all. We just rely on the same user that you have and also do not use emails as your user ID because people change their emails or a lot of systems allow changing an email and that would make things very confusing for you if you created a user with your email and they changed it later.

Shreya:

Yeah, I think the example at the bottom is really good where it's just like a bunch of numbers and other characters.

Riley:

Okay, so now we added a Courier provider. So this user ID is most likely going to come from an API call. I don't think that this example application has authentication built into it. So we have this hardcoded and this should also be an environment variable as well because we do also support the concepts of test environment.

Riley:

So if you did have a staging environment for your eCommerce store, you could use our… We have a test key as well. So if you jump over here, let's see that there's a test key down here that you can also use to interact with. So…

Shreya:

Oh real quick. I think Sujas mentioned that we have a client SDK to allow updating user profiles. Now, Sujas, if you're still online, do you mind sharing the link to that SDK just so everyone else can check that out? Thank you so much.

Riley:

Awesome we are in dev.

Speaker 1

Okay.

Riley:

We know in dev. I you think that this inbox is going to be on top of the cart, so we might have to flex it. Yeah. So that's on top.

Shreya:

It's not the prettiest, but it's there. The inbox looks gorgeous though. I love how simplistic it is compared to what we had before, also if you guys don't know, we just launched a new version of Inbox this week and we'll share the links to our launch blog post. If you want to know more about what's different this time in the chat.

Riley:

Let’s see here… 3 point?

Shreya:

Oh, did something go wrong?

Riley:

Yeah, I'm trying to figure out… There’s a rendered message there, I think that… I was playing around with custom rendering the inbox stuff…

Riley:

Let's just try.

Shreya:

Fule Snable said “Isomorphic unfetch.” That name makes my mind go blank. I don't even know what that means. So, same. Riley? Do you know what that means?

Riley:

I don't know what unfetch means.

Shreya:

Okay, I'll try to google it, but I don't think I'm going to understand it anyway.

Riley:

Is there are like a weird caching that is happening here? Let me see here. I was thinking maybe I need to do a yarn build...

Shreya:

And for context, we were using this project to prepare for the live stream. So it might have some of the changes that we tried to build before. So we're just going to try to rebuild it and make sure that the website isn't getting confused. Is the 3.0.1 version the most current version that people should be using right now?

Riley:

Yeah, I'm confused about.

Shreya:

Alright, worst case, if this doesn't work, we can try to maybe reclone the original website. That's always my go to move.

Riley:

This is the same version here. So yeah.

Shreya:

That's what it should look like… For some reason…

Riley:

Yeah, I don't know if there is some cash on this Node.js app that is doing something funky. Okay. So we have…

Shreya:

You got it. Okay, sweet.

Riley:

So let's clean those up. Now we have our inbox over here and we are back here, so we want to basically put these on top of each other. So let's just add flex and then let's give this a little box to put it around.

Riley:

And then class name is equal to p-2. And then I think.

Riley:

That's just putting some padding around it, kind of making it look prettier.

Riley:

And cool and maybe…

Riley:

Padding right…. Four.

Riley: \ We have our inbox over here.

Shreya:

Oh, that looks so much better. Nice.

Riley:

Okay, so now what we want to do is we need to come up with some different ideas of what we can send to the inbox. And we were kind of brainstorming some different ideas. And I think one cool thing might be an order completed, order tracking, different things like that. So what we want to do is we want to maybe look here and we already have Segment

Riley:

Io demo. So we have Segment events getting sent through Segment into Courier and we've already configured Courier to get the Segment events. And that is as simple as going over to Segment and then popping in your right key here. Obviously, we're not going do that on stream. As we did it earlier.

Shreya:

Yeah. And if you're not sure how to do this part, we have a whole livestream from a couple of weeks ago that has Segment in it's title that's dedicated to it. But yeah, go ahead.

Riley:

Yeah, so what we can do here is we can search for analytics.track and we can basically find a whole bunch of different events that are getting sent. And I think that what we wanted to do is start with something simple: order completed. So here we can say whenever we have an order completed event, we'll just send a message to the inbox saying, Hey, your order is complete and maybe give them a link to that order so that if they come back to the site later, they don't have to click through a whole bunch of different things and then they'll have an inbox for their order completed.

Shreya:

I like that.

Riley:

So let's go over to… Well, first what we can do is we can basically go and let's open up a console over here, zoom in to that one as well, because everything needs to be zoomed separately.

Riley:

And then go shopping. Okay.

Shreya:

Let's go shopping!

Speaker 1

Let's add these shoes and

Riley:

then let's go to checkout and then let's check out as a guest and um… Riley@supercoolmail.com.

Shreya:

And keep in mind that this is just a demo website, so the actual checkout functionality doesn't work.

Riley:

What I want to do here is verify that we're actually getting the network call to Segment is what I want to do here. Pay $20 and here we should be able to see the letter T somewhere… T?

Shreya:

Is that T for track?

Riley:

Yeah.

Shreya:

Got it.

Riley:

Let’s go over to Courier

Riley:

And see if we're getting it over here. So let's refresh this.

Riley:

Courier will also have the list of the events here.

Riley:

And we will see product views as like…

Shreya:

So these are events from yesterday, which means it's definitely not loading in just yet.

Riley:

Oh I need to put the key because I reset my release and I had the key. Can you take the thing off so I can put it in.

Shreya:

Oh yes. Okay, cool. You are good to go.

Riley:

I can’t believe I forgot to do the um…

Riley:

Live streams are fun.

Shreya:

Livestreams are fun. Oh.

Riley:

Oh. You put it in the in the Zoom chat yesterday. Will you send it to me again in Slack?

Shreya:

Yeah. I send it to you again and again for context. It's because this is my Segment account. So I'm going to go…

Riley:

Actually, I was able to command Z that file. We're good to go.

Shreya:

You got it. Okay. Sweet.

Riley:

Yes, You just heard me again. Okay, so let's try that again and then let's go back over to our check out success. And if I refresh this page. Cool. So now we see that T, we have our order complete here and here.

Shreya:

It is the right key within Courier, right? What did you do? Okay, great.

Riley:

And then here we will see that we have product viewed.

Riley:

Take a second to show up here.

Riley:

Oh, okay. Here it…

Shreya:

These are the ones from yesterday, right?

Riley:

So it keeps these linked automations on top.

Shreya:

Got it. But it's still from 51 minutes ago, so.

Riley:

Yeah so definitely did send it if we're looking here, but it's not necessarily showing up in our lists.

Shreya:

I wonder if my destination is enabled. Is this the same workspace and the same Courier API key that we had yesterday?

Riley:

Yeah.

Shreya:

Okay.

Riley:

So let's just try to doing a viewed product and we should get a T, product viewed. Let’s go look over here.

Shreya:

Oh, are we using a test environment? Suhas is asking. “No, it's production.”

Speaker 1

So.

Riley:

It might be the fact that they are linked to an automation already on order.

Shreya:

Could you do me a favor and just send the Courier API key? I just want to do a quick sanity check and make sure that I have the same…

Riley:

It's in my VS code. Hold on.

Shreya:

Okay, I've removed your screen. Not that it matters. We can rotate these keys after the stream as well.

Riley:

It's just fine.

Shreya:

Perfect. Thank you.

Riley:

Oh, well, I've learned that.

Shreya:

Oh, yeah. I have a different API key. I'm not sure why. So I’m gonna go ahead and update my API key, which is within Segment. So when you add Courier as a destination in Segment, it'll ask for a Courier API key. And that's what I had wrong. Not sure why, but yeah, let's maybe reload and try to add some more events.

Riley:

Yeah, to the prime view again.

Riley:

And then let's go to.. Is my screen shared?

Shreya:

Yeah, yeah, yeah.

Riley:

Let's see here.

Shreya:

Hmmm.. Still not working okay.

Riley:

Product viewed…

Shreya:

It always gets me how these things work perfectly fine like a half an hour before a live stream. And during the event, they just break.

Riley:

It might have something to do with

Riley:

Like, this product views on the one that we're doing. And I did have an automation linked to it, and then I deleted the automation. So it might be having an issue with that.

Riley:

So let me.

Riley:

Do something over here real quick.

Shreya:

Since you're doing that, I don't know if people can tell, but my camera looks super lopsided and I don't know how to fix it because my tripods broken. And so now it just sort of always looks like everything's going to start rolling down a hill in my room. That was just a very random side note that no one needed.

Riley:

It’s possible that this like this not refreshing and it might be because these are deleted automations. Unclear. Let's just try to fire one off and see if it works. So if we go to

Riley:

Automation designer, let's create a new one and let's just do the Segment as our source. And we said order completed and then we want to send and we will send to rest.data.userID

Speaker 1

And let's actually create a template. So let's go to

Riley:

Designer, create notification.

Riley:

And do order completed.

Riley:

Actually should I use AI to do it? Because that would be cool.

Shreya:

Sure, yeah.

Riley:

Yeah, it's actually going to create something way bigger than we want for here. Right. Cool. So this is for email. We want to add a push channel here and then here we can do order

Riley:

Completed. And then from here we have a lot of different blocks you can choose from. So we want you… Just grab the second block. So we are pleased to inform you that… order ID… I think it’s going to be…

Shreya:

Yeah. So the AI just sort of generates variables based off what it thinks you might need. In our case, we don't need to share an order ID do we? Oh you are gonna share, alright.

Riley:

So we can do that and then we can go back to our automation and then let's just refresh this guy so that we have the lift, and order completed. Then let’s publish this.

Riley:

And then see what happens. And one thing that we're going to have to do is make sure that we identify our user correctly. So we have a user ID.

Riley:

And we can do that inside of our…

Shreya:

And this is important because we want to make sure that Segment and Courier are viewing the user as the same person. Right?

Riley:

Yeah. So the issue here is that if we if we were to go look at the order completed event here, the event that we're sending here doesn't have a user ID, Right. And the question is, is do you want to send a user ID with every single order completed or do you want to say, Hey, you know what, I identified the user before this happened and let me attach all of that data into the event and then Segment associates the event and the order.

Riley:

So it's kind of like a fancy thing to say, Hey, all the events that happen after I do this identify associate with this user instead of having to say every event identifies the user separately.

Shreya:

Makes sense.

Riley:

Yeah. So this will make sure that we have our Courier test as a user idea and then we will and it will do it basically whenever the page renders, which will kind of help us out there and then we will have our order completed. So let's go and try and see if this will fire out. So let's add these cool shoes.

Riley:

Let's check out on our page.

Riley:

Riley.mail.com….

Riley:

Checkouts have completed, order completed. Okay. And then what we can do is we can go and back over to Courier.

Riley:

Let's just look at our logs and see.

Riley:

931. So it looks

Riley:

like the event did not come through.

Shreya:

I think we're going to have to figure out what's wrong with Segment before we….

Riley:

Yeah, okay. So Segment does not seem to be wanting to work correctly right now.

Riley:

So go back to channels.

Riley:

The problem here is that our Segment key... It’s funny that it was working yesterday.

Shreya:

I just grabbed the Segment key from… I think I might have the wrong Segment key again. So I'm going to try to save this again….

Riley:

But where are you saving it to?

Shreya:

Within Segment sorry the API Courier API key. I just went into the workspace that you're in and I got it from the API keys page and it looks different than the one that we had before, so I’ve reenabled it. Do you mind trying one more time and just like clicking on the local app really quick?

Riley:

Order completed cool.

Shreya:

Oh sweet. No, that's still… That's from yesterday.

Riley:

No right here.

Shreya:

Oh, you got the notification. Okay, sweet.

Riley:

Order completed. Alright, cool. So, yeah, so it was just API key problem there. And of course, now we have our order completed. So now I want to do something a little bit cooler than that, and I want to use more of Courier to kind of show off how cool Courier could be. And the things that I have been thinking about is basically sending somebody a message that a product is on sale.

Riley:

And if we kind of do that, what we could do is we can look at our different track events that we have and we have product clicked, added, removed. I think I want to do product viewed. Basically say, Hey, if I view a product and then maybe I can then send everybody who's viewed that a notification says, Hey, this product is on sale, their inbox so we can feed off of the product viewed event and we can go into Courier and say.. Let's just make.

Riley:

Sure we call this order and let's.

Riley:

Go to our automations, create one. And call this product conversion. And we want Segment, we want to do product viewed that we want to, instead of sending we're going to do is we're going to update a profile and what profiles going to do is basically to say, hey, you view this product or we're going to save it to your profile, which is basically kind of a data bag for each user.

Riley:

And this is also going to be refs.data.userID. Here we want to add edit some dates on and then… Syntax here. Product…

Riley:

Text here is a little fun.

Shreya:

I like how it's just like auto populating above, like the last few profile object that you just added. It just showed up in the fields above. Sorry, keep going.

Riley:

The syntax here I need to….

Shreya:

Okay. Yeah.

Riley:

$ref, not refs. $ref, and then here we can just do data.properties. I think that’s what we want to do here.

Riley:

This properties is going to be the matching product that gets sent here. So so this second argument to track is going to be the properties and then we're going to basically say last vieewd product.

Shreya:

So $ref is how Courier gets access to data from Segment.

Riley:

Yeah it's basically saying, “Hey go into your data bag and then use that reference to apply it to last viewed product”.

Shreya:

Got it.

Riley:

I think that's a way to explain that. Okay. So now if we view product in here, we should be able to go ahead and click on these cool leopard sandals, see a track here product viewed. This is the properties that we should have potentially access to. And let's go and look at our automation logs and see if we… Where’s 1037? Cool.

Riley:

This was our update profile log. And then if we go over to users and we click on a user, we should be able to view last viewed product code. Here's my last viewed product. And then from here, what we can do is… So now we have data and a user, and we have an intent, like an impression.

Riley:

Now let's say that the category of women or let's say maybe the brand of Fila's on sale, right? So what we want to do here is we can go back to our users, we can create an audience. I would say that Fila lovers, right? Print audience. And then based on the audience, we can basically parse through of the different profiles in a workspace and basically create a dynamic list of users.

Riley:

So here we will say “Other” and then we just keep the tab open so I can see my users data here.

Riley:

Which is last viewed product.brand. Add condition other last viewed product.brand, next is Fila.

Riley:

Click on audience there. Fila or Filas?.

Shreya:

I think it's just Fila? Yeah.

Riley:

Okay, cool. So, so it's on one user. Right now we have an audience that is all people who like Fila, and we could basically anybody else who has that condition and views that product that will be part of that audience now. So now what we want to do is we want to send them a message and say, “Hey, Fila products are on sale”.

Riley:

I don't necessarily know how to trigger thing, but you can imagine this product goes on sale. There's an event in your system that updates product and then you can basically send an event to Courier either through Segment or mainly calling it. But for what we're going to do for this one, just to get things done is we are going to

Riley:

use our Quick Send API. So we'll go over to Miner and then here we can make a quick send. And this quick send is really cool because it’s a one off, I don't want to make a template for this. I just wanna to quickly go, “Hey, people who are online right now, there's Fila’s on sale!”

Riley:

Fila’s on sale and go woo! Search Fila Lovers....

Shreya:

This is also really exciting because it's the first time we're showing both audiences and quicksand on live stream so.

Riley:

And inbox right??

Shreya:

And inbox. That's true. Yeah that's a lot of firsts!

Riley:

So we're showing you a lot of different Courier things here, and it's showing kind of the potential of what notification as a service can do for your workflow. So routing here, we can send to our push channel, make sure we add our provider is Courier and save that. Then lets hit send and see if we get a message.

Riley:

Oh, wait, hold on a second. What I didn't do… What I didn't do…

Shreya:

Well we got the message.

Riley:

We got the message, BUT I wanted to show off toast. So if that toast didn’t pop up. We wanted toast to pop up. An easy way to add toast is just to come over here and…

Riley:

Add toast? Ghost? Ghost toast.

Shreya:

Ghost.

Riley:

It’ll be good I promise. And we simply just add it under our provider. And then it is smart enough to listen to all the messages that come through and resolve. What can't you resolve? I never installed toast.

Shreya:

Yeah. I was going to ask if we've installed it yet. If you follow our docs, I think it tells you to do all of this at the same time. So all of the code and everything will be placed together on there. And then Rilley's written out the docs that you can sort of see the Courier provider, the Courier inbox and information about the toast issue separately as well.

Riley:

Yeah. And then separate because we know ithat some people like to use toast and some people don't. So we don't want to bloat somebody's app that doesn't want to use a toast. So kind of keep them separate. Okay, So now we are back over here and we have our inbox. These are cool cause I can mark this as read,

Riley:

I can archive this, do a bunch of cool stuff.

Shreya:

I love the smiley face when you have no more notifications.

Riley:

You know? Shout out to Vahagn. Okay, so let's try that again. Let's go over and lets

Riley:

Send it again.

Riley:

Cool Fila’s on sale and then

Riley:

If you want to you can also add a link,

Speaker 1

So add a button and you know “go now” . You are all there and I'm going to send

Riley:

again. Well actually let's do it for… We're on a different page.

Riley:

Send it one more time. Don't do this to your users though. Now I can click on it and it will let me over there. So it's kind of a cool way to send messages and basically be able to notify people relatively easily. If you look at our integration here, our integration, like if we look at our code changes here, really we added the inbox just with what, three or four lines of code.

Riley:

And then here we had to fix our identify just we had to basically do our to identify. Identify wasn't happening. Usually when you have a Segment every time a user logs in or logs out, you want to call an identify. In this case, we don't have a log in or log out. So we just identify the user on every single render and that is really all we had to do.

Riley:

And then on the Courier side, just to kind of review everything, we had to install a Courier provider, we had to install Segment, we had to add our Segment key here and we had to add our Segment key inside of Segment. And then we were able to see a list of the different events coming through which verify that Segment was actually sending us the data.

Riley:

After we were able to verify that we were getting the right events from Segment, we were able to go and create an automation first called Order Completed. Just to test out how this is working. We could also do some different things like, you know, add a delay step, which might be kind of cool to connect these two guys together and then basically say, Hey, maybe after, you know, 10 minutes, you're like, “Hey here's a coupon code, come buy some more stuff.” Right?

Riley:

And you could think about doing something like that.

Shreya:

Yeah, I like that sort of like build out this whole customer experience just with notifications.

Riley:

Refs.data… UserID. Then this would be something like designer and then say “New Coupon Code.”

Riley:

Add Courier to that and then say we are excited with new coupon code.

Riley:

And then from there we could.

Riley:

Publish that. And then.

Riley.

When our automations we could… New coupon code.

Riley:

And then basically be able to say, Hey, after everybody completes an order, maybe this will have a condition instead and say.

Riley?

I think that we have the ability to add a condition somewhere, right?

Shreya:

I don’t think I’ve played with conditions here before, but…

Riley:

You could…

Riley:

Add a condition up here and say you know data.profile you know can be completed is equal to one.

Riley:

So we only assigned to the first person after they've created an order and everybody else gets ignored. So there’s a lot of different ways that you can kind of control the flow and create different workflows for your user there.

Riley:

Just kind of showing off a bunch of different cool parts of Courier and trying to connect all of the dots, which I think this kind of shows the real power of Courier.

Shreya:

Awesome. I'm going to remove your screen from the screen. Thank you so much. Riley, that was really great. I love seeing inbox in action. I think it's grown so much in the last year and has become ridiculously easy to use and just like install in like 5 minutes and be ready to go with like a full notification inbox and toast.

Shreya:

So thank you so much for working hard on this and demoing it to us today. Is there anything else that you want to share or anything you want to talk about?

Riley:

Where’s Blu? Blu bear?!

Shreya:

Blu, we got to get blu on screen. That's the only way people are going to be interested in this.

Riley:

She was over here for a second then… I don’t know.

Shreya:

And then we need to like, hire Blu to join all of our live streams.

Riley:

Yeah. That's it.

Shreya:

Awesome. Thank you so much. Charla said: “Blu bear?!” . So adorable. Actually, here's a question. How do you spell Blu? Because there's like five ways that I’ve seen.

Riley:

I use B L U.

Shreya:

Okay, I spelled it wrong I spelled it with an e.

Riley:

I spell it wrong a lot of the time too.

Shreya:

I love that.

Shreya:

Awesome. Thank you so much, Riley. Thanks Charla for managing our comments and everything and thanks everyone for joining us. Thank you for your Fuel Schnabel for joining us and Suhas for checking us out as well and Maria for saying hello and Tejas as well for saying hello. I'm sad there's not as many people today, so I'm going to hound around people to join next time.

Shreya:

But Alright. Hope you guys can watch this recording. Ooh. Also, if you're curious about preferences, we have a livestream from last week that talks all about user preferences and you can sort of like pair inbox and preferences together if you want to make sure that users are able to really customize the notification experience for what they want.

Shreya:

And then next week we're going to be talking about Slack and Microsoft teams notifications. So we'll see you there.