Overview

A legally compliant way to collect marketing consent from the user.

✨ This is an auto-generated AI summary of the nsx-marketing-consent's documentation. It may not be accurate. ✨

Use this experience pattern in any journey where there is a need to capture and submit customer marketing preferences. Only use it for this purpose – do not use it for viewing or changing existing preferences.

Examples

Standard

Configure

Custom

The heading and first paragraph may be customised if the default content is not suitable.

Configure

Guidance

Do

• Always keep the same options.
• Use at the end of a journey to capture contact information for marketing purposes.
• Always use within an <ns-form> component.
• Use only once per journey.

Don't

• Reorder the options.
• Use for collecting contact information solely for offering a service, e.g. Booking an engineer.
• Have any of the options pre-checked.

Standard

It is possible to change the heading and the first paragraph to suit specific context. However, we recommend using the default content as these have been signed off by the legal team.

If there is an official update to the default content, please inform the Nucleus team so that the the component can be updated.

Implementation

Placement

The nsx-marketing-consent component can be used as a child of <form> wrapped in <ns-form>.

Specification

Attributes

has-opt-out

Property

hasOptout

Description

The toggle to indicate opt-out event handler is available or not.

Type

boolean

Default

false

name

Property

name

Type

string

Default

marketing-consent

value

Property

value

Type

string

Default

labelID

Property

labelID

Type

string

Default

heading

Property

heading

Type

string

Default

type

Property

type

Description

The type of the marketing consent.

Type

string

Options

standard light

Default

standard

Slots

Slot	Permitted tags	Description
heading	<h2> <h3>	The alternative heading of the marketing consent. Heading level depends on its place in the semantics of the page.
paragraph	<p>	The alternative content of the marketing consent.
opt-out	<a>	The link to update the customer preferences.

Events

Name	Description
opt-out	Dispatched when `chatting online` button is clicked. The button is enabled when `has-opt-out` attribute is set.
change

Figma

Please note: The nsx-marketing-consent Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).