Component

App Promo Banner

Displays a banner on Android devices to promote the GOVUK Android App

By default the app promo banner is hidden. The banner is only displayed if JavaScript is enabled and if the device is Android.

If the user has provided permission to use the settings cookie in their cookie preferences, then app_promo_banner cookie is set which is used to stop the banner reappearing once it has been closed.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/app_promo_banner", {} %>

Accessibility acceptance criteria

  • Adequate colour contrast between text, icons, and background meeting WCAG 2.2 AA as a minimum
  • Text does not overlap, truncate, or disappear when zoomed
  • “Skip to main” link precedes banner in DOM order and tab sequence
  • Close button can be activated with Enter/Space keys
  • Close button has an accessible name
  • View link is descriptive indicating where it goes to
  • Banner is reachable via keyboard navigation
  • Banner placement does not obscure other critical content or controls
  • Banner can be dismissed without requiring precise pointer actions
  • Banner content is understandable out of context
  • No keyboard trap: focus moves smoothly past the banner once dismissed

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
  • type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
  • rel - accepts any valid rel attribute e.g. ‘nofollow’
  • target - accepts a valid target attribute e.g. ‘_blank’
  • title - accepts any string
  • draggable - accepts a draggable attribute value (“true” or “false”)

Without ga4 tracking (preview)

Disables GA4 tracking on the app promo banner. Tracking is enabled by default. This adds a data module and data-attributes with JSONs to the accordion. See the ga4-event-tracker documentation for more information.

<%= render "govuk_publishing_components/components/app_promo_banner", {
  disable_ga4: true
} %>