Alternative User Experiences (CCPA for Web)
Given your legal counsel’s CCPA compliance requirements or your existing site functionality, you may wish to implement your Privacy Manager for CCPA instance in a manner which does not leverage the existing out-of-the-box Privacy Manager UI and instead enables a different user experience (UX) for your site visitors. In this FAQ section, we have included instructions on how to setup Privacy Manager for CCPA instances for the most commonly requested alternative implementations.
Don’t see your desired workflow here? Our product is highly configurable, and we may be able to accommodate your request.
Alternative CCPA UX: "Do Not Sell My Personal Information" Button Only
Given your legal counsel’s CCPA compliance requirements or your existing site functionality, you may wish to implement your Privacy Manager for CCPA instance(s) in a manner which does not leverage the existing out-of-the-box Privacy Manager UI and instead enables a different user experience (UX) for your site visitors.
This alternative UX guide details how to implement the Do Not Sell My Personal Information button only on your website, while still leveraging all of Privacy Manager’s great backend functionality to communicate the Do Not Sell My Personal Information request.
Please see the basic demo implementation of this UX here: Do Not Sell My Personal Information Button Only Demo
Notice this implementation “suppresses” the standard Privacy Manager UI, but it will still respect the vendor selections you configure.
You may wish to implement this UX if you have determined:
You engage in the sale of California consumer personal information as applicable under CCPA
Your legal counsel has advised that a link to your privacy policy or another notice mechanism on your site is sufficient “notice at collection” to users under CCPA
You sell only cookie-based data and/or will collect your own identifier when a user clicks Do Not Sell My Personal Information such that you can fulfil Do Not Sell My Personal Information requests with a simple button implementation.
Note, if you will need to collect additional personal information from the consumer in order to fulfill the Do Not Sell My Personal Information request in your downstream data assets, you may wish to visit our ""Do Not Sell" Button & "Do Not Sell" Webform Redirect" article for instructions.
Navigate to http://launch.liveramp.com/
On the Overview page, create a new App or select the existing App you wish to implement.
From the Editor Menu toggle off Show Privacy Notice
From the Editor menu > Uncheck toggle enable on website
Configure your vendors (the 3rd parties to whom you wish to communicate the CCPA Do Not Sell signal) for the App, following instructions on https://faktor.atlassian.netnull/pages/createpage.action?spaceKey=LPM&title=Configure+vendors+CCPA+for+Web&linkCreation=true&fromPageId=1205207125
Configure any Advanced Settings you may wish to activate via the Admin page
When you feel ready, go to the Admin page and click Publish
Implementing this UX in your environment will require you to implement four components. You may either hardcode or place via a tag manager:
CSS code for styling of the Do Not Sell My Personal Information button.
JavaScript tag for the Privacy Manager backend configurations you set up above (placed in the header)
You may find this on the Admin page in your configured App in LiveRamp Console.
JavaScript code for triggering the Do Not Sell My Personal Information request to your vendors when a user clicks the Do Not Sell My Personal Information button.
An html div component, which dictates the text and loading on the page of the Do Not Sell My Personal Information button; this should be placed in the body of your page.
Please see below for examples of the code used for the demo. Note that you may change the inputs to adjust the look and feel of the button as desired:
<style>
.cs_pToggle {
position: fixed;
cursor: pointer;
z-index: 2147483646;
bottom: 10px;
right: 10px;
/* display: block; */
}
.cs_toggle {
background-color: #F88D37;
background-image: linear-gradient(to right, #F88D37, #F88D37);
color: #ffffff;
border: solid #F88D37 0px;
border-radius: 18px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
font-weight: bold;
line-height: normal;
}
.cs_span {
font-size: 13px;
text-transform: uppercase;
line-height: 24px;
}
</style>***Note: This is an example. You can find your own configured script via the Admin page within the desired App in LiveRamp Console.
<script src="https://ccpa-wrapper-dev.console.fktr.io/ccpa/a13d7969-1bc8-4fa3-ac00-e66a0f1f1623/ccpa-liveramp.js"></script>
<script>
function doNotSell() {
window.__ccpa("doNotSellMyData", null, 1, function () {
});
}
</script> <div class="cs_pToggle">
<button onclick="doNotSell()" class="cs_toggle">
<span class="cs_span">
Do Not Sell My Personal Information
</span>
</button>
</div>Once you’ve implemented these components, you will have a Do Not Sell My Personal Information button implementation of your Privacy Manager for CCPA. Please do not hesitate to check out our FAQ CCPA or reach out to support-privacy-manager@liveramp.com if you run into any implementation questions.
Alternative CCPA UX: "Do Not Sell" Button & "Do Not Sell" Webform Redirect
Given your legal counsel’s CCPA compliance requirements or your existing site functionality, you may wish to implement your Privacy Manager for CCPA instances in a manner that does not leverage the existing out-of-the-box Privacy Manager UI and instead enables a different user experience (UX) for your site visitors.
This alternative UX guide details how to implement the Do Not Sell My Personal Information button, with a redirect to your access request webform on your website, while still leveraging all of Privacy Manager’s great backend functionality to communicate the Do Not Sell My Personal Information request.
Please see the basic demo implementation of this UX, illustrating our integration with WireWheel, here: Do Not Sell My Personal Information + Redirect Demo.
Notice this implementation “suppresses” the standard Privacy Manager UI, but it will still respect the vendor selections you configure.
You may wish to implement this UX if you have determined:
You engage in the sale of California consumer personal information as applicable under CCPA.
Your legal counsel has advised that a link to your privacy policy or another notice mechanism on your site is sufficient “notice at collection” to users under CCPA.
You have a webform or other mechanism for capturing additional information on California consumers wishing to opt-out of the sale of their information.
Navigate to http://launch.liveramp.com/.
On the Overview page, create a new App or select the existing App you wish to implement.
From the Editor Menu toggle off Show Privacy Notice.
From the Editor menu > Uncheck toggle enable on website.
Configure your vendors (the 3rd parties to whom you wish to communicate the CCPA Do Not Sell My Personal Information signal) for the App, following instructions in "Configure Vendors."
Configure any Advanced Settings you may wish to activate via the Admin page.
When you feel ready, go to the Admin page and click Publish.
Implementing this UX in your environment will require you to implement four components. You may either hardcode or place via a tag manager:
CSS code for styling the Do Not Sell My Personal Information button.
JavaScript tag for the Privacy Manager backend configurations you set up above (placed in the header)
Tip
You may find this on the Admin page in your configured App in LiveRamp Console.
JavaScript code for triggering the Do Not Sell My Personal Information request to your vendors when a user clicks the Do Not Sell My Personal Information button.
An HTML div component, which dictates the text and loading on the page of the Do Not Sell My Personal Information button, should be placed in the body of your page.
Please see below for examples of the code used for the demo. Note that you may change the inputs to adjust the look and feel of the button as desired:
CSS styling:
This script dictates the look and feel of the Do Not Sell My Personal Information button. You can change the styling to match your on-site branding guidelines.
<style>
.cs_pToggle {
position: fixed;
cursor: pointer;
z-index: 2147483646;
bottom: 10px;
right: 10px;
}
.cs_toggle {
background-color: #F88D37;
background-image: linear-gradient(to right, #F88D37, #F88D37);
color: #ffffff;
border: solid #F88D37 0px;
border-radius: 18px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
font-weight: bold;
line-height: normal;
}
.cs_span {
font-size: 13px;
text-transform: uppercase;
line-height: 24px;
}
</style>Note
This is an example. You can find your own configured script via the Admin page within the desired App in LiveRamp Console.
<script src="https://ccpa-wrapper-dev.console.fktr.io/ccpa/a13d7969-1bc8-4fa3-ac00-e66a0f1f1623/ccpa-liveramp.js"></script>
JavaScript function:
This script function will fire opt-outs to the vendors selected with Selling purpose when a user clicks the Do Not Sell My Personal Information button.
It then pulls the AuditID and the domain and pushes them to the destination in the header
The user is then redirected to the webform URL destination.
Note
Be sure to replace the webform URL with the desired redirect URL in the script below.
<script>
function doNotSell() {
window.__ccpa("doNotSellMyData", null, 1, function () {});
var url = "Place the webform URL here"
var auditId
var domain
__ccpa('getConsent', null, 1, function (data) {
auditId = data.auditId
domain = window.location.hostname
});
var uri = url + "?auditID=" + auditId + "&domain=" + domain;
var res = encodeURI(uri);
console.log(res);
window.location = uri
}
</script>HTML div code:
Place this code in the body of the page to reflect the content and appearance of the Do Not Sell My Personal Information button.
<div class="cs_pToggle">
<button onclick="doNotSell()" class="cs_toggle">
<span class="cs_span">
Do Not Sell My Personal Information
</span>
</button>
</div>Once you’ve implemented these components, you will have a Do Not Sell My Personal Information button + Redirect implementation of your Privacy Manager for CCPA. Please do not hesitate to check out "FAQs for Privacy Manager for CCPA" or reach out to support-privacy-manager@liveramp.com if you run into any implementation questions.
Alternative CCPA UX: Custom Banner Notice
Given your legal counsel’s CCPA compliance requirements or your existing site functionality, you may wish to implement your Privacy Manager for CCPA instance(s) in a manner which does not leverage the existing out-of-the-box Privacy Manager UI and instead enables a different user experience (UX) for your site visitors.
This alternative UX guide details how to implement a custom banner notice while still leveraging all of Privacy Manager’s great backend functionality.
Please see the basic demo implementation of this UX here: Custom Banner Notice Demo
Notice this implementation “suppresses” the standard Privacy Manager UI, but it will still respect the vendor selections you configure. This implementation also shows the notice once to the user, unless they clear their cookies. Once a user exits the notice, it will not be shown again when they revisit the site in the same browser session. You may also optionally choose not to include various granular controls around whether to display categories of data, your vendor list, or your full privacy notice.
You may wish to implement this UX if you have determined:
Your legal counsel has advised that you must show a clear, visible “notice at collection” to users under CCPA upon visiting your site
The existing Privacy Manager UI does not meet your styling requirements (ie. you would like a smaller notice, wish to customize the look of the notice further, etc.)
Navigate to http://launch.liveramp.com/
On the Overview page, create a new App or select the existing App you wish to implement.
From the Editor Menu toggle off Show Privacy Notice
Configure the rest of the App as desired according to the Set Up Privacy Manager guide.
Configure any Advanced Settings you may wish to activate via the Admin page
When you feel ready, go to the Admin page and click Publish
Including the following in your environment ( hardcode or through a tag manager )
CSS code for styling of the custom notice banner.
JavaScript tag for the Privacy Manager backend configurations you set up above (placed in the header)
Tip
You may find this on the Admin page in your configured App in LiveRamp Console.
JavaScript code for triggering the functionality of the notice banner, including:
Close button (optional)
Save & Exit option
Redirect to Do Not Sell My Personal Information or opt-out webform (optional)
An html div component, which dictates the text and loading on the page of the custom notice banner; this should be placed in the body of your page.
Note
This file is for the custom notice banner. Please note this is an example, and you may modify the code to reflect your own styling needs.
Make sure to include either the Minified or the Expanded version below
Minified :
<style>.cs_pToggle{position:fixed;cursor:pointer;z-index:2147483646;bottom:10px;right:10px}.cs_toggle{background-color:#f88d37;background-image:linear-gradient(to right,#f88d37,#f88d37);color:#fff;border:solid #f88d37 0;border-radius:18px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;font-weight:700;line-height:normal}.cs_span{font-size:13px;text-transform:uppercase;line-height:24px}.modal-content{position:fixed;bottom:0;background-color:#fefefe;width:100%;-webkit-animation-name:slideIn;-webkit-animation-duration:.4s;animation-name:slideIn;animation-duration:.4s;z-index:2147483647;box-shadow:0 0 12px 0 rgba(0,0,0,.1)}.cs_close{color:#323333;float:right;font-size:24px;font-weight:700;margin:4px 16px}.cs_close:focus,.cs_close:hover{color:#000;text-decoration:none;cursor:pointer}.modal-header{padding:2px 16px;background-color:#fff;color:#323333}.modal-body{padding:2px 16px}.modal-footer{padding:2px 2px;background-color:#fff;color:#323333}.c_par{font-family:OpenSans;font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:normal;color:#4a4949;margin:16px;font-family:"Flexo Medium",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}.c_btn_1{background-color:#f88d37;font-size:8px;font-weight:700;border-radius:27px;color:#fff;border:2px solid #f88d37;margin:12px 16px 12px 10px;line-height:normal;display:flex;height:30px;width:120px}.c_btn_2{background-color:#f88d37;font-size:8px;font-weight:700;border-radius:27px;color:#fff;border:2px solid #f88d37;margin:12px 0 12px 0;line-height:normal;display:flex;width:120px;height:30px}.c_nac{line-height:inherit;color:#fa8d28;text-decoration:none;cursor:pointer}.c_btn_container{display:flex!important;align-content:center;flex-direction:column;justify-content:center;padding-left:60px}@-webkit-keyframes slideIn{from{bottom:-300px;opacity:0}to{bottom:0;opacity:1}}@keyframes slideIn{from{bottom:-300px;opacity:0}to{bottom:0;opacity:1}}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}</style>For more adjustment on the css here is the expanded version:
.cs_pToggle {
position: fixed;
cursor: pointer;
z-index: 2147483646;
bottom: 10px;
right: 10px;
}
.cs_toggle {
background-color: #F88D37;
background-image: linear-gradient(to right, #F88D37, #F88D37);
color: #ffffff;
border: solid #F88D37 0px;
border-radius: 18px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
font-weight: bold;
line-height: normal;
}
.cs_span {
font-size: 13px;
text-transform: uppercase;
line-height: 24px;
}
</style>
<style>
.cr_modal {
z-index: 1;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
z-index: 2147483647;
}
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;
z-index: 2147483647;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, .1);
}
.cs_close {
color: #323333;
float: right;
font-size: 24px;
font-weight: bold;
margin: 4px 16px;
}
.cs_close:hover,
.cs_close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #FFF;
color: #323333;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 2px;
background-color: #FFF;
color: #323333;
}
.c_par {
font-family: OpenSans;
font-size: 12px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #4a4949;
margin: 16px;
font-family: "Flexo Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.c_btn_1 {
background-color: #f88d37;
font-size: 8px;
font-weight: 700;
border-radius: 27px;
color: #fff;
border: 2px solid #f88d37;
margin: 12px 16px 12px 10px;
line-height: normal;
display: flex;
height: 30px;
width: 120px;
}
.c_btn_2 {
background-color: #f88d37;
font-size: 8px;
font-weight: 700;
border-radius: 27px;
color: #fff;
border: 2px solid #f88d37;
margin: 12px 0px 12px 0px;
line-height: normal;
display: flex;
width: 120px;
height: 30px;
}
.c_nac {
line-height: inherit;
color: #fa8d28;
text-decoration: none;
cursor: pointer;
}
.c_btn_container {
display: flex !important;
align-content: center;
flex-direction: column;
justify-content: center;
padding-left: 60px;
}
@-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
@keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}Privacy Manager script:
**Note: This is an example. You can find your own configured script via the Admin page within the desired App in LiveRamp Console.
<script src="https://ccpa-wrapper-dev.console.fktr.io/ccpa/a13d7969-1bc8-4fa3-ac00-e66a0f1f1623/ccpa-liveramp.js"></script>
HTML (Banner):
Needs to be implemented in the body of the page. Note, we have inserted generic notice language in this example. You may wish to review it with your legal counsel and update to fit your needs prior to implementation.
<div id="cs_modal" class="cr_modal" style="display: none;">
<div class="modal-content">
<span class="cs_close">×</span>
<div class="modal-footer">
<p class="c_par">We may collect cookies and other personal information from your interaction with our
website.
For more information on the categories of personal information we collect and the purposes we use
them for,
please view our <a class="c_nac" onclick=shoCMP()> Notice at Collection.</a></p>
</div>
</div>
</div>This script will allow the suppressed Privacy Manager UI to be accessed once a user clicks the notice link for more information
Note that once a user exits the notice, it will not be shown again when they revisit the site in the same browser session.
Optionally, you can include a redirect from the Do Not Sell My Personal Information button to an access request webform, and the Privacy Manager will pull the Audit ID and the domain and push them to the destination in the header
Note
If you choose to include a redirect to a webform, you need to replace PLACE REDIRECT WEBFORM URL HERE with your webform destination URL.
The script needs to be placed after the html tag to avoid undefined status
<script>
var c_modal = document.getElementById("cs_modal");
var c_close = document.getElementsByClassName("cs_close")[0];
var c_NAC = document.getElementsByClassName("NAC")[0];
window.__ccpa('addEventListener', 'consentToolShouldBeShown', 1, function () {
c_modal.style.display = "block";
});
var shoCMP = function () {
__ccpa("showConsentManager", [], [1], function () {})
c_modal.style.display = "none";
}
c_close.onclick = function () {
c_modal.style.display = "none";
__ccpa("optIn", [], [1], function () {})
}
var url = "PLACE REDIRECT WEBFORM URL HERE"
var auditId
var domain
window.__ccpa('addEventListener', 'doNotSellMyDataButtonClicked', 1, function () {
__ccpa('getConsent', null, 1, function (data) {
auditId = data.auditId
domain = window.location.hostname
});
var uri = url + "?auditID=" + auditId + "&domain=" + domain;
var res = encodeURI(uri);
console.log(res);
window.location = uri
});
</script>Alternative CCPA UX: "Do Not Sell My Personal Information" Text Link
Given your legal counsel’s CCPA compliance requirements or your existing site functionality, you may wish to implement your Privacy Manager for CCPA instance(s) in a manner which does not leverage the existing out-of-the-box Privacy Manager (re)surface toggle and instead enables a different user experience (UX) for your site visitors.
This alternative UX guide details how to implement a custom text link to (re)surface Privacy Manager UI.
A reason for you to do this is because the text “Do Not Sell My Personal Information” is too big to sensibly fit in a floating button, therefore we recommend to give your customers the option to toggle Privacy Manager from a text link.
Place the following code snippet on your web page in order to allow users to (re)surface the Privacy Manager UI.
<a onclick="__ccpa('showConsentManager')" href="javascript:void(0);">Do Not Sell My Personal Information</a>