Govuk-notifications NPM

GOV.UK prototype kit notifications plugin

When working on a prototype for a service recently, we had a requirement to test SMS messages and emails being sent to the user as part of the user journey. To test this within the bounds of the GOV.UK Prototype Kit I created phone and notifications in overlays in CSS to simulate the receipt of these messages.

Example of phone and email notifications

Overview

There are currently two notifications available govukNotificationsPhone and govukNotificationsEmail and I plan to add more with greater flexibility later. The email notification also adapts to Mac and Windows, and I'm planning to add iOS/Android support soon.

SMS overlay	Email overlay (Mac)	Email overlay (Windows)

Installation

To install, open a terminal window within your prototype and run npm install govuk-notifications.

Usage

To use a a notification within your prototype:

Insert {% from "govukNotifications/components/email.njk" import "govukNotificationsEmail" %} or {% from "govukNotifications/components/phone.njk" import "govukNotificationsPhone" %} at the top of your page.
Somewhere outside of your content (usually at the top of the page in the beforeContent block) use {{ govukNotificationsEmail('Sender', 'Subject line) }} or {{ govukNotificationsPhone('Sender', 'Body content') }} (replacing the 'Sender' with the name of your sender, and the subject/content to your content).