Guide

Tutorial

Product News

Courier Updates

User Experience

Product Management

Integrations

Engineering

Live Streaming

Notifications Landscape

Courier

Thomas Schiavone

Jon, one of our sales engineers, got a request during a customer implementation: could we customize Inbox, Courier's in-app messaging product, to look and feel like an email client? A two-pane layout—message list on the left, selected content on the right.

That’s a little different from Courier’s default Inbox UI, which is more of a pop-over notification center. But that’s not a problem. Courier was built to be customized. With our React Hooks SDK, teams can take full control—layout, styling, behavior—without rebuilding core logic from scratch.

Jon could’ve spent a few hours wiring things up. Instead, he tried something faster. He dropped our SDK docs and a short prompt into **ChatGPT**, and 15 minutes later, had a fully working prototype.

This post is about how AI helped solve a real-world implementation challenge—fast—and how Courier makes it easy to build custom in-app messaging experiences.

---

## Courier Inbox: Flexible by Design

Out of the box, Courier Inbox gives teams a clean, brandable notification center they can drop into their app with just a few lines of code. It supports all the essentials—mark as read, archive, unread counts, real-time updates—and looks great with minimal setup.

But not every product wants the same thing. Some teams want a slide-out drawer. Others want a modal. And in this case, the request was for a full two-pane layout that matched the customer’s existing design system.

That’s exactly what our [React Hooks SDK](https://www.courier.com/docs/sdk-libraries/client-sdks/react-sdk) was made for. It gives developers access to the full inbox state and methods—without forcing them to use our UI. You get the power of Courier, and complete control over how it's presented.

---

## Customizing Courier to Meet Your Needs

The request was clear: build an in-app notification inbox that looked and worked like email. Message list on the left, content pane on the right. Something that felt native to their app—not tacked on.

Jon knew Courier’s default UI wouldn’t be the right fit here. But with the Hooks SDK, he had everything he needed: access to messages, preferences, state management, and all the methods—mark as read, unread, archive, delete—already built and tested.

The only thing missing was the UI itself. That’s where **AI** came in.

Instead of manually piecing together a React app from scratch, Jon tried something new. He gave **ChatGPT** a prompt describing the layout, pasted in the Hooks SDK README, and hit enter.

---

## Using ChatGPT to Build a Custom Inbox Fast 

The goal was to get a working prototype that he could hand over to the customer as a starting point. Jon wrote a short prompt:

![ChatGPT+Courier Prompt](//images.ctfassets.net/z7iqk1q8njt4/42dzjwgGbCMQovBtzXxAXI/efd6a207128594c0c6106aa4db03575a/ChatGPT_Courier.png)

Along with that, he pasted in the README from the React Hooks SDK. That was it.

**ChatGPT** responded with step-by-step instructions:
- Set up a new React project
- Install the necessary Courier packages
- Use the inbox hooks to fetch messages and state
- Build a layout with a sidebar list and message content pane
- Add logic for selecting messages and marking them as read
- Deploy to GitHub Pages

The first version worked. In 15 minutes, Jon had a custom inbox UI that looked and behaved the way the customer wanted—backed by live data from Courier.

He made a few small tweaks to clean up the layout, but most of the work was already done. And the code was readable enough that any front-end engineer could pick it up and make it production-ready with minimal effort.

![Email Inbox Prototype](//images.ctfassets.net/z7iqk1q8njt4/6XbrlBSoj6dE0FUJzF2WQ6/224c0c8d9eca44a73c8e065f16e2ab45/Email_Inbox_Prototype.png)

---

## From Proof of Concept to Production-Ready

This wasn’t just a cool experiment with AI—it was a glimpse at how fast teams can move when the right tools are in place.

Courier’s Hooks SDK already exposes everything a developer needs—message state, preferences, real-time events, and inbox methods. With **ChatGPT’s help**, Jon turned that API surface into a functional UI in minutes.

That’s a big unlock for sales engineers. But it’s just as useful for product teams and platform engineers. If you want to:
- Match your app’s UX and brand
- Embed a notification system directly into your layout
- Build features like search, filters, swipe actions, or pinned messages

You don’t have to start from scratch. With Courier and AI, you can move fast, prototype faster, and still keep full control of the user experience.

---

## Brainstorming with AI

After shipping the prototype, Jon asked ChatGPT a follow-up:

> “What are some creative UI applications of these hooks that we might not be thinking of yet?”

It came back with a list of UI ideas for in-app messaging:
- Drag-and-drop notifications
- Swipable cards for mobile
- Persistent side drawers
- Timeline view
- Custom filtering and search
- Dark mode and dynamic theming

None of these ideas required modifying Courier’s backend. The SDK already exposes everything. All you need to do is bring your UI to life—something **AI tools like ChatGPT** are surprisingly good at helping with.

---

## From Docs to Working UI in Minutes with AI

This was a real implementation request. And thanks to Courier and ChatGPT, it turned into a working solution in 15 minutes.

Courier gives you the foundation: powerful SDKs, real-time infrastructure, and control over every part of the notification experience. **AI tools like ChatGPT** help you move faster—turning docs into working code, bridging the gap between idea and implementation.

Jon didn’t write much code. He didn’t need to. Courier handled the backend. ChatGPT handled the boilerplate. All he had to do was tweak the layout and ship the link.

If you're building a custom notification experience—something that fits your app, your users, your brand—Courier makes it easy. And now, with AI in the loop, it’s faster than ever.

---

## Resources

- [Courier React SDK Documentation](https://www.courier.com/docs/sdk-libraries/client-sdks/react-sdk)
- [GitHub – Courier React Hooks](https://github.com/trycourier/courier-react/tree/main/packages/react-hooks)
- [Getting Started with Inbox](https://www.courier.com/docs/inbox/overview/)
- [How to Customize Inbox with React Hooks](https://www.courier.com/docs/platform/inbox/web/react-sdk#react-hooks)

## FAQ: Building Custom In-App Notifications with Courier and ChatGPT

### What is Courier and how does it help with in-app notifications?

Courier is a notification infrastructure platform that lets developers send messages across multiple channels—email, SMS, push, chat, and in-app. With [Courier Inbox](https://www.courier.com/docs/platform/inbox/intro), you can add a notification center to your app in minutes. It works out of the box or can be fully customized using the React Hooks SDK.

---

### Can I build a custom in-app notification UI with Courier?

Yes. Courier’s [React Hooks SDK](https://www.courier.com/docs/sdk-libraries/client-sdks/react-sdk) gives you full control over your notification UI. You can build any layout using your own components and styles, while still taking advantage of Courier’s backend logic—like message delivery, unread states, and user preferences.

---

### How does ChatGPT help with building in-app notifications?

ChatGPT can accelerate development by converting documentation and prompts into working React code. In this case, a sales engineer used ChatGPT to build a two-pane inbox layout using Courier’s SDK. With just a short prompt and a copy of the SDK README, ChatGPT generated a fully functional prototype—including layout, logic, and live data handling.

---

### Is it possible to create a Gmail-style inbox using Courier?

Yes. You can use Courier’s Hooks SDK to build a Gmail-style two-pane layout:
- Messages list on the left  
- Selected message content on the right  
- All backed by Courier’s real-time infrastructure

This layout was built in under 15 minutes using React and ChatGPT.

---

### Do I need a backend to use Courier Inbox?

No. Courier provides the backend infrastructure for notification delivery and state management. The React SDK lets you build fully custom frontends without needing to build or maintain your own backend notification system.

---

### What are the benefits of using Courier and ChatGPT together?

Combining Courier’s developer-friendly SDKs with generative AI tools like ChatGPT allows teams to:
- Rapidly prototype custom notification centers  
- Generate React components using natural language  
- Speed up implementation and reduce boilerplate  
- Deliver working UIs backed by live data in minutes

---

### Can ChatGPT generate production-ready code using Courier?

ChatGPT can generate well-structured, readable React code using Courier’s SDKs—especially when given a good prompt and documentation. While the output is great for prototyping, it should be reviewed and tested before using in production.

---

### What kinds of custom notification UIs can I build with Courier?

Courier supports nearly any notification UI pattern you can think of, including:
- Two-pane layouts (like Gmail or Outlook)  
- Slide-in drawers and side panels  
- Full-screen inboxes with filtering and search  
- Mobile-first designs with swipe actions  
- Timelines, pinning, and priority inboxes  
- Theme-aware dark mode UIs

---

### How long does it take to build a custom notification center?

With Courier and ChatGPT, a working in-app notification center can be built in under **15 minutes**. In the blog example, a sales engineer created a fully functional UI with live data using a single prompt and the React Hooks SDK.

ChatGPT+Courier Header

See how you can use Courier’s React Hooks SDK and ChatGPT to build a custom two-pane in-app messaging UI in just 15 minutes

Build a Custom In-App Inbox in 15 Minutes with Courier and ChatGPT

ChatGPT+Courier Thumb

Build Custom In-App Notifications in 15 Minutes with Courier and ChatGPT

T01NA8E0677-U0390SD03GQ-c33142599c5b-512

Sarah Barber

Push notifications have carved their own niche as a powerful tool for continuous user engagement. Regardless of whether an app is actively in use, they deliver your messages straight to your user's device.

Two useful tools to enhance your push notification strategy are Segment and Courier. In this article, we show you how to set up Courier to listen to your Segment events and then send push notifications to an Android device based on data from these events.

[Segment](https://www.courier.com/blog/smarter-customer-engagement-flows-segment-integration/) is a customer data platform, enabling you to unify your customer data into a single data store, including information on how your users are interacting with a web page or the details of a successful transaction.

Courier is a multi-channel notification platform that goes beyond a simple push implementation. Designed for developers, Courier integrates seamlessly with both mobile and web platforms, providing a toolbox packed with rich notification features suitable for a wide range of use cases. Whether it's a simple task like a password reset or a more intricate multi-touch approval workflow, Courier has you covered.

## Using Segment and Courier together

Segment’s user groupings and event data are particularly useful for transactional push notifications, and will be useful to you if you develop systems like employee collaboration tools or e-commerce stores. Take a look at these examples:

### Collaboration tools

- __Inactivity reminders:__ Notify team members who haven't engaged with the collaboration platform for a while, using a personalized push notification. The message could remind them of their pending tasks, check in with them, or summarize important activities they might have missed.
- __User mentions:__ Trigger an immediate push notification when a user is mentioned in a discussion. The promptness of such notifications could be adjusted based on the user's role or status within the organization.

### E-commerce stores

- __Transaction notifications:__ For instance, when a user completes a purchase in your Shopify store, Segment records the event (provided Shopify is integrated with Segment). Courier, acting as a listener to Segment events, can then send a push notification acknowledging the transaction.
- __Real-time related offers:__ Suppose you're running an online sports goods store. If a customer purchases a significant amount of skiing equipment, you could send push notifications with exclusive offers on ski gear. Conversely, if they buy football gear, notifications would pivot to football-specific deals, ensuring relevance and user interest.
- __Abandoned cart recovery:__ Don't let potential sales slip away. Use Segment and Courier to send reminders about abandoned shopping carts and maybe even offer a small incentive to encourage checkout.

## Prerequisites
To complete this tutorial, you will need the following:

- A free [Firebase](https://firebase.google.com/) account
- A free [Segment](https://segment.com/signup/) account
- A free [Courier](https://app.courier.com/signup) account
- Android Studio installed on your Mac or PC

## Firebase setup

Log-in to the [Firebase console](https://console.firebase.google.com/) and create a new project. Once this project is created, create a new Android app.

Give it the package name `com.example.courierpush` and click __Register App__. Download the `google-services.json` (for later) and click __Next__. Don't worry about the SDK installtion information, just click __Next__ and finally __Continue to Console__.

Finally, in your Project Overview click the "gear" icon and go to your __Project Setting__. Click __Service Accounts__ and, in the "Firebase Admin SDK" section, click __Generate new private key__. This will cause a JSON file to be downloaded, so please hold on to it for the next step.

## Courier setup

If you don’t yet have a Courier account, [create one for free](https://app.courier.com/signup), then navigate to [Users](https://app.courier.com/) and create a user. Give your user an `ID`, and make a note of it, as you will need to use this later in the tutorial.

Technically, no other fields are required for this tutorial, but it makes sense to give your user a name, email address, and phone number as a bare minimum, in case you want to use Courier to send other types of notifications such as email and SMS.

Next, set up a Firebase as a push provider in Courier. In the Courier dashboard go to __Integrations__ → __Integration Catalog__, search for **Firebase** in the list of providers and click on the logo. Paste the contents of the JSON file you downloaded earlier into the "Service Account JSON" field and click __Install Provider__. More details about how to do all this is provided in [Courier’s FCM setup documentation](https://www.courier.com/docs/platform/channels/push/firebase-fcm/).

## Create a push notification template

In the Courier dashboard, go to [Templates](https://app.courier.com/designer/notifications) and click **Create Notification**. Name it “Push notification test” and click **Create Template**. You’ll now be prompted to add your notification channel. Select **Push**, then **Firebase FCM**.

Next, on the left side of your screen, click on your newly-created Push channel, and paste in this for title:

`Congrats {name}, you've got a push notification!`

...and this for content:

```
Courier templates accept variables inside curly braces. In this example, we use the "name" value from the Segment event and to populate the name field above 💡.
```

Finally, click **Publish Changes** to activate your template.

## Create a web page

In order to showcase how data can be sent from your website to Segment, we will need only the most basic web page, with no fancy hosting requirements — you can simply open the file locally in a browser. Create a file called `index.html` with the following content, and load the page in your browser.

```html
<html>
    <head>
    </head>
    <body>
   	 <h1>Courier Segment Tutorial</h1>
   	 <p>Loading this page will send events to Segment 📬</p>
    </body>
</html>
```

## Segment setup

[Sign up for a free Segment account](https://app.segment.com/signup/), if you don’t already have one. Once logged into the app, you’ll need to create a workspace, and then within that workspace, create a link between a “source” and a “destination.” In this example, the source will be your own website and the destination will be Courier, but you can also connect a wide variety of other data sources including Google Ads and Shopify.

### Add a data source 

To add a source, navigate to **Sources** and click **+ Add source**. Select **JavaScript Website** as the source and then click **Add source**. You’ll then see some options to fill in, such as your website URL. However, for this example you’ll be adding your Segment code to a local HTML file, so you can skip these options and click **Add source**. Next, paste the generated JavaScript code snippet inside the `<head>` tag of your website code, to set up the link between your website and Segment.

### Add a destination

To add Courier as the destination, navigate to **Destinations** and click **Add destination**. Search for “Courier” in the catalog search box, and when it appears, click it and then select **Add destination**. Select your website from your list of sources to connect your source to your destination, and click **Next**. Give it a destination name of “Courier Tutorial” and click **Create destination**.

### Connect your source to your destination

In your destination settings, paste in your Courier API key to create the connection between Segment and Courier. Click on the **API Key** section under **Connection Settings** to edit it. Also in your destination settings, there is a toggle that you must toggle on to ensure your destination is enabled.

![Segment Destination settings](//images.ctfassets.net/z7iqk1q8njt4/2KKxGoglYnYHC32zrmRYAG/73bea5d781d4063a3daf183133ebf191/Xnapper-2023-11-17-07.51.55.png)

You can find your Courier API key in the Courier dashboard, under **Settings** → **API keys**. Remember that best practice is to use your test API key for testing purposes and reserve your production API key for production code.

## Send an event to Segment from your website

In your website code, at the bottom of the `<script>` tag, after your pasted function that joins your site with Segment, let's now make two calls to Segment:

### Identify call 

This method tells Segment who is on your website. For our purposes, we will use the ID of the Courier user record you created earlier. Include the following code underneath the call to `analytics.page()`, making sure to replace the placeholder below with the Courier user ID:

```javascript
      analytics.identify('<COURIER_USER_ID>');
```

### Track call

This method allows you to track user actions on your site and store associated data in Segment. For our tutorial, add the following lines of code underneath your `analytics.identify()` call from above, making sure to replace `<NAME>` with the user's name.

```javascript
     analytics.track('Order complete', {
         type: "track",
	   name: "<NAME>",
     });
```

Open your HTML file in a browser, and the two Segment calls will occur on page load. You can verify this has happened by checking the **Debugger** tab of your **Source** in Segment. It should look like this:

![Xnapper-2023-11-16-13.40.58](//images.ctfassets.net/z7iqk1q8njt4/4VuaiO3kFkLFOvr27KsgQK/562aa04c838b86c6f33195fbe76149e3/Xnapper-2023-11-16-13.40.58.png)

### Check your Segment event gets sent to Courier

You can [check](https://segment.com/docs/connections/test-connections/) that Courier received your events by clicking on your **track** event in the same Segment Source **Debugger** tab and clicking **Validate…** Select your Courier destination and click **Next**, which will take you to an event tester area where you can send  a test version of your event. Select **Track** as your event type to generate your example payload and click **Send test event**. If the event is sent successfully, you’ll receive a 202 response.

Now you know that Courier is able to receive your Segment event, you’re ready to set up an automation in Courier to send a push notification whenever this happens.

## Set up Courier to send a push notification when a Segment event fires

You can use Courier [Automations](https://app.courier.com/automations) to send of push notifications based on trigger conditions. In this case, we are going to trigger the sending of a notification when a Segment event happens.

Start by clicking "Automation" in the Courier dashboard and click on "New Automation." Change the name of your automation from the default “Untitled Automation” to a more descriptive title, like “Push notification test automation”.

### Add a trigger to your automation

1. Drag the **Segment** node from the left-hand side of the screen towards the top of the main canvas.
2. Select the Segment event that you have recently created, which should be listed as “Order complete.”

Note: If you did not send a test Segment event you won’t see your Segment event in the list. If that's the case, take a moment to do that now.

### Connect your trigger to an action

You now need to connect your trigger to an action step that sends a push notification.

- Under "Actions" on the left-hand side of the page, drag the **Send** node onto the canvas, below the "Segment" trigger.
- These steps should now be connected to each other by a line.
- In the "Send" node, select your push notification template as the notification that will be sent.
- Now click **Advanced** on your "Send" node and enter `refs.data.userId` for the user ID and for the data object. This ensures that these values will be populated from the data that Courier receives from Segment, meaning that each time an event is called from your site, if your code sends a different user ID each time, the message can be sent to different users. 
- Also in **Advanced**, look for the "Data" section and click **Edit**. Add a field, give the "Field Name" the value of `name` and set the value to `refs.data.properties.name`. Doing this ensures that the `name` variable in your notification template will be populated by the relevant user's name each time, via the Segment event data.
- Finally, click **Publish changes** to save the automation.

## Integrate Courier into an Android app

In order to receive a push notification you are going to need an app. If you want to get started quickly, you can download and build our [Android push notification test app](https://github.com/trycourier/tutorial-android-push-notifs). After you clone the repo, make sure to copy the `google-services.json` that you downloaded earlier when you created your Firebase project into the `app/src` directory in your Android project.

If you're building an app from scratch or want to integrate Courier into an existing app, check out this step-by-step tutorial: [Mastering Android Push Notifications: A Guide Using Courier’s SDK](https://www.courier.com/blog/android-sdk-push-notifications-using-courier/). 

Assuming you’ve downloaded our GitHub repo, you will need to follow the steps in the [README](https://github.com/trycourier/tutorial-android-push-notifs) to build your Android app send a push notification. 

## Send a Segment event and watch it trigger a push notification on your phone

Reload your `index.html` page to trigger another Segment event to be sent to Courier. This will now trigger your automation, which will cause your push notification to be sent to your Android phone!

![Android push notification screenshot](//images.ctfassets.net/z7iqk1q8njt4/10dC30PLcvQpWvtvmTGkvV/cf5ee51aee32499deae47e3116100693/Screenshot_20231117_231759_One_UI_Home.jpg)

### Troubleshooting tips

* The [Courier logs](https://app.courier.com/logs/messages) can provide useful information if a notification has failed.
* Ensure your Firebase service account JSON used in step 1 comes from the same Firebase project that you’re using.
* Ensure you have the correct version of `google-services.json` inside your Android project.
* Ensure your app is permitted to receive notifications.
* The `userId` in your Android app (that you use to sign in to Courier) must match the user ID in the `analytics.identify()` call inside your `index.html` file.
* Ensure the name of the event at the top of your automation in Courier matches the name of the event you are triggering from your application. 

## Wrapping Up

In this tutorial you have learned how to trigger a push notification based on a Segment event. You can now use these principles to set up real Segment events in your applications and use them to trigger push notifications using Courier automations and the Courier SDK in your Android app code.

If you want to see more use cases of how Segment events can trigger notifications, you can watch this [video of Courier and Segment developers](https://www.youtube.com/watch?v=pi3nUY1rFdM) working through this integration together.

It’s worth noting that if you’re using RudderStack instead of Segment, Courier also has a [RudderStack integration](https://www.courier.com/blog/customer-data-insights-and-analytics-rudderstack/) that works in a very similar way. Or, if you want your push notifications to be triggered by a time schedule, you can do all this in the automations designer.

Linking Segment events with your push notifications is a real game changer, so it’s definitely worth giving this a try. You can [sign up to Courier](https://app.courier.com/signup) and try our free tier with 10,000 free messages, or [get in touch](https://www.courier.com/request-demo/) if you want to find out more.

Courier makes it easy to send SMS, email, push and in-app notifications with a single API call. We have a REST API, client SDKs and Docs that you'll love 💜

Create Your Free Developer Account

Send push notifications with Segment and Courier header

Flow diagram showing how Segment and Courier work together to send a push notification. It starts with some application code that calls a function  sendCompletedOrderDetailsToSegment, which links to Segment, which then links to Courier, which further links to an Android device with a push notification on its screen.

We explain how to set up automatic push notifications to Android devices based on the data from Segment events, using Courier’s notification platform. 

How to Set Up Automatic Push Notifications Based on Segment Events

How to set up automatic push notifications based on Segment events thumbnail

Martina Caccamo avatar

Martina Caccamo

Have you downloaded Courier's iOS SDK yet? It's the easiest and most effective way to communicate with your users using push notifications.

Get the Courier iOS SDK

image1

This tutorial explains how to send Firebase notifications to iOS devices from your iOS application code using Firebase FCM and Courier’s iOS SDK.

How to Send Firebase Notifications to iOS Devices Using Courier

image14

Courier Live Thumbnail

The Courier Team

When you need to send important alerts from your web or mobile app, text messages via SMS can be very useful, especially for time-sensitive notifications, e.g. to quickly warn users about things like possible fraud or payment issues. It can also be helpful to pair SMS notifications with other types of messages, such as email, Slack messages, or push notifications. This allows you to take a more layered approach to your notifications, adding notification logic that considers whether a user has read your earlier SMS attempts before deciding to notify them on these other channels.

While there are excellent SMS APIs like Twilio and MessageBird that let you send an SMS with a few lines of code, these services don't handle all the complexities of an automated SMS that will require an SMS notification system like [Courier](https://www.courier.com/).

You will need to add extra logic around your notifications if you want to:

- Send the message to additional channels like a push notification or in-app message.
- Trigger your notifications based on a schedule, a product event or collection of events.
- Integrate notifications with your Customer Data Platform or Reverse ETL.
- Send a sequence of notifications based on certain conditions
- Accommodate user communication preferences (which channels they want to be notified by, and how often)
- Include data from third party systems in your notifications
- Implement automatic failover between SMS providers, if one goes down. Or between channels if the SMS isn’t read.

Without an SMS notification system to help you manage this work, you’ll be left developing and maintaining all this logic yourself.

This article shows how to use the Courier SMS notification system to easily send basic SMS notifications, as well as how to add automation logic around your notifications and read user preferences to avoid bombarding them with an excess of messages.
<a id="components"></a>
## Components of an SMS notification system

SMS notification systems provide a powerful set of features that extend far beyond SMS delivery. Here are some of the capabilities supported by Courier, which may be useful if you’re building a product requirements document **(or developing against one) for product notifications.

- **Multiple channels:** Offers a wide range of notification channels, such as email, push, Slack, MS Teams and an in-app notification inbox.
- **User preferences:** Your users can decide how often and by which channels (e.g. SMS, email, Slack etc.) they wish to be communicated with, and Courier will automatically honor these preferences.
- **Integration with other software:** Has deep integrations with adjacent systems in your stack (like Customer Data Platforms, for example).
- **Delivery tracking and retry mechanisms**: Ensures reliable message delivery.
- **Monitoring and logging:** Provide comprehensive monitoring and logging for debugging delivery issues, in a way that looks at SMS in the context of other channels.
- **Delivery options**: Gives you the flexibility to trigger messages in a way that aligns with your use case: including api-driven, event-driven, or one-time send.
- **Cross channel synching:** Sync delivery status across channels, so when a user opens an email, the related inbox message can automatically be marked as read.
- **Channel/provider failover:** Easily failover between SMS providers (e.g. from Twilio to MessageBird) or between channels (e.g. from SMS to Email or Slack) if a notification has failed.
- **Testing capabilities:** Provides easy ways for you to test that your notifications have been sent properly.
- **Integration with your coding language**: Offers SDKs for most languages. It’s easy to integrate Courier with both front-end and back-end code for web, as well as mobile application code for Android and iOS.
- **Scalability**: Can handle increased message volume as your application grows.
- **Advanced send logic**: Features such as [throttling](https://www.courier.com/docs/platform/automations/throttle/) and [send limits](https://www.courier.com/blog/notification-send-rate-limits/) to prevent overrun of messages that have both cost and user experience implications.
- **Internationalization:** Allows you to automatically select different message templates and timing restrictions for different regions.
- **Template design and management** - can you design and manage templates for all your notifications in one place?

<a id="sendsms"></a>
## Send with SMS using an SMS notification system

In this example, we will use Courier, with Twilio as the SMS provider. We’ll build automated SMS notifications into a Node.js application. Although we are using Node.js, there are a number of [quick start guides for other languages](https://www.courier.com/docs/guides/getting-started/python/) available.

<a id="setup_twilio"></a>

### Step 1: Set up Twilio
Twilio offers a free trial with no credit card required, so we will use Twilio as our example SMS service provider. Start by [signing up to Twilio](https://www.twilio.com/try-twilio). Once you have signed up, you will be directed to the [Twilio console](https://console.twilio.com/), where there is a basic tutorial for creating a new phone number for your Twilio messages. Once you have done this, continue with the tutorial and run the command to send yourself a test SMS, just to check that Twilio is working correctly.

Next, scroll down the Twilio console homepage to find your Twilio account SID, auth token, and phone number — which you will need to use Twilio with Courier.

![Screenshot of the Twilio SMS notification system showing how to find the account SID, auth token, and phone number.](//images.ctfassets.net/z7iqk1q8njt4/6B3wKIpXvq6JsYCDwTpXxd/fb9c1376fe58642bd2717936501f3c48/sms-notification-system-1.png)

<a id="integrate_twilio"></a>
### Step 2: Integrate Twilio with Courier using the web UI

[Sign up to Courier](https://app.courier.com/signup) and add Twilio as a [channel](https://app.courier.com/), by selecting **Twilio** under **configured providers**. Now, enter your Twilio account SID, auth token, and phone number that you previously found in the Twilio console, and click the **Save** button.

![Screenshot showing how to input the Twilio details into Courier.](//images.ctfassets.net/z7iqk1q8njt4/7ccZq0SqHMOn8YkVHxwEbh/c21716d69df27adc59e32cf00f88042c/sms-notification-system-2.png)

<a id="create_template"></a>
### Step 3: Create your SMS notification template

We will be using an e-commerce package delivery notification for our example. Navigate to **Designer → [Create Template](https://app.courier.com/designer/notifications)** and name your template “Package delivery*.*” You will now be prompted to say which channel you want to use for sending your message. Select **SMS** and select **Twilio** as your SMS provider in the drop-down box.

Next, click on **SMS** under **Channels** to begin writing your notification for the SMS channel. Either use the AI-powered content generator or enter this text into the notification designer:

`“Your package with reference {packageRef} is estimated for delivery between {startTimeHours}: {startTimeMins} and {endTimeHours}:{endTimeMins} today. Not going to be in? {rescheduleOrSafePlaceUrl}” and then click “Publish changes”.`

![How to create an SMS notification template in Courier.](//images.ctfassets.net/z7iqk1q8njt4/1pdDHqtHoDRXCW1vOeBbyZ/2a1bf9241521ecfde358ef6b540df012/sms-notification-system-3.gif)

<a id="install_node"></a>
### Step 4: Install the Courier Node.js SDK

- Create a directory for your Node code called package-notification and enter this directory.
- Make sure you have the [latest version of Node.js](https://nodejs.org/en/download/) and [npm](https://www.npmjs.com/package/npm) installed.
- Install the [Courier Node.js SDK](https://www.npmjs.com/package/@trycourier/courier) package via npm:

<a id="send_sms"></a>
### Step 5: Send SMS using Node.js

Now you are going to write some code that will send an SMS notification to your phone from your Node.js code, using Courier (with Twilio as the SMS provider).

Inside your package-notification directory, create a file called package.js and add the following code:

```javascript
const { CourierClient } = require("@trycourier/courier");
const courier = CourierClient({ authorizationToken: "<AUTH_TOKEN>" });

const packageRef = "<PACKAGE_REFERENCE>";
const startTimeHours = "<START_TIME_HOURS>";
const startTimeMins = "<START_TIME_MINS>";
const endTimeHours = "<END_TIME_HOURS>";
const endTimeMins = "<END_TIME_MINS>";
const rescheduleOrSafePlaceUrl = "<RESCHEDULE_OR_SAFE_PLACE_URL>";

const { requestId } = courier.send({
  message: {
	to: {
  	data: {
    	    packageRef : packageRef,
          startTimeHours : startTimeHours,
          startTimeMins : startTimeMins,
          endTimeHours : endTimeHours,
          endTimeMins : endTimeMins,
          rescheduleOrSafePlaceUrl : rescheduleOrSafePlaceUrl
  	},
  	phone_number: "<PHONE_NUMBER>",
	},
	template: "<NOTIFICATION_TEMPLATE_ID>",
	routing: {
  	    method: "single",
  	    channels: ["sms"],
	},
  },
});
```

- Replace all the template variables like `packageRef` with your own values. Note: the time-based variables such as `startTimeHours` should each contain two digits, as they use military time.
- Replace `<AUTH_TOKEN>` with your  [Courier API key](https://app.courier.com/settings/api-keys).
- Replace `<PHONE_NUMBER>` with your own phone number, so you can test that the SMS sends correctly.
- Replace `<NOTIFICATION_TEMPLATE_ID>` with the ID of the template you just created. This can be found by going to your template in the Courier app and navigating to the notification settings:

![Using Node.js code to send an SMS notification in Courier.](//images.ctfassets.net/z7iqk1q8njt4/2JSccoAPnLf2eQBIVvxa6u/97816c2b6a8d476c2b58200ac64f28ef/sms-notification-system-4.gif)

When you run your code, it will send an SMS:

![An example SMS about an expected package delivery.](//images.ctfassets.net/z7iqk1q8njt4/3pAxNikoC3r5MXdjvKhx5B/547cfbc804c5d9030f5c34e445884621/sms-notification-system-5.png)

As you can see, it’s pretty simple to send an SMS using Courier. It's worth noting that Courier offers multiple notification channels — so you can use the same notification platform for communicating via email, Slack, MS Teams, push notifications, and more. For example, the user may have wanted this parcel notification as both a mobile push notification and an SMS.

<a id="logic"></a>
## Using Courier automations to simplify complex SMS logic

Courier automations allows you to abstract complex SMS (or multi-channel) notification workflows into a no-code designer in the Courier web UI, which can then be invoked via Courier’s [Automations API](https://www.courier.com/docs/reference/automation/). Workflows are easily created as templates via drag-and-drop components. These templates contain all the logic needed for a notification sequence. It consists of a trigger and a number of actions. Once you’ve created the template, you can later run an automation from it.

Some examples of automation templates that can be created in the automation designer include:

- Send an SMS on a time-based schedule — for example, send an SMS 10 days before Black Friday to notify customers of an impending sale.
- Send an SMS that is triggered by an event in your customer data platform (Courier accepts Segment and RudderStack events as triggers, meaning you don’t need to integrate their APIs into your code).
- Branching logic: sending one SMS if one condition is met, and a different one if it’s not — for example, if a new user signs up to a gym, they could be sent different workout suggestions based on age.
- Applying throttles to your SMS messages to avoid notification fatigue — if an automation template involves sending multiple notifications, a throttle can be added to place a limit on the number of SMS messages that can be sent.

In this tutorial, we will create an automation template that causes an order confirmation SMS to be sent when an [“order completed”](https://segment.com/docs/connections/spec/ecommerce/v2/#order-completed) event occurs in [Segment](https://segment.com/), the Customer Data Platform from Twilio. We will use Courier’s [Segment integration](https://www.courier.com/blog/smarter-customer-engagement-flows-segment-integration/) to achieve this.

<a id="create_template"></a>
### Step 1: Create a notification template in Courier

Navigate to [Designer](https://app.courier.com/designer/notifications) and click **Create Template**. Name your template “Order confirmation.”  Select **SMS** as the notification channel and choose Twilio as a provider from the drop-down box.

Now, click the **SMS** channel on the left to add your message content to your template. Add the following text to the notification designer, then click **Publish changes**.

`“Your recent order of {productName} (#{orderNumber}) has been completed. We hope you enjoyed your purchase and thank you for shopping with us.”`

<a id="create_automation"></a>
### Step 2: Create your automation in Courier

Navigate to the [automations designer](https://app.courier.com/automations) and click **New Automation**. Rename your automation from “Untitled Automation” to “Order Confirmation.”

![Creating an automation in Courier.](//images.ctfassets.net/z7iqk1q8njt4/3DCKGMGnCKbojBn0lY7TAm/d85efae462f09daaa8a6a02e530e4f8c/sms-notification-system-6.gif)

Start with a trigger for your automation. For this example, we will choose a Segment event as the trigger. Drag the Segment trigger onto the automation designer canvas. You will need to select a particular Segment event within this. In this example, we will use an e-commerce Segment event called “[order completed](https://segment.com/docs/connections/spec/ecommerce/v2/#order-completed).”

Next, add a **Send** action to your automation and fill in the following information in this node:

- **“To” field:** Enter `refs.data.user_id` as the user.
- **Select a template:** Choose your **Order confirmation** template from the drop-down box.

![Adding a Send action to the automation in Courier.](//images.ctfassets.net/z7iqk1q8njt4/4NDyUrKEff4dgbsqfju4Gs/7310b9560d6a11991a0ac0fa4e024a74/sms-notification-system-7.png)

To [use Segment dynamic data](https://www.courier.com/docs/automations/dynamic/) in the variables of your notification template, click on **Advanced** in the **Send** node, and enter the following in the **data** field:

`{`
`"productName": "data.products.name"`
`---`

![Adding Segment dynamic data to the automation in Courier.](//images.ctfassets.net/z7iqk1q8njt4/52OAlxa4TIKxRAN43CeBJR/4e263a41a1176ec8c98cd17ff4b72213/sms-notification-system-8.gif)

Finally, click **Publish changes**.

When an order gets marked as completed in Segment, this will invoke the automation, and cause your SMS to be sent. You can also test your automation template by invoking it yourself: click the **Invoke** button at the top of your automation template to find a cURL command that you can run to check your automation is working properly.

<a id="conclusion"></a>
## Conclusion

We have covered why you need an SMS notification system and how to automatically trigger an SMS using Courier with Twilio.

You can get started immediately using Courier’s free tier and Twilio’s free trial. Courier allows you to [integrate with many of the big SMS notification providers](https://www.courier.com/integrations/), which means that you don’t have to decide right away which provider to use. If you’ve been working along with this coding example and have decided you want to use Courier to send more notifications, you can [sign up today](https://app.courier.com/signup) or [contact us](https://www.courier.com/request-demo/) to discuss your specific use case.

Courier is a notification service that centralizes all of your templates and messaging channels in one place which increases visibility and reduces engineering time. 

Start Routing Notifications Today!

sms notification system header

This article explains why you need an automated SMS notification system, with an example using Courier to send an automated SMS with Twilio.

How to Create an Automated SMS Notification System

sms notification system thumbnail

Adam Searle

If you’re a developer building a web or mobile application, you know that there are times when you want to message your users when they’re in the app. It might be information about a new feature, a billing update, or something that requires action from the user. That’s where in-app notifications via an inbox come in. They allow you to deliver key messages directly to your users and can be combined with other notification methods like push and email.

Courier is a development platform for notifications that also offers in-app notification inbox SDKs for web and mobile apps. The Inbox is not only feature rich, but is also integrated with Courier’s full platform, offering complete notification infrastructure and features to help you build the exact notification experience you need, across channels.  

This article explores how to use the [React SDK](https://www.courier.com/docs/platform/inbox/web/react-sdk/) (Courier also offers a [JavaScript SDK](https://www.courier.com/docs/platform/inbox/web/javascript-sdk/) for non-React web apps) and Android SDK to implement versatile in-app notifications for both web and Android applications. Note that Courier also offers an [iOS SDK](https://www.courier.com/docs/platform/inbox/mobile/ios-sdk/), not discussed in this article. Here’s an example of using the iOS SDK with Next.js to build [an Instagram clone… for puppies](https://www.courier.com/blog/introducing-puppygram-powered-by-courier-inbox-next-js-and-inngest/). 

## Overcoming in-app notification challenges with Courier

Designing, implementing, and maintaining an effective in-app notification system can be a challenging endeavor, particularly for small teams. The traditional approach calls for significant time and resources, requiring intricate coordination between front-end and back-end elements. This complexity escalates when you add the necessity of personalized targeting, adherence to user preferences, integration with push notifications, sequencing of read status across other platforms and channels, a user-friendly UI, and so on. 

Enter Courier, a robust tool designed to streamline the in-app notification process. The tedious task of crafting an intuitive notification interface that’s full featured and aligns with your application’s aesthetics is simplified with Courier’s ready-made, customizable UI.

Additionally, Courier addresses the hurdle of setting up servers and databases to handle notification data, along with the back-end logic, by managing all the back-end processes. It removes the need for you to navigate the intricacies of back-end programming and complex server setups.

In terms of synchronizing the front-end and back-end systems, Courier’s APIs facilitate seamless communication, negating the requirement of creating and implementing intricate APIs yourself. Also, integrating user authentication to manage personalized notifications based on user preferences becomes effortless with Courier.

Finally, ensuring compatibility and synchronizing read status across multiple platforms like [web](https://github.com/trycourier/courier-react-inbox), [Android](https://github.com/trycourier/courier-android), and [iOS](https://github.com/trycourier/courier-ios) is no longer a headache, as Courier coordinates the backend and offers libraries for each platform. This lets you provide a consistent notification experience to all users, regardless of which platform they use.

So, with that said, let’s see just how simple it is to get started with Courier.

## In-app notifications for web applications

In this example we’ll look at how to implement an in-app notifications inbox for a web app using the [React SDK](https://www.courier.com/docs/inbox/web/react-sdk/#inbox) and we’ll combine that with an implementation of [toast notifications](https://en.wikipedia.org/wiki/Pop-up_notification), which are small, non-disruptive messages that appear temporarily and disappear after a certain period. Clicking on the toast can take someone directly to a message in the inbox. This way, in-app notifications don't rely on the bell icon alone to alert a user that a new notification is waiting. 

### Signup for Courier

First things first, you’ll need a Courier account. You can [sign up here](https://app.courier.com/signup).

Don’t worry, everything you’re about to use it’s completely free to try. In fact you can send up to 10,000 notifications per month for free. 

### Install and import the required packages

Start by installing the Courier React Provider and Toast packages.

```javascript
npm install @trycourier/react-provider @trycourier/react-toast @trycourier/react-inbox
```

Once you’ve installed these packages, import them into your React component if you already have one; otherwise, you can use the basic React example below.

```javascript
import { CourierProvider } from "@trycourier/react-provider";
import { Toast } from "@trycourier/react-toast";
import { Inbox } from "@trycourier/react-inbox";
```

### Example app

First, build a [basic “hello world” React app](https://www.geeksforgeeks.org/build-a-basic-react-app-that-display-hello-world/).

If you haven’t already, then run:

```javascript
npm install @trycourier/react-provider @trycourier/react-toast @trycourier/react-inbox
```

Next, replace the content of your `index.js` with the following:

```javascript
import ReactDOM from 'react-dom/client';
import { CourierProvider } from "@trycourier/react-provider";
import { Toast } from "@trycourier/react-toast";
import { Inbox } from "@trycourier/react-inbox";

function InboxToast() {
return (

<h1>Example of the Courier Toast and Inbox in action</h1>
<CourierProvider userId="example_userId" clientKey="your_client_key_goes_here">
<Toast />
<Inbox />
</CourierProvider>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InboxToast />);
```

Remember that `CourierProvider` provides the context that all Courier components need to function, so you must wrap your root component with it:

```javascript
<CourierProvider userId="user-id" clientKey="client-key">
  <YourApp />
</CourierProvider>
```

Replace `user-id` and `client-key` with the appropriate values for your application.

From the project root directory, run the following command to start the app.

```javascript
npm start
```

The Inbox component will be visible straight away as a bell icon. Clicking this will initially show you an empty inbox until you start sending it messages. The toast component is invisible unless you’re receiving a notification.

![An example toast notification inbox](//images.ctfassets.net/z7iqk1q8njt4/1pnTKgomC1JTy8ABA9pg8r/66d38ed824f9a1b55db43d180675ca35/in-app_notifications_1.png)

That’s all there is to it! You’ve set up an in-app notification inbox plus toasts for your web application using the Courier Inbox SDK. 

### Send a notification to verify that your inbox and toast are working

The fastest way to test this is to send a request to the Courier API using cURL.

Send a request to the Courier API using cURL:

```javascript
curl --request POST \
--url https://api.courier.com/send \
--header 'Authorization: Bearer <YOUR_API_KEY>' \
--header 'Content-Type: application/json' \
--data '{
	"message": {
  		"to": {
    		"user_id":"<YOUR_COURIER_USER_ID>",
    		"courier":{
      			"channel":"<YOUR_CHANNEL>"
    		}
  		},
  		"content": {
    		"title":"Push up!",
    		"body":"Hi {{name}}, just testing that the notification displays as a toast."
  		},
  		"routing": {
    		"method":"single",
    		"channels":["inbox"]
  		},
  		"data": {
    		"name":"<YOUR_NAME>"
  		}
	}
}'
```

Replace `<YOUR_API_KEY>` with [your Courier API key](https://app.courier.com/settings/api-keys), both instances of `<YOUR_COURIER_USER_ID>` with [your Courier user ID](https://app.courier.com/), and `<YOUR_NAME>` with your name.

Et voilà! Your toast notification will appear! 

![Your toast notification](//images.ctfassets.net/z7iqk1q8njt4/h4eB7dx50KHnhaB57imY4/a9989554ca117c80af584d68820c4258/in-app_notifications_2.png)

And you should see your notification in your inbox when you click on the bell icon:

![Viewing the content of the Courier toast notification inbox](//images.ctfassets.net/z7iqk1q8njt4/W3qfzwIStmLsocLWAQFA4/7ffe2c25bfb5b93657616952ec6f56c0/in-app_notifications_3.png)

*Make sure you have your React app open when sending the request, as toast notifications don’t hang around for long.*

To see an example in action that we built, check out this [full working demo](https://www.reactinappnotification.com/) with both toasts and an inbox.

Next, let’s take a look at the Courier in-app inbox for Android.

## In-app notifications inbox for Android

The Courier Android Inbox SDK provides a ready-to-use, customizable notification center for your Android app. It includes an extensive set of properties and functions that enable you to create and manage your in-app notifications.

### 1. Set up your Android environment

Ensure that you have a compatible Android development environment. This guide assumes you’re using Android Studio. Create a new Android application project if you don’t already have one set up.

### 2. Include the Courier Android SDK

To use the Courier Inbox, you need to include the Courier Android SDK in your project. Open the `build.gradle` file of your Android application and add the dependency:

```javascript
implementation 'com.courier:android:1.0.0'
```

Don’t forget to synchronize the project to ensure the library is downloaded and added to your project correctly.

### 3. Configure Courier Provider

You will need to set up a Courier Inbox Provider in the Courier app, to link your Courier Inbox to the SDK. Follow the instructions in the Courier [documentation](https://www.courier.com/docs/inbox/authentication/) to create and configure your Provider.

### 4. Set up authentication

Courier’s Android SDK requires authentication to ensure secure access to the user’s inbox messages and push notifications. We will cover that here, but you can also look at the [GitHub docs](https://github.com/trycourier/courier-android/blob/master/Docs/Authentication.md#usage).

The SDK manages user credentials across app sessions, meaning that even if the user fully closes and restarts your app, they’ll remain signed in. The key features that require authentication are Courier Inbox, which requires it to view inbox messages that belong to a user, and push notifications, which require it to synchronize push notification device tokens with the current user and Courier.

To handle authentication, place the following code where you usually manage your user’s state:

```javascript
lifecycleScope.launch {
    // Saves credentials locally and accesses the Courier API with them
    // Uploads push notification device tokens to Courier if needed
    Courier.shared.signIn(
        accessToken = <YOUR_API_KEY>,
        clientKey = <YOUR_CLIENT_KEY>,
        userId = <YOUR_COURIER_USER_ID>
    )
    // Removes the locally saved credentials
    // Deletes the user's push notification device tokens in Courier if needed
    Courier.shared.signOut()
}
```

The `accessToken` is [your Courier API key](https://app.courier.com/settings/api-keys), which you need to authenticate requests to the Courier API. You’ll need the `clientKey` to get Courier Inbox messages for the current user. The `userId` is the ID of the user you want to read and write to. Replace `&lt;YOUR_API_KEY>`, `&lt;YOUR_CLIENT_KEY>`, and `&lt;YOUR_COURIER_USER_ID>` with your own values.

For more information on how to get production ready, check out Courier’s [docs on tokens](https://www.courier.com/docs/reference/auth/issue-token/).

Now that you’ve completed these steps, your application is set up to securely manage user credentials and access Courier services.

### 5. Create the inbox view

Define the `CourierInbox` view in your activity’s layout XML file:

```javascript
<com.courier.android.inbox.CourierInbox
        android:id="@+id/courierInbox"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
```

### 6. Initialize and customize the inbox

In your activity file, find the `CourierInbox` view and configure it as needed. This is where you can set various listeners and customize the appearance of your inbox. Below is a sample implementation using the default inbox style:

```javascript
val inbox: CourierInbox = view.findViewById(R.id.courierInbox)

inbox.setOnClickMessageListener { message, index ->
    Courier.log(message.toString())
    if (message.isRead) message.markAsRead() else message.markAsUnread()
}

inbox.setOnClickActionListener { action, message, index ->
    Courier.log(action.toString())
}
```

Remember, the Courier Inbox is highly customizable, allowing you to create an in-app notification center that matches your application’s look and feel. For more detailed documentation, refer to the [GitHub page](https://github.com/trycourier/courier-android/blob/master/Docs/Inbox.md).

### 7. Test your inbox

You can test this exactly the same way as we suggested you test your inbox in your React app:

Send a request to the Courier API using cURL:

```javascript
curl --request POST \
--url https://api.courier.com/send \
--header 'Authorization: Bearer <YOUR_API_KEY>' \
--header 'Content-Type: application/json' \
--data '{
	"message": {
  		"to": {
    		"user_id":"<YOUR_COURIER_USER_ID>",
    		"courier":{
      			"channel":"<YOUR_CHANNEL>"
    		}
  		},
  		"content": {
    		"title":"Push up!",
    		"body":"Hi {{name}}, just testing that the push notification displays as a toast."
  		},
  		"routing": {
    		"method":"single",
    		"channels":["inbox"]
  		},
  		"data": {
    		"name":"<YOUR_NAME>"
  		}
	}
}'
```

Replace `<YOUR_API_KEY>` with [your Courier API key](https://app.courier.com/settings/api-keys), both instances of `<YOUR_COURIER_USER_ID>` with [your Courier user ID](https://app.courier.com/), and <YOUR_NAME>` with your name.

You should now be able to see your message in your inbox in your Android app.

## Conclusion

Implementing a robust, intuitive, and seamless in-app notification system is crucial to enhance user engagement and improve the overall user experience. As we’ve demonstrated, it’s simple to effectively manage the complexities of building such a system with Courier, a comprehensive solution that takes care of the heavy lifting, letting developers focus on creating more value in their applications.

From an easy-to-integrate web application using React toast notifications to a full-fledged Android and iOS in-app notification center, Courier provides all the tools and services you may need. It offers scalable solutions that meet both simple and complex requirements, making it an ideal choice for individual developers and small teams, as well as larger enterprises.

 [Try it out](https://app.courier.com/signup) for yourself, and experience the difference!

In-App Notification Inbox for Web & Mobile header

In-app notifications are important for increasing user engagement. Here’s how a developer can implement them in web and Android applications using Courier.

Building In-App Notifications for Web and Mobile Applications

In-App Notification Inbox for Web & Mobile thumbnail

We have SDKs in Ruby, Go, Python, Javascript, Node.js, and React.  

Get started sending notifications with Courier in minutes, not days!

Animation showing how to add text to an email template in Courier and choose Gmail as your notification provider.

This tutorial for PHP developers explains the different ways to send scheduled and recurring email notifications in Courier, including a low-code solution.

Sending Scheduled and Recurring Email Notifications with PHP

Samar Barakat 

I absolutely ADORE a good todo app. Todo apps can be invaluable for improving productivity by helping you stay organized and manage tasks effectively. They are the ultimate solution for decluttering the mind and ensuring nothing slips through the cracks.

One of the biggest struggles I faced with other productivity tools was their complexity and lack of user-friendliness. Instead of actually getting things done, I found myself getting lost in confusing interfaces and tangled features. It was incredibly frustrating and counterproductive. That’s why I was determined to create a todo app that prioritized simplicity and intuitive functionality. I envisioned a clean and minimalistic app that allowed me to effortlessly add tasks, organize them according to my own logic, and easily mark them as complete. This newfound simplicity has truly revolutionized my productivity routine and made task management a breeze.

But I didn’t stop there — I wanted to take my sense of accomplishment to the next level. Introducing the Courier Cheerleading Catalyst! This feature adds a delightful touch of motivation by sending cheerful notifications to encourage users as they complete their tasks. Celebrating small victories is crucial for maintaining momentum, and these notifications play a pivotal role in reinforcing a sense of accomplishment and progress. With visual and auditory cues acting as rewards, completing tasks becomes even more rewarding, boosting our motivation and fueling our productive streak.

**To bring these cheerful notifications to life, we need three key components:**
1. **An app:** in our case, a task tracker
2. **Segment:** a tool to track events, such as the completion of a task
3. **Courier:** a tool that sends notifications based on those events

By combining these three essential components, we can create an exceptional todo app experience that not only keeps us organized but also incorporates motivation and celebration. So let’s get started and embrace the power of cheerful notifications to supercharge our productivity!

_I invite you to visit the[ GitHub repo](https://github.com/samkitkat/todo-app) for this app to see all the code. If you find the repository helpful or inspiring, don’t forget to show your support by giving it a star! Your star would be greatly appreciated and would motivate me to continue improving the app and sharing more useful resources in the future. Thank you in advance for your support!_

### **Step 1: Add Courier as a destination in Segment**

Create a Segment account and workspace, and then follow the steps below:

1. Go to the **Sources** tab and click on the source you want to add Courier to.
2. Click **Add Destination** and then search for **Courier**.
3. Now you can click **Configure Courier** and add your destination name.
4. To finish the setup process, you will need [your Courier API key](https://app.courier.com/channels/segment)<span style="text-decoration:underline;">.</span>

Now that Courier is connected to Segment, you will be able to see all events that Segment is tracking though the Courier app!

_[Step-by-step instructions for configuring Segment](https://www.courier.com/docs/external-integrations/segment/segment-integration/)_

## **✨ Coding time ✨**
### **Step 2: Import Segment analytical tracking**

For this step, I closely followed the[ Quickstart: Analytics.js](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/) tutorial in the Segment docs, which demonstrate two different ways to add the necessary analytic tracking code.

    **1:** You can paste the code snippet provided into the `<head>` tag of your site, or
    **2:** Add Segment to your project as an NPM package: `npm install @segment/snippet`

![cheerleading catalyst image 1](//images.ctfassets.net/z7iqk1q8njt4/3yk2oYVlWa8f7taTuQ4lzU/d4269d74cb649fb36fb1331811c1cfd9/cheerleading_catalyst_image_1.png)

Segment offers a wide range of events that you can keep track of. In my case, I wanted to use Segment’s analytics tracking capabilities to monitor when I finish my todos. To achieve this, I created a special function that checks if all my todos are completed.

```
const allCompleted = todos.every(todo => todo.status);

function allTodoDone() {
analytics.track("todos completed");
}

return (
	<div>
		.
		.
		.
		<div>{allCompleted ? allTodoDone() : null}</div>
	</div>
)
```
This function helps me see if I’ve finished everything on my list or if there’s still work left to do. It’s a simple yet effective way to keep tabs on my progress and make sure I stay on top of my tasks.

_Note:_

![cheerleading catalyst image 2](//images.ctfassets.net/z7iqk1q8njt4/5Wltiwl4Kh5wQTehM1xwjS/a314f63ee3c21609233e48f016b8ced1/cheerleading_catalyst_image_2.png)

_Please be aware that if you have any ad-blocking extensions enabled, they might interfere with the events Segment is tracking. As a result, the tracked events may not be sent through and won't be visible in the logs. Consequently, notifications based on these events will not be sent either._

### **Step 3: Import Courier’s Inbox and Toast notifications**

Oooh — the fun part! It’s time to add the Inbox and Toast functionalities. It was incredibly simple to incorporate them into my project. I found all the necessary information in [this section of the docs](https://www.courier.com/docs/platform/inbox/intro).

All you need to do is enter the following commands:

1. `npm i @trycourier/react-provider`
2. `npm i @trycourier/react-inbox`
3. `npm i @trycourier/react-toast`

Once you’ve completed these steps, you’ll have a cute little “🔔” icon wherever you choose to place it. This icon will serve as your inbox, hosting all your incoming notifications!

```
import { CourierProvider } from "@trycourier/react-provider";
import { Inbox } from "@trycourier/react-inbox";
import { Toast, useToast } from "@trycourier/react-toast";

return (
		.
		.
		.
		<CourierProvider userId={USER_ID} clientKey={CLIENT_KEY}>
        <Inbox />
        <Toast />
     </CourierProvider>
)
```

### **Step 4: Put it all together!**

Now you have a fully functional app that sends all your chosen tracking events to a centralized location! However, one final step remains: creating the automations to bring those wonderful notifications to life.

First, navigate to the **Designer** section within your Courier app. Here, you can design how you want your notifications to look and what message they should convey. Once you have finalized the design, proceed to the **Automations** tab.

Here, you will set up the triggers for your notifications. Choose **Segment** as the trigger, and specify the name of the event you previously tracked. Next, add the Courier user ID to determine who will receive the notification. From the dropdown menu, select the notification you designed earlier.

**And just like that, voila!**

![cheerleading catalyst image 3](//images.ctfassets.net/z7iqk1q8njt4/196uGvJ7sAU1jJ5aig1wWg/03c9cbb388fc01515e3bc6d75d58d271/cheerleading_catalyst_image_3.png)

You’ve finished setting up the automation, and your carefully crafted notification will be sent to the intended recipient.

Exploring how Courier collaborates with Segment to send notifications was an incredibly enjoyable learning experience for me. If you’re interested in delving further into the code or experimenting with the app, feel free to visit the [GitHub repo](https://github.com/samkitkat/todo-app) and [Todo App](https://todo-app-samkitkat.vercel.app/). Please note that this project is still a work in progress, so be sure to stay tuned for future updates and enhancements!


samar-blog-header

Learn how Samar took her simple todo app to the next level by incorporating Courier to send cheerful and encouraging notifications. 

Build your first notification in minutes

Build your first notification in minutes

Platform

Use Cases

Explore

Company