Platform
Docs
Solutions
ContactLog In

How-To Implement Notifications in Your Gatsby-Powered Website

  • What is Courier
  • Implementation Guide
  • Conclusion

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:

  1. Your application emits an event that can be sent to Courier via an SDK or API.
  2. The event is received and processed by Courier. This event can contain data about the notification content and the recipient.
  3. Courier generates a notification template and sends it to the appropriate provider(s).
  4. 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:

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.

Gatsby Push Notifications Dashboard

Deselect Email, select Push, and click Continue.

Gatsby - Select Push Notifications Channel

Select Node.js as your stack, and you will be navigated to the dashboard.

Gatsby Notifications Select SDK

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.

Gatsby Push Notifications List

On the Designer page, click Create Notification.

Gatsby Push Notifications Designer

On the next page, select Push as the notification channel.

Gatsby Select Push Notification Channels

Under Channels, click Push to navigate to the notification template design page.

Gatsby Push Notification Channels

Provide a title for your notification template and add a text block and an action button. You should end up with something like this:

Gatsby Push Notification Template

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-world

Next, paste and execute the following commands in your terminal to ensure the installation worked successfully:

1 2 3 cd gatsby-push gatsby develop

Create 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 Layout

Create 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-provider

CourierProvider 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-toast

Inbox

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-inbox

Courier 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 Layout

Remember 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.

Gatsby Final Notification Template

Click the Preview tab and click the Create Test Event button.

Gatsby Notification Preview

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.

Gatsby Test Notification

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 develop

On your Gatsby app running on http://localhost:8000/, you will see the following:

Gatsby In-App notification

Clicking on the notification bell will show the following:

Gatsby Notification Inbox

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

View More Guides

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Email & push notification

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Email & push notification

Platform

Users

Content

Channels

Sending

Workflows

Preferences

Inbox

Workspaces

Observability

API Status

Changelog

© 2024 Courier. All rights reserved.