Configuring the Banner and Preference Center for Paywall Compatibility

Paywalls, which offer access content by providing the choice to either consent to cookies and tracking technologies or pay for a subscription, have been a hot topic in the EU, specifically in Germany. The Hamburg DPA has expressed approval of the new approach of paywalls.

Paywalls are also officially accepted within the IAB Transparency Consent Framework (TCF 2.0). 

The IAB has confirmed the following in regards to paywalls:

"By way of derogation from Appendix B, Policies C(c)(iii) and (iv) and C(d), a Publisher shall not be required to allow a user to make granular and specific consent or opt-in choices if the Publisher implements a way for the user to access its content without consenting through other means, for example by offering paid access that does not require consenting to any Purposes. For the avoidance of doubt, all other Policies remain applicable."

For more information on TCF 2.0 policy please reference the IAB Europe Transparency and Consent Framework Policies.

Please note:

  • Granular Consent is not necessary for purpose consent.

  • Granular Objection is necessary for Legitimate Interest purposes, but Legitimate Interest can be disabled all together.

  • This is compliant with the recent updates for TCF 2.0, it is not necessarily compliant for all countries and will mainly be used in Germany.

To configure the OneTrust CMP for paywall compatibility

  1. Create a new IAB TCF 2.0 template. For more information, see Adding, Editing, and Managing Cookie Consent Templates.Adding, Editing, and Managing Cookie Consent Templates


  2. On the Template Details screen, configure your banner template as follows:

    Section

    Directions

    Layout

    Select Center-Rounded.

    Styling

    In the Custom CSS field, insert the your CSS.

    Tip:

    You can reference and modify the example below for quick implementation:

    JSON 
    /* Manage Preference Button */
#ot-sdk-btn-floating .ot-floating-button__front, #ot-sdk-btn-floating .ot-floating-button__back {
    background-color: #de4747 !important;
}

.ot-floating-button__svg-fill {
    fill: #000000;
}

#onetrust-consent-sdk #onetrust-banner-sdk {
    max-width: calc(100vw - 40px);
    width: 800px;
    max-height: 100%;
    height: 471px;
}

#onetrust-consent-sdk #onetrust-banner-sdk p, #onetrust-consent-sdk #onetrust-banner-sdk h3, #onetrust-consent-sdk #onetrust-banner-sdk a, #onetrust-consent-sdk #onetrust-banner-sdk span, #onetrust-consent-sdk #onetrust-pc-sdk p, #onetrust-consent-sdk #onetrust-pc-sdk h3, #onetrust-consent-sdk #onetrust-pc-sdk a, #onetrust-consent-sdk #onetrust-pc-sdk span {
    font-family: Greta;
}

#onetrust-consent-sdk #onetrust-pc-sdk button {
    font-family: Greta Condensed;
}

#onetrust-consent-sdk p, #onetrust-consent-sdk h3, #onetrust-consent-sdk a, #onetrust-consent-sdk span {
    color: #000000 !important;
}

#onetrust-pc-sdk .ot-host-item>button:focus,
#onetrust-pc-sdk .ot-ven-item>button:focus,
#onetrust-pc-sdk .ot-ven-hdr>a:focus,
#onetrust-banner-sdk :not(.ot-leg-btn-container)>button:focus,
#onetrust-pc-sdk .ot-consent-body>a:focus,
#onetrust-pc-sdk :not(.ot-leg-btn-container)>button:focus,
#onetrust-banner-sdk #onetrust-policy .ot-consent-register a:focus,
#onetrust-consent-sdk #onetrust-pc-sdk .privacy-notice-link:focus,
#onetrust-banner-sdk a:focus,
#onetrust-pc-sdk .ot-chkbox input:focus,
#onetrust-pc-sdk .ot-obj-leg-btn-handler span:focus,
#onetrust-consent-sdk #onetrust-pc-sdk .category-vendors-list-handler+a:focus,
#ot-sdk-btn-floating.ot-floating-button button:focus,
#onetrust-pc-sdk .ot-tgl input:focus+.ot-switch {
    border: none !important;
    outline: none !important;
}

#onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-inactive-leg-btn:focus,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-active-leg-btn:focus,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-remove-objection-handler:focus,
#onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-accept-btn, #onetrust-pc-sdk .ot-tgl input:checked+.ot-switch .ot-switch-nob:focus {
    outline: none !important;
}

/* Header CSS starts here */
#onetrust-banner-sdk #onetrust-group-container .banner-header,
#onetrust-banner-sdk #onetrust-group-container #onetrust-policy-title,
#onetrust-banner-sdk #onetrust-button-group-parent {
    position: absolute;
    left: -1000px;
    height: 0;
    width: 0;
    overflow: hidden;
}

#onetrust-banner-sdk #onetrust-policy .ot-header-h2, #onetrust-banner-sdk #onetrust-policy .ot-header-h2 span {
    font-size: 35px;
    line-height: 1.2;
    margin-bottom: 0;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    font-family: Greta Condensed;
    margin: 0 auto;
    display: inline;
    background-image: repeating-linear-gradient(to top,transparent 0,transparent .19em,#de4747 .19em,#de4747 .41em,transparent .41em,transparent 2em);
}

/* Header CSS ends here */
/* Body CSS starts here */

#onetrust-banner-sdk :not(.ot-dpd-desc)>.ot-b-addl-desc {
    margin: 0 30px !important;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-consent-section-left {
    border: 1px solid #e5e5e5;
    border-width: 0 0 1px;
    padding: 0 0 20px;
    text-align: center;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-consent-section-right {
    padding: 20px 0 0;
    text-align: center;
}


#onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-section-h3 {
    font-size: 30px;
    margin-bottom: 9px;
    text-align: center;
    font-weight: 400;
    font-family: Greta Condensed;
    background-image: repeating-linear-gradient(to top,transparent 0,transparent .19em,#de4747 .19em,#de4747 .52em,transparent .41em,transparent 2em);
    display: inline;
    padding-bottom: 2px;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-body p {
    font-size: 16px;
    margin: 5px 0;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-btn {
    text-align: center;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-accept-btn, #onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-more-btn {
    background-color: #de4747;
    display: inline-block;
    line-height: 1;
    padding: 10px 50px;
    transition: background-color .5s, border-color .5s, color .5s;
    font-size: 16px;
    color: #000000;
    font-family: Greta Condensed;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-accept-btn {
    border: 1px solid #de4747;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-accept-btn:hover {
    opacity: 0.7;
    border: 1px solid #de4747;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-more-btn {
    background: #ffffff;
    text-decoration: none;
    border: 1px solid #000000;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-more-btn:hover, #onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-more-btn:focus {
    background-color: #f1f1f1;
    border: 1px solid #000000 !important;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-section-right .ot-consent-register {
    text-align: center;
}
#onetrust-banner-sdk #onetrust-policy .ot-consent-register a {
    text-decoration: none;
    font-weight: bold;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-register a:hover {
    text-decoration: underline;
    opacity: 0.7;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-register .onetrust-vendors-list-handler {
    display: inline;
}

#onetrust-banner-sdk .ot-dpd-container, #onetrust-banner-sdk #onetrust-policy #onetrust-policy-text {
    display: none;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-tracking-description {
    padding-bottom: 40px;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-tracking-description p {
    margin-bottom: 25px;
    font-size: 13px;
}

#onetrust-banner-sdk #onetrust-policy .ot-dpd-desc, #onetrust-banner-sdk #onetrust-policy h3,  {
    font-size: 12px;
}

/* Body CSS ends here */
/* Footer CSS starts here */
#onetrust-banner-sdk #onetrust-policy .ot-consent-footer {
    border-top: 1px solid #e5e5e5;
    font-size: 16px;
    padding-top: 10px;
    position: absolute;
    bottom: 20px;
    width: 89%;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-footer>a {
    font-weight: 400;
    text-decoration: none;
    color: #B4B4B4 !important;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-footer>a:hover {
    text-decoration: underline;
}

#onetrust-banner-sdk #onetrust-policy .ot-consent-footer>a:not(:last-child) {
    margin-right: 19px;
}

/* Footer CSS ends here */

@media only screen and (device-width: 280px) {
    #onetrust-banner-sdk #onetrust-policy .ot-consent-footer {
        padding-top: 0;
    }
}

@media only screen and (device-width: 320px) {
  #onetrust-consent-sdk #onetrust-banner-sdk {
        height: 450px;
        max-width: calc(100vw - 15px);
    }
}

@media only screen and (max-width: 414px) and (min-width: 375px) {
  #onetrust-consent-sdk #onetrust-banner-sdk {
        height: 562px !important;
    }
}

@media only screen and (device-width: 540px) {
  #onetrust-consent-sdk #onetrust-banner-sdk {
        height: 530px !important;
    }
}

@media (min-width:598px) {
    #onetrust-banner-sdk #onetrust-policy .ot-consent-body {
        padding: 10px 0;
    }

    #onetrust-banner-sdk #onetrust-policy .ot-consent-body {
        display: flex
    }

    #onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-consent-section-left {
        border-width: 0 1px 0 0;
        padding: 0 20px 0 0;
    }

    #onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-consent-section-right {
        padding: 0 0 0 20px;
    }
}

@media only screen and (min-width: 600px) {
    #onetrust-banner-sdk #onetrust-policy .ot-consent-header {
        display: flex;
    }
}

@media only screen and (max-width: 600px) and (min-width: 360px) {
    #onetrust-consent-sdk #onetrust-banner-sdk {
        height: 600px;
        max-width: calc(100vw - 15px);
    }
}

@media only screen and (max-width: 600px) {
    #onetrust-banner-sdk #onetrust-policy .ot-consent-header {
        padding: 0;
        text-align: center;
    }

    #onetrust-banner-sdk #onetrust-policy .ot-header-h2, #onetrust-banner-sdk #onetrust-policy .ot-header-h2 span {
        font-size: 22px;
    }

    #onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-section-h3 {
        font-size: 20px;
    }

    #onetrust-banner-sdk #onetrust-policy .ot-consent-body p {
        font-size: 12px
    }

    #onetrust-banner-sdk :not(.ot-dpd-desc)>.ot-b-addl-desc {
        margin: 0 20px 10px 20px !important;
    }

    #onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-consent-section-left {
        padding: 0;
    }

    #onetrust-banner-sdk #onetrust-policy .ot-consent-body .ot-consent-section-right {
        padding: 10px 0 0;
    }

    #onetrust-banner-sdk #onetrust-policy .ot-consent-tracking-description p {
        /*margin-bottom: 6px;*/
        font-size: 11px;
    }    
}

@media only screen and (device-width: 768px) {
  #onetrust-consent-sdk #onetrust-banner-sdk {
        height: 491px;
    }
}

@media only screen and (min-width: 768px) {
    #onetrust-banner-sdk #onetrust-policy .ot-header-h2, #onetrust-banner-sdk #onetrust-policy .ot-header-h2 span {
        background-image: repeating-linear-gradient(to top,transparent 0,transparent .19em,#de4747 .19em,#de4747 .52em,transparent .41em,transparent 2em);  
    }
}

    Content
    Additional Description

    1. Select the Edit icon next to Additional Description. The Additional Description modal appears.

    2. In the Display Position field, select Before IAB Enforced Description.

    3. In the Additional Description field, insert your script.

      Tip:

      You can reference and modify the examples below (German and English) for quick implementation:

      English

      CODE 
      <div class="ot-consent-header">
<! –– This is for the title of the paywall ––>
<h2 class="ot-header-h2">How do you want to use this site?</h2>
</div>
<div class="ot-consent-body">
<div class="ot-consent-section-left">
<! –– Advertising Section ––>
<h3 class="ot-section-h3">Site with Advertising</h3>
<p>Visit this site with usual advertising and tracking. The consent can be revoked at any time.</p>
<div class="ot-btn">
<button class="ot-accept-btn" onclick="OneTrust.AllowAll()">Accept</button>
</div>
<p class="ot-consent-register">
Details im <a href="#" onclick="OneTrust.ToggleInfoDisplay()" tabindex="0">Privacy Center</a> und in der <a tabindex="0" class="ot-link-btn onetrust-vendors-list-handler">List of Partners</a>. Chaning consent is possible <a href="SITE LINK" tabindex="0" target="_blank">Data Protection.</a>
</p>
</div>
<div class="ot-consent-section-right">
<! –– Pay Section ––>
<h3 class="ot-section-h3">Pure Site</h3>
<p>Use site with less advertising and without advertising tracking for X cost a week.</p>
<div class="ot-btn">
<a href="Site link" role="button" class="ot-more-btn" tabindex="0">Subscribe now</a>
</div>
<p class="ot-consent-register">Already a subscriber? <a class="vodl-login" tabindex="0">Sign up here.</a>.</p>
</div>
</div>
<div class="ot-consent-tracking-description">
<p>
<strong>Tracking:</strong> We and our partners process personal data by using information stored on your device (e.g. unique identifiers in cookies) to create a usage profile, e.g. to personalize advertisements. Processing purposes: Exact location data and query of device properties for identification, saving and / or retrieving information on a device, personalized ads and content, ad and content measurements, knowledge of target groups and product developments.
</p>
</div>
<div class="ot-consent-footer">
<a href="Site link" tabindex="0" target="_blank">Imprint</a>
<a href="email" tabindex="0">Contact</a>
<a href="Site Link" tabindex="0" target="_blank">Data Protection</a>
</div>

      German

      CODE 
      <div class="ot-consent-header">
<h2 class="ot-header-h2">Wie wollen sie SITE nutzen?</h2>
</div>
<div class="ot-consent-body">
<div class="ot-consent-section-left">
<h3 class="ot-section-h3">SITE mit Werbung</h3>
<p>Besuchen Sie SITE wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.</p>
<div class="ot-btn">
<button class="ot-accept-btn" onclick="OneTrust.AllowAll()">EINVERSTANDEN</button>
</div>
<p class="ot-consent-register">
Details im <a href="#" onclick="OneTrust.ToggleInfoDisplay()" tabindex="0">Privacy Center</a> und in der <a tabindex="0" class="ot-link-btn onetrust-vendors-list-handler">Liste unserer Partner</a>. Ein Widerruf ist möglich in der <a href="SITE" tabindex="0" target="_blank">Datenschutzerklärung.</a>
</p>
</div>
<div class="ot-consent-section-right">
<h3 class="ot-section-h3">SITE Pur</h3>
<p>Nutzen Sie SITE mit weniger Werbung und ohne Werbetracking für 1,20 €/Woche (für Digital-Abonnenten nur 0,40 €/Woche).</p>
<div class="ot-btn">
<a href="SITE" role="button" class="ot-more-btn" tabindex="0">JETZT ABONNIEREN</a>
</div>
<p class="ot-consent-register">Bereits Pur-Abonnent? <a class="vodl-login" tabindex="0">Hier anmelden</a>.</p>
</div>
</div>
<div class="ot-consent-tracking-description">
<p>
<strong>Tracking:</strong> Wir und unsere Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z.B. eindeutige Kennungen in Cookies) ein Nutzungprofil erstellen, um z.B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.
</p>
</div>
<div class="ot-consent-footer">
<a href="SITE" tabindex="0" target="_blank">Impressum</a>
<a href="EMAIL" tabindex="0">Kontakt</a>
<a href="SITE" tabindex="0" target="_blank">Datenschutz</a>
</div>

    4. Click the Save button.

    Button Set

    1. Select the Edit icon next to Button Set. The Button Set modal appears.

    2. Disable the Show Close Button setting.

    3. Configure the rest of your button set as desired.

    4. Click the Save button.

    Behavior

    Enable the Require Banner Interaction setting.
  3. Go to the Preference Center tab.
  4. Configure the Preference Center as follows:

    Section

    Directions

    Styling

    1. Enable the Override Banner Styling setting.

    2. Configure the colors as desired.

    3. In the Custom CSS field, insert your CSS.

      Tip:

      You can reference and modify the example below for quick implementation:

      JSON 
      #ot-back-arw path {
    fill: #555555;
}

#ot-back-arw svg path:focus {
    fill: #555555;
}

#onetrust-pc-sdk .ot-ven-item .ot-ven-hdr h3 {
    font-size: 14px;
}

#onetrust-pc-sdk .ot-ven-hdr .ot-ven-link {
    font-size: 13px;
    padding-top: 0px;
}

#onetrust-pc-sdk .ot-acc-txt .ot-ven-dets p {
    font-size: 13px;
}

#onetrust-pc-sdk #accept-recommended-btn-handler, #onetrust-pc-sdk .save-preference-btn-handler {
	position: absolute;
    opacity: 0;
    height: 0;
    top: -1000px;
}

#onetrust-pc-sdk .ot-pc-footer-logo {
    background: none !important;
}

#onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-remove-objection-handler {
    color: #000000 !important;
}

#onetrust-pc-sdk .ot-tgl,
#onetrust-pc-sdk .ot-accordion-layout h4~.ot-tgl,
#onetrust-pc-sdk .ot-accordion-layout h4~.ot-always-active,
#onetrust-pc-sdk #ot-lst-cnt .ot-chkbox {
    display: none !important;
}

    Content
    Button Set

    1. Select the Edit icon next to Button Set. The Button Set modal appears.

    2. Enable the Show Close Button setting.

    3. Configure the rest of your button set as desired.

    4. Click the Save button.

    Vendor List

    1. Select the Edit icon next to Vendor List. The Vendor List modal appears.

    2. Enable the Show Google's Additional Vendors setting.

      Note:

      This step is necessary only if Google Additional Consent is required.

    3. Configure the rest of your vendor list as desired.

    4. Click the Save button.

    Advanced Configuration

    Disable the Allow Legitimate Interest setting.
  5. Create a new geolocation rule group. For more information, see Configuring Geolocation Rules.Configuring Geolocation Rules
  6. On the Geolocation Rule Group Details screen, click the Edit icon in the rule header.
  7. Enable the Capture Records of Consent setting.


  8. Configure the rest of your rule group as needed.
  9. Click the Save button.
  10. Go to the Assigned Domains tab.
  11. Click the Assign to Domains button. The Assign to Domains modal appears.

  12. Make your selections.
  13. Click the Save button.
  14. Publish your test script. For more information, see Publishing and Implementing Cookie Consent Scripts.
  15. When finished, publish your production script. For more information, see Publishing and Implementing Cookie Consent Scripts.