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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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 = {
                "countryDetection": true, //rileva automaticamente il paese dell'utente
                "invalidateConsentWithoutLog": true, //richiedi un nuovo consenso quando la preferenza non viene trovata
                "lang": "it", //lingua
                "siteId": 896537, //usa il tuo siteId
                "cookiePolicyId": 8207467, //usa il tuo cookiePolicyId
                "whitelabel": false, //lascia il riferimento a iubenda sul secondo livello del banner
                "consentOnContinuedBrowsing": false, //evita di raccogliere il consenso tramite scroll della pagina o interazione di alcun genere con essa
                "floatingPreferencesButtonDisplay": "bottom-right", //widget privacy
                "perPurposeConsent": true, // consenso per categoria
                "banner": {
                    "position": "float-top-center",
                    "acceptButtonDisplay": true, //mostra il pulsante "Accetta"
                    "customizeButtonDisplay": true, //mostra il pulsante "Scopri di più e personalizza"
                    "rejectButtonDisplay": true, //mostra il pulsante "Rifiuta"
                    "closeButtonDisplay": true, //mostra la x di chiusura 
                    "closeButtonRejects": true, //fa equivalere la x a "Rifiuta" 
                    "listPurposes": true, //elenca le finalità di trattamento nel banner
                    "explicitWithdrawal": true //menziona il diritto di revocare il consenso
                }
            };
    </script>
    <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>Come rispettare le nuove regole del Garante</p>
        </div>
    </header>

    <section class="wrapper">

        <p>Questo è un esempio di configurazione della Cookie Solution in linea con le nuove regole del Garante (in vigore dal <strong>10 gennaio 2022</strong>).</p> 
      
        <div class="note">
            <p>Note su questa demo:</p>
            <ul>
                <li>Puoi vedere il <a href="https://codepen.io/iubenda/pen/vYeXXZN?editors=1000" target="_blank">codice qui</a></li>
                <li>Usa i <code>siteId</code> e <code>cookiePolicyId</code> che trovi nella <a href="https://www.iubenda.com/it/dashboard" target="_blank">tua dashboard</a>, non copiare quelli usati per questa demo.</li>
                <li>Si tratta di un esempio a puro scopo illustrativo, <strong>nessun consenso viene salvato</strong> (risultato di <code>_iub.csConfiguration.skipSaveConsent = true</code>). Ricarica la pagina per far riapparire il cookie banner.</li>
                <li><strong>Se alla prima visita non ti viene mostrato il cookie banner</strong>, potresti aver salvato il consenso in un'altra demo: <a href="#" onclick="_iub.cs.cookie.resetCookies({local: true,remote: true});alert('Cookie di consenso rimosso. Fai click su OK e ricarica la pagina per tornare alla situazione iniziale.')">resetta il consenso</a> e ricarica la pagina per far apparire il cookie banner.</li>
            </ul>
        </div>
      
        <p>Ecco cosa devi fare per rispettare le nuove linee guida del Garante:</p> 
      
        <ul class="guides">
          <li>Mostra i <strong>pulsanti "Accetta", "Scopri di più e personalizza" e "Rifiuta"</strong> (o una "x" per permettere all'utente di continuare senza accettare e chiudere il banner). "Accetta" e "Rifiuta" devono avere uguali enfasi, dimensioni e colori.</li>
          <li>Elenca le <strong>finalità di trattamento</strong> nel banner</li>
          <li>Menziona esplicitamente il <strong>diritto di revocare il consenso</strong></li>
          <li>Abilita il <strong>consenso per categoria</strong> (maggiori informazioni <a href="#consenso-per-categoria">qui in basso</a>)</li>
          <li>Disabilita il <strong>consenso al proseguimento della navigazione</strong> (il consenso allo scorrimento e all'interazione con la pagina non sono più validi)</li>
          <li>Attiva il <strong>widget privacy</strong> per permettere agli utenti di aggiornare le preferenze di consenso espresse in precedenza (per vederlo in azione in questa demo, chiudi il cookie banner e il widget apparirà nell'angolo in basso a destra)</li>
          <li>Attiva il <strong>Registro Preferenze Cookie</strong> (maggiori informazioni <a href="#registro-preferenze-cookie">qui in basso</a>)</li>
        </ul>
      
        <hr />
      
        <h3>Configuratore</h3>
       
        <p>Nota le opzioni spuntate nel configuratore della Cookie Solution:</p>
      
        <img src="https://help.iubenda.com/wp-content/uploads/2021/12/cs-garante.png" alt="Configuratore della Cookie Solution" width="480" />
      
        <p>Il widget privacy è personalizzabile cliccando sulla dropdown "Posizione".</p>
      
        <p>Inoltre:</p>
      
        <ul class="guides">
          <li>Se mostri pubblicità sui tuoi siti e quindi utilizzi il Transparency and Consent Framework (TCF) di IAB, disabilita il <strong>legittimo interesse</strong>. Per farlo, scorri le "Opzioni avanzate" fino a "IAB Transparency and Consent Framework". In "Limita finalità" assicurati di scegliere "Solo consenso".</li>
          <li>Se hai modificato la <strong>durata del cookie di preferenza</strong>, assicurati che sia impostata su almeno 6 mesi (il valore predefinito della Cookie Solution è di 12 mesi). Trovi la voce "Validità delle preferenze dell'utente relative al consenso" nelle "Opzioni avanzate".</li>
          <li>Se il tuo sito consente la navigazione solo a patto di accettare i cookie (c.d. <strong>Cookie Wall</strong>), disabilita questa funzione che non è considerata lecita dal Garante.</li>
        </ul>
      
        <hr />
      
        <h3>Integrazione</h3>
        <p>Una volta salvate le impostazioni, copia il codice di integrazione della Cookie Solution e incollalo in tutte le pagine del tuo sito (sostituendo - se presente - il codice di integrazione precedente).</p>
      
        <p>Se invece usi il nostro plugin per WordPress, Joomla!, PrestaShop o Magento, dovrai sostituire il codice della Cookie Solution che troverai nel pannello di configurazione del plugin.</p>
      
        <hr />
      
        <h3 id="registro-preferenze-cookie">Registro Preferenze Cookie</h3>
      
        <p>Le nuove linee guida del Garante Privacy richiedono di documentare le preferenze all'uso dei cookie, così da poter dimostrare di aver ottenuto un consenso valido secondo gli standard del GDPR.</p>
      
        <p>Il registro è disponibile nella tua dashboard:</p>
      
        <img src="https://help.iubenda.com/wp-content/uploads/2021/12/cs-dashboard-registro.png" alt="Registro Preferenze Cookie" width="600" />
      
        <p>Se non riesci ad accedervi, devi attivarlo. Per attivarlo, <a href="https://www.iubenda.com/it/help/45677">fai l'upgrade del tuo piano Cookie Solution</a>.</p>
      
        <p>In aggiunta, assicurati di <strong>chiedere un nuovo consenso quando la preferenza non viene trovata</strong> (opzione disponibile nelle "Opzioni avanzate" del configuratore):</p>
        
        <img src="https://help.iubenda.com/wp-content/uploads/2021/12/cs-garante-invalidateConsentWithoutLog.png" alt="invalidateConsentWithoutLog" width="480" />  
          
        <p>Nel codice di integrazione avrai:</p> 
      
        <p><code>"invalidateConsentWithoutLog": true</code></p>
      
        <p>Qualora ne avessi bisogno, le opzioni avanzate ti permettono di scegliere una data specifica.</p>
      
        <hr />
      
        <h3 id="consenso-per-categoria">Consenso per categoria e blocco manuale dei cookie</h3>

        <p>Grazie al consenso per categoria puoi offrire agli utenti la possibilità di scegliere a quali categorie di cookie acconsentire:</p>

        <ul>
            <li>Strettamente necessari (id 1, non è richiesto il consenso)</li>
            <li>Interazioni e funzionalità semplici (id 2)</li>
            <li>Miglioramento dell'esperienza (id 3)</li>
            <li>Misurazione (id 4)</li>
            <li>Targeting e pubblicità (id 5)</li>
          </ul>

        <p>Le categorie da mostrare nella modale vengono rilevate automaticamente dalla cookie policy di iubenda, ma possono essere <a href="https://codepen.io/iubenda/pen/vYEawjO/left?editors=1000" target="_blank">personalizzate</a>.</p>

        <div class="tip">
            <p>💡 Fai click sul pulsante "Scopri di più e personalizza" per vedere questa funzionalità in azione. Presta il consenso alla categoria "Miglioramento dell'esperienza" per rilasciare lo script di Twitter incluso qui sotto.</p>
        </div>
      
        <p>Per mostrare come funzionano il consenso per categoria e il blocco dei cookie, abbiamo incorporato il pulsante follow di Twitter:</p>

        <!-- nota type="text/plain" class="_iub_cs_activate" data-suppressedsrc="..." (tagging manuale) e data-iub-purposes="3" (consenso per categoria) -->
        <a href="https://twitter.com/iubenda" class="twitter-follow-button" data-show-count="true" data-size="large">Segui @iubenda</a>
        <script async type="text/plain" class="_iub_cs_activate" data-suppressedsrc="https://platform.twitter.com/widgets.js" data-iub-purposes="3" charset="utf-8"></script>

        <p>Non potendo sfruttare su CodePen il plugin della Cookie Solution per WordPress, Joomla!, PrestaShop o Magento (che blocca automaticamente gli script più popolari), abbiamo bloccato lo script tramite tagging manuale, uno dei <a href="https://www.iubenda.com/it/help/1627" target="_blank">metodi previsti</a> dalla Cookie Solution.</p> 
      
        <p>Come puoi vedere dalla cookie policy generata, il pulsante di Twitter appartiene alla categoria <strong>Miglioramento dell'esperienza</strong> (id <code>3</code>). Abbiamo aggiunto <code>data-iub-purposes="3"</code> al relativo script, così che la Cookie Solution possa identificarlo correttamente.</p>

        <p>Fai click sul pulsante <strong>Accetta</strong> - o attiva la sola categoria "Miglioramento dell'esperienza" - per prestare il consenso e rilasciare lo script di Twitter (ricaricando la pagina tornerai alla situazione iniziale).</p>

        <div class="tip">
            <p>💡 Leggi la nostra <a href="https://www.iubenda.com/it/help/623#consenso-per-categoria" target="_blank">guida avanzata</a> per maggiori informazioni sul <strong>consenso per categoria</strong> (incluso il blocco dei cookie tramite tagging manuale, Google Tag Manager o il nostro plugin per WordPress).</p>
        </div>
      
        <hr />

        <h3>Per saperne di più</h3>
        
        <ul class="guides">
    <li>Le </span><a href="https://www.iubenda.com/it/help/31253">nuove linee guida del Garante Privacy</a> (e come adeguarsi), riassunte anche in una <a href="https://www.iubenda.com/it/help/49690">pratica checklist</a></li>
    <li><a href="https://www.iubenda.com/it/help/680">Introduzione alla Cookie Solution</a> – Tutto ciò di cui hai bisogno per adeguarti: <ul>
            <li><a href="https://www.iubenda.com/it/help/1696">cookie banner</a></li>
            <li><a href="https://www.iubenda.com/it/help/1627">blocco preventivo</a></li>
            <li><a href="https://www.iubenda.com/it/help/45677">registro preferenze cookie</a></li>
        </ul>
    </li>
</ul>
    </section>

</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                //non copiare questo JS (solo per scopi dimostrativi)

_iub.csConfiguration.skipSaveConsent = true; //non salvare il consenso, mostra sempre il banner
              
            
!
999px

Console