Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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
            "googleAdditionalConsentMode": true,
            "invalidateConsentWithoutLog": true, 
            "consentOnContinuedBrowsing": false, //avoid consent to be given by scrolling and continued browsing activity (disabled for demo purposes)
            "enableTcf": true, //enable IAB TCF (enableCMP has been replaced by enableTcf)
            "perPurposeConsent": true, //enable per-category consent
            /*
                    "tcfPurposes": { //limit the legal basis and choose which TCF purposes to prompt (optional)
            "1": true,
            "2": "consent_only",
            "3": "consent_only",
            "4": "consent_only",
            "5": "consent_only",
            "6": "consent_only",
            "7": "consent_only",
            "8": "consent_only",
            "9": "consent_only",
            "10": "consent_only"

            },
            */
            "banner": {
                "position": "float-top-center",
                "acceptButtonDisplay": true, //explicit accept button, as requested by IAB
                "customizeButtonDisplay": true, //explicit customize button, as requested by IAB
              "rejectButtonDisplay":true
            }
        };
    </script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script> <!-- IAB TCF -->
    <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/safe-tcf-v2.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 class="tcf2">
      <div class="wrapper">
        <h1>iubenda Cookie Solution</h1>
        <p>IAB Transparency and Consent Framework v2.0</p>
      </div>
    </header>
    
    <section class="wrapper">
      
      <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 <mark>open your browser in a private/incognito window</mark> 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</h4>
      
      <p>On the configurator:</p>
      
      <img src="https://help.iubenda.com/wp-content/uploads/2022/03/iab-activation.gif" style="width: 480px;" />
      
      <p>More options available in the Advanced View.</p>
      
      
      <h4>2. Collect consent to ad personalisation</h4>
      <p>In order for vendors to read the consent properly, the <code>__tcfapi</code> function that the CMP (iubenda) makes available must be present. This function is only available after consent has been collected.</p>
      <ul>
                <li>the default method ensures that the <code>__tcfapi</code> function is loaded before the vendor scripts are loaded, not directly blocking the vendor scripts. In order to do it, enable the "Synchronous activator" option on the configurator. It will add an extra script (<code>safe-tcf-v2.js</code>) to your code.</li>

        <li>If you use Google's advertising services such as Ad Manager, AdSense and AdMob, could happens that where the CMP does not respond within a maximum of 500ms, vendors' Sell-Side Platform uses the opt-out status of the user instead. In such cases, your end-users will be served with non-personalized ads. To prevent these issues, you can directly block the vendors' 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 execute them only after consent has been collected.</li>
      </ul>
      
      <p>More details <a href="https://www.iubenda.com/en/help/7440#collect-consent-to-ad-personalization" target="_blank">here</a>.</p>
      
      <h4>3. 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>
      
      <div class="tip">
        <p>⚠️ To meet IAB's requirements, please note that <strong>if you don't implement this class, we'll automatically display a small widget that hovers on your pages</strong>.</p>
      </div>
      
      <hr />
      
      <h3>Enhanced publisher options</h3>
      <p>Given that TCF v2.0 has 10 purposes:</p>
      
      <ol>
        <li>Store and/or access information on a device</li>
        <li>Select basic ads</li>
        <li>Create a personalised ads profile</li>
        <li>Select personalised ads</li>
        <li>Create a personalised content profile</li>
        <li>Select personalised content</li>
        <li>Measure ad performance</li>
        <li>Measure content performance</li>
        <li>Apply market research to generate audience insights</li>
        <li>Develop and improve products</li>
      </ol>
      
      <p>With this version you can:</p>
      
      <ul>
        <li><strong>limit the legal basis</strong> to consent only or to legitimate interest only, as well as both; and</li>
        <li><strong>choose which TCF purposes to prompt</strong>.</li>
      </ul>
      
      <p>Let's see how to do this. Thanks to <code>tcfPurposes</code>, in the following example we'll:</p> 
      <ul>
        <li>disable the purpose number 1 ("Store and/or access information on a device", set to <code>consent_not_needed</code>, possible only if our legislation does not require consent for it)</li> 
        <li>disable the purpose number 2 ("Select basic ads"),</li>
        <li>limit the legal basis to legitimate interest only for purpose number 4 ("Select personalised ads"), and</li> 
        <li>limit the legal basis to consent only for purpose number 7 ("Measure ad performance")</li>
      </ul>
      
      <pre><code>
      _iub.csConfiguration = {
        "lang": "en",
        "siteId": 896537, //use your siteId
        "cookiePolicyId": 8207462, //use your cookiePolicyId
        "enableTcf": true,
        "tcfVersion": 2,
        ...
        "tcfPurposes": {
            "1": "consent_not_needed",
            "2": false,
            "4": "li_only",
            "7": "consent_only"
        },
        "tcfPublisherCC": "DE",
        "isTCFConsentGlobal": false,
        "banner": {
          ...
        }
      }
      </code></pre>
      
      <p>These settings can also be managed through the configurator (advanced view).</p>

      <p>In addition <strong>you can choose which vendors to prompt</strong>. This option must be enabled within the Cookie Solution configurator - and not just manually written into the code - for it to be effective.</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 />
      
      
      <p>Other helpful resources:</p>
      <ul class="guides">
        <li><a href="https://www.iubenda.com/en/help/7440" target="_blank">The complete guide to IAB TCF and iubenda's Consent Management Platform</a></li>
        <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