<!doctype html>
<html> 
  <head>
    <script type="text/javascript">
        var _iub = _iub || [];
        _iub.csConfiguration = {
            "lang": "en",
            "siteId": 896537, //use your siteId
            "cookiePolicyId": 8207462, //use your cookiePolicyId
            "consentOnScroll": false, //avoid consent to be given when the user scrolls the page
            "enableCcpa": true, 
            "gdprAppliesGlobally": false,
            "countryDetection": true,
            "enableTcf": true, //enable IAB Transparency and Consent Framework
            "banner": {
                "position": "float-top-center",
                "acceptButtonDisplay": true,
                "customizeButtonDisplay": true,
                "rejectButtonDisplay": true //show reject button
            }
        };
    </script>
    <script src="//cdn.iubenda.com/cs/ccpa/stub.js"></script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script> <!-- onload="_iub.cc = 'EU';" to force EU (for testing purposes) -->
  </head>

  <body>
    <header>
      <div class="wrapper">
        <h1>iubenda Cookie Solution for CCPA</h1>
        <p>Business that operates both in the EU and in California</p>
      </div>
    </header>
    
    <section class="wrapper">
      
      <p>In this demo for <strong>non-EU businesses that operate both in the EU and in California</strong> we want to apply CCPA to Californian users and GDPR to EU users.</p>
      
      <p>On the configurator, select "Apply both" and "Automatically detect when to apply CCPA based on user location":</p>
      
      <img src="https://help.iubenda.com/wp-content/uploads/2019/12/cookie-solution-ccpa-gdpr-tcf.png" />
      
      <p>Then, <strong>if you're not EU-based</strong>, click on "Advanced View" and select "Request consent to EU users only":</p>
      
      <img src="https://help.iubenda.com/wp-content/uploads/2019/12/cookie-solution-ccpa-gdpr-eu.png" /> 
      
      <p>As you can see from the Cookie Solution snippet, we've set:</p>
      
      <ul>
        <li><code>enableCcpa: true</code></li>
        <li><code>gdprAppliesGlobally: false</code> (<code>true</code> if you're EU-based)</li>
        <li><code>countryDetection: true</code></li>
      </ul> 
      
      <p>We'll apply the CCPA when we detect that the user is connecting from California and the GDPR when the user is connecting from the EU.</p>
      
      <div class="tip">
        <p>If you're a <strong>EU business that operates also in California</strong>, you have to <strong>apply GDPR worldwide</strong> by setting <code>gdprAppliesGlobally: true</code>.</p>
      </div>
      
      <p>💡 If you're based in the US and you want to mimic the behaviour of the banner for EU users, you can override country detection and force EU by adding <code>onload="_iub.cc = 'EU';"</code> to the iubenda_cs.js script.</p>
      
      <hr />
      
      <h4>IAB Transparency and Consent Framework</h4>
      <p>As you can see from <code>enableCMP: true</code> and the "Enable IAB Transparency and Consent Framework" configurator option, in this demo we've also enabled the IAB TCF feature.</p>
      
      <hr />
      
      <h4>"Do Not Sell My Personal Information" link</h4>
      
      <p>In order to show a "Do Not Sell My Personal Information" link on your website (in addition to the one included in the banner), just add the <code>iubenda-ccpa-opt-out</code> class to a custom link or button:</p>
      
      <p><a href="javascript:void(0)" class="iubenda-ccpa-opt-out">Do Not Sell My Personal Information</a></p>
      
      <p>This link will let you honor opt-out requests.</p>
      
      <div class="note">
        <ul>
          <li>Remember to use your own credentials from <a href="https://www.iubenda.com/en/dashboard" target="_blank">your iubenda account</a></li>
          <li>This is a sample for pure demonstrative purposes, <strong>no consents are saved</strong> (result of <code>_iub.csConfiguration.skipSaveConsent = true</code>). <a href="#" onclick="_iub.cs.cookie.resetCookies({local: true,remote: true});alert('Consent cookie deleted. Now click on OK and refresh the page to return to the starting point.')">Reset consent</a> and refresh the page to return to the starting point.</li>
        </ul>
      </div>
      
      <!--hr /-->
      
      <h4>Helpful guides</h4>
      <ul class="guides">
        <li><a href="https://www.iubenda.com/en/help/19133" target="_blank">CCPA Guide
</a></li> 
        <li><a href="https://www.iubenda.com/en/help/21165" target="_blank">CCPA: How to add a notice of collection and a "Do not sell" link</a></li>
      </ul>
      
    </section>
  </body>
</html>
//don't copy this JS (just for demo purposes)

//don't save consent, always show the banner
_iub.csConfiguration.skipSaveConsent = true;

External CSS

  1. https://codepen.io/iubenda/pen/65341ae6a1bb5e161d81bfb510c245a4.css

External JavaScript

This Pen doesn't use any external JavaScript resources.