1. Component Guide
  2. Single page notification button
Component

Single page notification button

A button that subscribes the user to email notifications to a page

By default, the component displays with the “Get emails about this page” state. If the js-enhancement flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.

The component does not render without the base_path parameter. The base_path is necessary for checking if an email subscription is active on page load and the creation/deletion of an email notification subscription.

When the button is clicked, the base_path is submitted to an endpoint which proceeds to check the user’s authentication status and whether they are already subscribed to the page or not. Depending on these factors, they will be routed accordingly.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/single_page_notification_button", {
  base_path: "/current-page-path"
} %>

Accessibility acceptance criteria

  • The bell icon must be presentational and ignored by screen readers.

Other examples

Already subscribed (preview)

If the user has already subscribed to email notifications about the current page, display the “Stop getting emails about this page” state.

<%= render "govuk_publishing_components/components/single_page_notification_button", {
  base_path: "/current-page-path",
  already_subscribed: true
} %>

With data attributes (preview)

The component accepts data attributes (for example, for analytics)

<%= render "govuk_publishing_components/components/single_page_notification_button", {
  base_path: "/current-page-path",
  data_attributes: {
    test_attribute: "testing",
    track_label: "/current-page-path",
    track_action: "Subscribe-button",
    track_category: "Single-page-notification-button",
    button_location: null
  }
} %>

With margin bottom (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having a margin bottom of 15px.

<%= render "govuk_publishing_components/components/single_page_notification_button", {
  base_path: "/current-page-path",
  margin_bottom: 5
} %>

With js enhancement (preview)

If the js-enhancement flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.

<%= render "govuk_publishing_components/components/single_page_notification_button", {
  base_path: "/current-page-path",
  js_enhancement: true
} %>

With button location (preview)

When there is more than one button on a page, we should specify their location so that Analytics can differentiate between them.

The location should have one of two values: “top” or “bottom”.

When this parameter is passed, its value is reflected in the data-action attribute (i.e “Unsubscribe-button-top”). When the flag is not present, data-action defaults to “Subscribe-button” or “Unsubscribe-button”, depending on the state of the button.

<%= render "govuk_publishing_components/components/single_page_notification_button", {
  base_path: "/current-page-path",
  js_enhancement: true,
  button_location: "top"
} %>