Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@transcend-io/consent-manager-ui

Package Overview
Dependencies
Maintainers
0
Versions
149
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@transcend-io/consent-manager-ui

Transcend Consent Manager reference consent UI

  • 4.22.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.9K
decreased by-23.14%
Maintainers
0
Weekly downloads
 
Created
Source

See creating your own UI.

Playground

The default consent interface is built with flexibility to choose between different "view states". These can be viewed in the Consent Manager UI playground here.

Screen Shot 2022-12-14 at 2 38 05 AM

You can also run the playground locally with

yarn playground

View States

The default consent interface is built with flexibility to choose between different "view states". The following view states are supported:

AcceptOrRejectAll

Standard GDPR style banner for opting in or out of all purposes. Selecting "More Choices" gives the ability to opt in or out of specific purposes.

ViewState = AcceptOrRejectAll

Button Mapping
Button TitleCallback Description
Accept AllOpts the user into all allowed purposes in current consent experience.
Reject AllOpts the user out of all allowed purposes in current consent experience. Essential is never opted out.
More choicesRedirects to the CompleteOptions view state. No purposes change.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

AcceptOrRejectAllOrMoreChoices

Similar to AcceptOrRejectAll, but the "More Choices" button is a primary button.

ViewState = AcceptOrRejectAllOrMoreChoices

Button Mapping
Button TitleCallback Description
Accept AllOpts the user into all allowed purposes in current consent experience.
Reject AllOpts the user out of all allowed purposes in current consent experience. Essential is never opted out.
More choicesRedirects to the CompleteOptions view state. No purposes change.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

QuickOptions

This banner is recommended for GDPR-like regimes where customers can opt in or out of multiple purposes with 1 click. Each button includes the purposes for all options to the left of that button. For example, "Analytics" button includes "Essential", "Functional" and "Analytics".

ViewState = QuickOptions

Button TitleCallback Description
Only EssentialsOpts the user out of all purpose types other than Essential. Essential is never opted out.
FunctionalOpts the user in to Functional, but opts out of Analytics and Advertising. Does not change SaleOfInfo.
AnalyticsOpts the user in to Functional and Analytics, but opts out of Advertising. Does not change SaleOfInfo.
Ads and AnalyticsOpts the user in to Functional and Analytics and Advertising. Does not change SaleOfInfo.
More choicesRedirects to the CompleteOptions view state. No purposes change. Does not change SaleOfInfo.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

QuickOptions3

This banner is the same as QuickOptions but the Functional & Analytics buttons are combined into 1.

ViewState = QuickOptions3

Button TitleCallback Description
Only EssentialsOpts the user out of all purpose types other than Essential. Essential is never opted out.
AnalyticsOpts the user in to Functional and Analytics, but opts out of Advertising. Does not change SaleOfInfo.
Ads and AnalyticsOpts the user in to Functional and Analytics and Advertising. Does not change SaleOfInfo.
More choicesRedirects to the CompleteOptions view state. No purposes change. Does not change SaleOfInfo.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

CompleteOptions

This option is linked to in most other banners under the "More Choices" footer. This allows for explicit opting in or out of each purpose. If a user begins fully opted out, this UI requires clicking each checkbox to fully opt in.

ViewState = CompleteOptions

With optional description text:

ViewState = CompleteOptions with description

Button Mapping
Button TitleCallback Description
Toggle CheckboxChecking the box opts the user in to a purpose, unchecking the box opts a user out of a purpose. Opt out changes are not applied until "Confirm" is clicked.
ConfirmApplies the consent change event for any modified checkboxes.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

CompleteOptionsInverted

This option is similar to CompleteOptions but the checkboxes are inverted -- checking each box opts the user out of a purpose.

ViewState = CompleteOptionsInverted

Button Mapping
Button TitleCallback Description
Toggle CheckboxChecking the box opts the user out of a purpose, unchecking the box opts a user in to a purpose. Opt out changes are not applied until "Confirm" is clicked.
ConfirmApplies the consent change event for any modified checkboxes.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.
Read moreRedirects to the secondary policy specified using the data-secondary-policy data attribute.

CompleteOptionsToggles

This is a good banner style when you are using Transcend for Preference Management.

ViewState = CompleteOptionsToggles

Button Mapping
Button TitleCallback Description
Toggle SwitchSwitching one of the toggles opts the user in or out of a purpose. Changes are applied immediately as the toggle is switched
X - IconCloses the modal with no changes to purposes and no changes to consent confirmation.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

DoNotSellDisclosure

Unlike the other view states, this view state should be opened using onClick={(event) => transcend.doNotSell(event)}. Note: for React development, please use: onClick={(event) => transcend.doNotSell(event.nativeEvent)}. This view state will opt the user out upon opening of the modal, while the other view states require an additional button to be clicked to ensure compliance.

This is the recommended flow for US state laws with a do not sell requirement, as it allows for minimal friction in the opt-out process through a single click opt out.

ViewState = DoNotSellDisclosure

Button Mapping
Button TitleCallback Description
On Modal OpenOpts the user out of the SaleOfInfo purpose.
OkayCloses the modal with no changes to purposes and no changes to consent confirmation.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

OptOutDisclosure

Unlike the other view states, this view state should be opened using onClick={(event) => transcend.optOutNotice(event)}. Note: for React development, please use: onClick={(event) => transcend.optOutNotice(event.nativeEvent)}. This view state will opt the user out of all purposes as soon as the modal opens, while the other view states require an additional button to be clicked to ensure compliance.

ViewState = OptOutDisclosure

Button Mapping
Button TitleCallback Description
On Modal OpenOpts the user out of all purposes.
OkayCloses the modal with no changes to purposes and no changes to consent confirmation.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

DoNotSellExplainer

This is a 2 click opt out for do not sell or share. This option is useful for companies that need to provide more context about what the opt-out means, and how the opt-out changes when the user is logged in or out.

ViewState = DoNotSellExplainer

Button Mapping
Button TitleCallback Description
Toggle SwitchOpts the user in or out of the SaleOfInfo purpose.
X - IconCloses the modal with no changes to purposes and no changes to consent confirmation.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

PrivacyPolicyNotice

This banner can be used to notify users of privacy policy changes. This banner does not collect consent preferences, however, it will save a consent timestamp for whenever the user acknowledges the policy change, and closes the modal.

ViewState = PrivacyPolicyNotice

Button Mapping
Button TitleCallback Description
OkayCloses the modal with no changes to purposes, however, airgap.getConsent().confirmed is set to true to prevent the modal from re-showing.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

PrivacyPolicyNoticeWithCloseButton

This banner can be used to notify users of privacy policy changes. It does not collect consent preferences, however, it will save a consent timestamp for whenever the user acknowledges the policy change, and closes the modal. This banner is similar to PrivacyPolicyNotice, however instead of using a button to close the modal - an X icon is used in the top right-hand corner of the modal.

ViewState = PrivacyPolicyNoticeWithCloseButton

Button Mapping
Button TitleCallback Description
X - IconCloses the modal with no changes to purposes, however, airgap.getConsent().confirmed is set to true to prevent the modal from re-showing.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

NoticeAndDoNotSell

Deprecated: Use DoNotSellDisclosure or DoNotSellExplainer for CPRA compliance This option adds too much friction, and would likely be ruled non-compliant.

ViewState = DoNoNoticeAndDoNotSelltSellDisclosure

Button Mapping
Button TitleCallback Description
OkayCloses the modal with no changes to purposes and no changes to consent confirmation.
Do Not Sell My Personal InformationRedirects to the CompleteOptions view state. No purposes change. Does not change SaleOfInfo.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

AcceptOrRejectAnalytics

A banner that handles opting in or out of the Analytics tag.

ViewState = AcceptOrRejectAnalytics

Button Mapping
Button TitleCallback Description
OkayOpts the user into Analytics.
Do not trackOpts the user out of Analytics.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

AcceptOrRejectAdvertising

A banner that handles opting in or out of the Advertising tag.

ViewState = AcceptOrRejectAdvertising

Button Mapping
Button TitleCallback Description
OkayOpts the user into Advertising.
Opt out of advertisingOpts the user out of Advertising.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

AcceptAll

WARNING: In some jurisdictions this UI may be considered a dark pattern. Use at your own risk. To learn more, head over to our blog post: Demystifying dark patterns: A practical primer for CPRA compliance.

ViewState = AcceptAll

Button Mapping
Button TitleCallback Description
Accept AllOpts the user into all allowed purposes in current consent experience.
More choicesRedirects to the CompleteOptions view state. No purposes change.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

AcceptAllOrMoreChoices

WARNING: In some jurisdictions this UI may be considered a dark pattern. Use at your own risk. To learn more, head over to our blog post: Demystifying dark patterns: A practical primer for CPRA compliance.

ViewState = AcceptAllOrMoreChoices

Button Mapping
Button TitleCallback Description
Accept AllOpts the user into all allowed purposes in current consent experience.
More choicesRedirects to the CompleteOptions view state. No purposes change.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

AcceptAllRejectAllToggle

WARNING: In some jurisdictions this UI may be considered a dark pattern. Use at your own risk. To learn more, head over to our blog post: Demystifying dark patterns: A practical primer for CPRA compliance.

ViewState = AcceptAllRejectAllToggle

Button Mapping
Button TitleCallback Description
Toggle SwitchOpts the user in or out of all purpose.
X - IconCloses the modal with no changes to purposes and no changes to consent confirmation.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

LanguageOptions

This is the view state that allows the user to select their language.

ViewState = LanguageOptions

Button Mapping
Button TitleCallback Description
Each LanguageEach option changes the selected language for the modal, no purposes change.
More choicesRedirects to the CompleteOptions view state. No purposes change.
See our Privacy PolicyRedirects to the privacy policy link specified in Consent Display Settings or the data-privacy-policy data attribute.

Collapsed

View State = Collapsed

Button Mapping
Button TitleCallback Description
Transcend IconOpen's Transcend modal, no purposes change.

Prerequisites

This package is distributed through npm and GitHub package registries and assumes an installation of npm and node.

Developing against this repository

  1. Clone the repo
git clone git@github.com:transcend-io/consent-manager-ui.git
  1. Install dependencies
yarn
  1. Build the code and run the local version of the UI
yarn start

This command will run a very simple HTML file defined in ./index.html. Any changes made to the ./index.html or ./src will cause the page to auto-reload without needing to restart the server.

Testing

This repository has Jest tests available for all view states. These unit tests help to ensure core functionality remains unchanged, and run as part of the PR CI process. The test themselves include snapshots of the view state HTML to help prevent regressions in terms of UI logic or DOM behavior.

To run these tests, pull down this repository and run

yarn test

For maintainers: if a change you're making introduces a diff, you can walk through the snapshot changes interactively and review diffs/update snapshots on a case by case basis by running

yarn test:watch

Keywords

FAQs

Package last updated on 01 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc