Research banner
The research banner invites users to sign up to take part in user research.
When to use
Use this pattern to encourage users to join our research panel.
When not to use
Do not use this pattern in the middle of a user journey as it may interrupt the user.
How it works
You need HMRC Frontend to use this pattern — find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro into your code.
Place the research banner directly below the GOV.UK header and phase banner, and above the Welsh language toggle.
The <h2> should say ‘Help make GOV.UK better’.
The link text should say ‘Sign up to take part in research (opens in new tab)’.
To identify where new users are coming from, you must email user.experience@hmrc.gov.uk to get a unique sign up link. In your email, include:
- the tax.service.gov.uk pages the banner will be displayed on
- how long the banner will be displayed
Linear journeys, for example forms
Only show the banner at the end of the journey. Do not include a close button.
<div class="hmrc-user-research-banner" data-module="hmrc-user-research-banner">
<div class="hmrc-user-research-banner__container govuk-width-container">
<div class="hmrc-user-research-banner__text">
<h2 class="govuk-heading-s hmrc-user-research-banner__title">
Help make GOV.UK better
</h2>
<a class="govuk-link hmrc-user-research-banner__link" rel="noopener noreferrer" href="https://www.gov.uk/government/organisations/hm-revenue-customs" target="_blank">
Sign up to take part in research (opens in new tab)
</a>
</div>
</div>
</div>
<div class="hmrc-user-research-banner" data-module="hmrc-user-research-banner">
<div class="hmrc-user-research-banner__container govuk-width-container">
<div class="hmrc-user-research-banner__text">
<h2 class="govuk-heading-s hmrc-user-research-banner__title">
Helpwch i wella GOV.UK
</h2>
<a class="govuk-link hmrc-user-research-banner__link" rel="noopener noreferrer" href="https://www.gov.uk/government/organisations/hm-revenue-customs" target="_blank">
Cofrestrwch i gymryd rhan mewn ymchwil (yn agor tab newydd)
</a>
</div>
</div>
</div>
{%- from "hmrc/components/user-research-banner/macro.njk" import hmrcUserResearchBanner -%}
{{
hmrcUserResearchBanner({
url: "https://www.gov.uk/government/organisations/hm-revenue-customs",
hideCloseButton: true
})
}}
{%- from "hmrc/components/user-research-banner/macro.njk" import hmrcUserResearchBanner -%}
{{
hmrcUserResearchBanner({
url: "https://www.gov.uk/government/organisations/hm-revenue-customs",
language: "cy",
hideCloseButton: true
})
}}
Non-linear journeys, for example dashboards
Include a close button that says ‘Hide message’.
<div class="hmrc-user-research-banner" data-module="hmrc-user-research-banner">
<div class="hmrc-user-research-banner__container govuk-width-container">
<div class="hmrc-user-research-banner__text">
<h2 class="govuk-heading-s hmrc-user-research-banner__title">
Help make GOV.UK better
</h2>
<a class="govuk-link hmrc-user-research-banner__link" rel="noopener noreferrer" href="https://www.gov.uk/government/organisations/hm-revenue-customs" target="_blank">
Sign up to take part in research (opens in new tab)
</a>
</div>
<button class="govuk-button govuk-button--secondary hmrc-user-research-banner__close">
<span aria-hidden="true">Hide message</span>
<span class="govuk-visually-hidden">Hide message. I do not want to take part in research</span>
</button>
</div>
</div>
<div class="hmrc-user-research-banner" data-module="hmrc-user-research-banner">
<div class="hmrc-user-research-banner__container govuk-width-container">
<div class="hmrc-user-research-banner__text">
<h2 class="govuk-heading-s hmrc-user-research-banner__title">
Helpwch i wella GOV.UK
</h2>
<a class="govuk-link hmrc-user-research-banner__link" rel="noopener noreferrer" href="https://www.gov.uk/government/organisations/hm-revenue-customs" target="_blank">
Cofrestrwch i gymryd rhan mewn ymchwil (yn agor tab newydd)
</a>
</div>
<button class="govuk-button govuk-button--secondary hmrc-user-research-banner__close">
<span aria-hidden="true">Cuddio’r neges</span>
<span class="govuk-visually-hidden">Cuddio’r neges. Dydw i ddim eisiau cymryd rhan mewn ymchwil</span>
</button>
</div>
</div>
{%- from "hmrc/components/user-research-banner/macro.njk" import hmrcUserResearchBanner -%}
{{
hmrcUserResearchBanner({
url: "https://www.gov.uk/government/organisations/hm-revenue-customs"
})
}}
{%- from "hmrc/components/user-research-banner/macro.njk" import hmrcUserResearchBanner -%}
{{
hmrcUserResearchBanner({
url: "https://www.gov.uk/government/organisations/hm-revenue-customs",
language: "cy"
})
}}
Research
We need more research. If you have used the research banner, get in touch to share your research findings.