Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!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
            "consentOnContinuedBrowsing": false, //avoid consent to be given by scrolling and continued browsing activity (disabled for demo purposes)
            "enableCMP": true, //enable IAB TCF
            "perPurposeConsent": true, //enable per-category consent
            "banner": {
                "position": "float-top-center",
                "acceptButtonDisplay": true, //explicit accept button, as requested by IAB
                "customizeButtonDisplay": true //explicit customize button, as requested by IAB
            }
        };
    </script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub.js"></script> <!-- IAB TCF -->
    <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/safe-tcf.js"></script> <!-- add this line if you don't use prior blocking for vendor scripts -->
    <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
  </head>

  <body>
    <header>
      <div class="wrapper">
        <h1>iubenda Cookie Solution</h1>
        <p>IAB Transparency and Consent Framework</p>
      </div>
    </header>
    
    <section class="wrapper">
      
      <h2><mark>This demo is outdated: TCF v1.1 is no longer supported</mark></h2> 
      <p>👉 Click <a href="https://codepen.io/iubenda/pen/YzXBmNr/left?editors=1000" target="_blank">here</a> for a demo of the <strong>latest version (2.0)</strong>.</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>Be sure to open your browser in a private/incognito window to test the saving of consent (if you've accepted by mistake, <a href="#" id="reset-btn">reset consent</a> and refresh the page  to return to the starting point)</li>
        </ul>
      </div>
      
      <p>Major advertising networks now require publishers to gain consent before showing personalized ads. You can meet this requirement with the IAB Transparency and Consent Framework and our <a href="https://www.iubenda.com/en/cookie-solution" target="_blank">Cookie Solution</a>.</p> 
      
      <div class="tip">
        <p>💡 To see this feature in action, click on <strong>advertising preferences panel</strong> or <strong>Learn more and customize &rarr; Targeting & Advertising &rarr; Customize advertising tracking</strong>.</p>
      </div>
      
      <p>To set it up:</p>
      
      <h4>1. Enable the IAB Transparency and Consent Framework v1</h4>
      
      <p>On the configurator:</p>
      
      <img src="https://help.iubenda.com/wp-content/uploads/2020/03/cs-tcf-en-codepen01.png" width="480" />
      
      <p>More options available in the Advanced View.</p>
      
      <h4>2. Provide explicit Accept and Customize buttons</h4>
      
      <p>On the configurator:</p>
      
      <img src="https://help.iubenda.com/wp-content/uploads/2020/03/cs-tcf-en-codepen02.png" width="480" />
      
      <p>More options available in the Advanced View.</p>
      
      <h4>3. Collect consent to ad personalisation</h4>
      <p>In order for vendors to read the consent properly, the <code>__cmp</code> function that the CMP (iubenda) makes available must be present. This function is only available after consent has been collected. There are two methods:</p>
      <ul>
        <li>directly blocking the vendor scripts (using one of the <a href="https://www.iubenda.com/en/help/3081" target="_blank">prior blocking methods</a> supported by our Cookie Solution), then executing them only after consent has been collected; or</li>
        <li>not directly blocking the vendor scripts, but rather, ensuring that the <code>__cmp</code> function is loaded before the vendor scripts are loaded. In order to do it, enable the "Synchronous activator" option on the configurator. It will add an extra script (<code>safe-tcf.js</code>) to your code.</li>
      </ul>
      
      <p>More details <a href="https://www.iubenda.com/en/help/7440#consent-to-ad-personalisation" target="_blank">here</a>.</p>
      
      <h4>4. Provide a link/button that allows your users to reopen the consent modal and edit their preferences</h4>
      
      <p>To implement, just add the <code>iubenda-advertising-preferences-link</code> class to a custom link or button:</p>
      
      <a href="#" class="iubenda-advertising-preferences-link btn">Update your advertising tracking preferences</a>
      
      <p>Once clicked, the link above will trigger the opening of the advertising tracking settings modal.</p>
      
      <hr />
      
      <h3>Result</h3>
      <p>The "Learn more and customize" button and the "advertising preferences panel" link will allow the user to set <a href="#" class="iubenda-advertising-preferences-link">advertising tracking preferences</a>.</p>
      
      <hr />
      
      <h3>Learn more</h3>
      <div class="tip">
        <p>Read <a href="https://www.iubenda.com/en/help/7440" target="_blank">the complete guide to IAB TCF and iubenda's CMP</a> for more information about additional features and settings.</p>
      </div>
      
      <p>Other helpful resources:</p>
      <ul class="guides">
        <li><a href="https://www.iubenda.com/en/help/1177" target="_blank">Cookie Solution - Getting Started</a></li> 
        <li><a href="https://www.iubenda.com/en/help/3831" target="_blank">How to Customize the Look and Behavior of the Cookie Banner (Beginner's Guide)</a></li>
        <li><a href="https://www.iubenda.com/en/help/1205" target="_blank">How to Configure Your Cookie Solution (Advanced Guide)</a></li>
        <li><a href="https://www.iubenda.com/en/help/3081" target="_blank">Introduction to the Prior Blocking of Cookies</a></li>
      </ul>
      
    </section>
  </body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console