Browser notifications are critical for any modern application that delivers messages to its users. Browser notifications are a way for websites to alert users about updates, such as new messages. The notifications are shown whenever the browser window is opened, which allows users to evaluate the notification and respond appropriately. Pop-up messages you get on e-commerce websites about ongoing offers are an example of browser notifications. Some of the use cases for browser notifications include relaying useful information to users, increasing user engagement and retention, retaining users, sending targeted communication, and converting users.
Configuring notifications properly can often be challenging. Considering the sheer number of notification types, it's not just a question of how to implement them but also where best to place them. When thinking about notifications and their placement on a website, it's important to consider which type will be most informative for your visitors.
Implementing browser notifications in Gatsby from scratch can be quite challenging as you have to be familiar with WebSockets for full-duplex communication channels over a single TCP connection, the notification API that enables websites to show push notifications to the user, the push API, and service workers. However, despite the complexities, you can easily implement browser notifications in Gatsby with Courier's React SDK.
This article will teach you how to implement Courier in-app notifications in your Gatsby-powered website, focusing on Inbox and Toast components.
Courier's In-App Notifications
Courier provides an intelligent notification architecture that allows you to keep users up to speed with key activities, proactively notify them when their action is required, ensure deliverability and visibility of user alerts, and send dynamic and customized notification digests. Courier Push is a provider offered by Courier that uses a WebSocket to deliver notifications to your web frontend. The notifications are displayed via Courier Inbox and Courier Toast components. These notifications can also be displayed on a custom component.
How Does Courier's In-App Notifications Work?
Courier's in-app notifications process can be simplified into these steps:
- Your application emits an event that can be sent to Courier via an SDK or API.
- The event is received and processed by Courier. This event can contain data about the notification content and the recipient.
- Courier generates a notification template and sends it to the appropriate provider(s).
- The provider(s) sends the notification to the end users.
Implementing Browser Notifications with Courier
This section explains the steps you need to follow to implement in-app browser notifications in your Gatsby-powered website. You will need these prerequisites to follow along:
- Node.js and Yarn installed on your machine
- Gatsby CLI installed globally on your machine
Create and Set Up a Courier Account
Click here to create a Courier account. You can sign up with Google or GitHub or by email. After signing up, fill in your first name, last name, and workspace name and click Continue.
Deselect Email, select Push, and click Continue.
Select Node.js as your stack, and you will be navigated to the dashboard.
Navigate to the Courier Push Provider page, scroll down, and click the Save button.
Creating a Notifications Template
Navigate to the Notifications List Page and click Create Notification.
On the Designer page, click Create Notification.
On the next page, select Push as the notification channel.
Under Channels, click Push to navigate to the notification template design page.
Provide a title for your notification template and add a text block and an action button. You should end up with something like this:
Click on the Publish Changes button to save the template.
Creating a Gatsby App
Next, you're going to create a Gatsby app using a starter site. Paste the following command in the terminal and execute it to create a "hello world" app:
1
gatsby new gatsby-push https://github.com/gatsbyjs/gatsby-starter-hello-worldNext, paste and execute the following commands in your terminal to ensure the installation worked successfully:
1
2
3
cd gatsby-push
gatsby developCreate the file src/components/Layout.js, which will act as a top-level component and a general layout file, and paste in the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import '../styles/global.css'
function Layout({children}) {
return (
<div>
<nav>
<h1>My Website</h1>
</nav>
{children}
</div>
)
}
export default LayoutCreate the file src/styles/global.css, which will be used to apply basic styling to the web app, and paste the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
*{
margin: 0;
padding: 0;
}
body{
max-width: 600px;
margin: 20px auto;
}
p{
padding: 10px 3px;
}Open src/pages/index.js and replace the existing code with the following to create some lorem ipsum text content:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react"
import Layout from '../components/Layout'
export default function Home() {
return (
<div>
<Layout>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor animi unde laboriosam tenetur sit voluptate ullam architecto quia, minima, saepe rem? Aliquid aut perferendis blanditiis repellat fugiat veritatis! Ad ea commodi beatae sed, voluptate maiores impedit ullam id deserunt assumenda enim expedita ducimus! Repudiandae quas quae expedita animi necessitatibus odio.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor animi unde laboriosam tenetur sit voluptate ullam architecto quia, minima, saepe rem? Aliquid aut perferendis blanditiis repellat fugiat veritatis! Ad ea commodi beatae sed, voluptate maiores impedit ullam id deserunt assumenda enim expedita ducimus! Repudiandae quas quae expedita animi necessitatibus odio.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor animi unde laboriosam tenetur sit voluptate ullam architecto quia, minima, saepe rem? Aliquid aut perferendis blanditiis repellat fugiat veritatis! Ad ea commodi beatae sed, voluptate maiores impedit ullam id deserunt assumenda enim expedita ducimus! Repudiandae quas quae expedita animi necessitatibus odio.</p>
</Layout>
</div>
)
}Installing Courier SDK
All the components provided by Courier require CourierProvider, which handles authentication and backend integration. Paste and execute the following command in the terminal to install CourierProvider:
1
yarn add @trycourier/react-providerCourierProvider is used at the top-level component, as shown in the code snippet below.
The following code snippet is only intended to illustrate how CourierProvider is used. Do not copy it to your project.
1
2
3
4
5
6
7
8
9
10
11
12
13
import { CourierProvider } from "@trycourier/react-provider";
import { Toast } from "@trycourier/react-toast";
import { Inbox } from "@trycourier/react-inbox";
const MyApp = ({ children }) => {
return (
<CourierProvider clientKey={CLIENT_KEY} userId={USER_ID}>
<Toast />
<Inbox />
{children}
</CourierProvider>
);
};You can access the clientKey form the Courier Push integration page and the userId from the users page. The userID uniquely identifies a user.
Implement Courier In-App Notifications
This section focuses on integrating the Toast and Inbox components that Courier provides. These two components can be added anywhere in the code as long as they are children of the CourierProvider.
Toast
Paste and execute the following command in the terminal to add Toast:
1
yarn add @trycourier/react-toastInbox
Inbox should be placed where you want the bell icon to display in your website. Run the following command in your terminal to add the Inbox component:
1
yarn add @trycourier/react-inboxCourier offers various ways to listen to messages and react. Using this tutorial, you will learn how to listen for messages using props.
Open src/components/Layout.js and replace the existing code with the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import '../styles/global.css'
import { CourierProvider } from "@trycourier/react-provider";
import { Toast } from "@trycourier/react-toast";
import { Inbox } from "@trycourier/react-inbox";
function Layout({children}) {
const CLIENT_KEY = "YOUR_CLIENT_KEY"
const USER_ID = "USER_ID"
const handleMessage = (message) => {
console.log(message)
return message
}
return (
<CourierProvider onMessage={handleMessage} clientKey={CLIENT_KEY} userId={USER_ID}>
<nav>
<h1>My Website</h1>
<Toast />
<Inbox />
</nav>
{children}
</CourierProvider>
)
}
export default LayoutRemember to replace the CLIENT_KEY and USER_ID with the values from your Courier dashboard.
Demonstrating the Final Result
Now that you've set up the frontend and the Studio, you can test the integration by sending a Toast. Open the Notifications List and select the first template.
Click the Preview tab and click the Create Test Event button.
Provide a name for the test event and change the data.userName to "Gatsby" or the name of your user. Provide the userId you obtained from the users page in profile.user_id and in profile.courier.channel. Finally, click on Create Test Event.
Note that the userId is very important as it identifies the recipient of the in-app notification. The in-app notification will not be sent if the Send request does not include profile.courier.channel.
On the Send tab, select the test event you just created and click on the Send Test button. Before doing this, ensure your Gatsby app is running by executing the following command in the terminal:
1
gatsby developOn your Gatsby app running on http://localhost:8000/, you will see the following:
Clicking on the notification bell will show the following:
Conclusion
This step-by-step guide demonstrated how to implement notifications in your Gatsby-powered website using Courier. You learned how to set up the Courier studio, create a Gatsby app, and implement Courier's Toast and Inbox components for displaying notifications. You also learned how to listen for messages using props, one of the various methods provided by Courier.
To learn more about Courier, visit the official documentation. The full application demo is available on GitHub.
Author: Kevin Kimani
