Come creare codice personalizzato per le pagine di consenso

Tempo di lettura stimato 5 minuti

Ultimo aggiornamento: 5 ago 2025, 00:00 EST

Cosa imparerai

Scopri come abilitare e usare la funzionalità delle pagine ospitate di Klaviyo, che ti consente di creare codice personalizzato per le tue pagine delle preferenze, pagine di iscrizione e pagine per annullare l'iscrizione.

Questo articolo è rivolto agli sviluppatori; al momento Klaviyo non offre servizi per aiutarti a sviluppare codice personalizzato, né fornisce assistenza per la risoluzione dei problemi del codice personalizzato. Per saperne di più sulle nostre pagine di consenso dell’app integrate, vai al nostro articolo sui Primi passi con le pagine di consenso.

Prima di iniziare

Prima di configurare una pagina ospitata, abilita questa funzionalità:

Vai su Impostazioni > Altro.
Scegli Pagine di consenso dal menu a discesa.
In Pagine ospitate personalizzate, attiva l'interruttore per Usare un dominio dedicato personalizzato per le pagine ospitate.

Tieni presente che solo gli account con un piano a pagamento che hanno superato la verifica dell’account hanno accesso a questa impostazione.

Crea una pagina di consenso personalizzata

Vai su Impostazioni > Altro.
Fai clic su Pagine ospitate.
Accanto a Pagine, fai clic sul simbolo + per aggiungere una nuova pagina.
Assegna un nome a questa pagina (ad esempio unsubscribe.tmpl); potrai usarlo per qualsiasi pagina di consenso, ma puoi creare più di 1 pagina se vuoi.

I nomi delle pagine ospitate non possono contenere spazi, perché causano un errore. Evita gli spazi o usa i caratteri di sottolineatura per separare i titoli.

Progetta una pagina HTML che includa i campi e le funzionalità che preferisci. Esempi di campi che puoi inserire per una pagina di consenso personalizzata includono:
- Opzioni per la frequenza delle e-mail:
  - Un'opzione per annullare l'iscrizione
  - Un’opzione per ricevere tutti gli e-mail
  - Opzioni di frequenza per newsletter giornaliere, settimanali, mensili, ecc.
- Informazioni che puoi usare per indirizzare e segmentare:
  - Una casella di controllo per indicare se l’utente vuole o meno gli annunci di saldi
  - Una casella di controllo per indicare se l’utente vuole annunci sui prodotti
  - Una casella di controllo che indica se l’utente desidera ricevere aggiornamenti del blog
  - Altre liste a cui l'utente potrebbe voler iscriversi

Esempio di codice HTML per una pagina di consenso

Puoi usare questo codice nel tuo unsubscribe.tmpl per ottenere pagine di consenso completamente funzionali con preferenze per tipo di e-mail e frequenza:

{% if form.non_field_errors %}

{% for error in form.non_field_errors %} {{ error }}{% if not forloop.last %}
{% endif %} {% endfor %}

{% endif %}

Email Address*

{% if form.errors|lookup:'$email' %}

{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}

{% endif %}

First Name

Last Name

Interests

New Product Releases

Promotions & Sales

Latest from the Blog

Events

How often would you like to hear from us?

Twice per Week

Once per Week

Once per Month

Unsubscribe me from all emails.

" data-astro-cid-mnja5ucx style="--bg: #2d2d30;--headerBg: #1e1e1e;--border: #3e3e3e;--filenameText: #cccccc;">

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <style type="text/css">
        /* Space out content a bit */
        body {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        form {
            margin-bottom: 18px;
        }

        /* Custom page header */
        .header {
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 10px;
        }

        .header h1 {
            margin: 10px 0;
        }

        .required-fields {
            text-align: right;
        }

        .required-fields span {
            color: #a94442;
            font-weight: bold;
        }

        .list-group-item label {
            font-weight: normal;
            margin-top: 17px;
        }

        .list-group-item label input[type="checkbox"] {
            margin-right: 4px;
        }

        .form-group span.required {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 20px;
            color: #a94442;
            font-weight: bold;
            user-select: none;
        }

        label.error {
            color: #a94442;
            font-weight: bold;
            margin-top: 4px;
        }

        .form-actions {
            margin: 25px 0;
        }

        .form-control+.form-control {
            margin-top: 6px;
        }

        .panel-group .panel-title .closed-icon,
        .panel-group .panel-title .open-icon {
            margin-right: 0.5em;
            top: 2px;
        }

        .panel-group .panel-title a:hover,
        .panel-group .panel-title a:active {
            text-decoration: none;
        }

        .panel-group .panel-title a:hover .text,
        .panel-group .panel-title a:active .text {
            text-decoration: underline;
        }

        .panel-group .panel-title .closed-icon {
            display: none;
        }

        .panel-group.closed .panel-title .open-icon {
            display: none;
        }

        .panel-group.closed .panel-title .closed-icon {
            display: inline;
        }

        /* Custom page footer */
        .footer {
            padding-top: 18px;
            border-top: 1px solid #e5e5e5;
        }

        /* Customize container */
        @media (min-width: 768px) {
            .container {
                max-width: 730px;
            }
        }
    </style>
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <div class="container">
         <div class="header">
            <img src="http://via.placeholder.com/300x75" />
            <h1>Email Preferences</h1>
         </div>
         <form action="" id="preferences_form" method="POST" role="form" class="form-horizontal">
            {% if form.non_field_errors %}
            <div class="alert alert-danger">
               {% for error in form.non_field_errors %}
               {{ error }}{% if not forloop.last %}<br />{% endif %}
               {% endfor %}
            </div>
            {% endif %}
            <input type="hidden" name="$fields" value="EmailInterests,EmailFrequency" />
            <input type="hidden" name="$list_fields" value="EmailInterests" />
            <!-- <input type="hidden" name="$unsubscribed_url" value="/p/preferences_updated" /> -->
            <!-- <input type="hidden" name="$updated_profile_url" value="/p/preferences_updated" /> -->
            <!--<p class="required-fields">
               <span>*</span> Required Information
               </p>-->
            <div class="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}">
               <label for="email" class="col-sm-3 control-label">Email Address<span class="required">*</span></label>
               <div class="col-sm-9">
                  <input type="email" class="form-control" id="email" name="$email" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$email' }}{% else %}{{ person.email|default:'' }}{% endif %}" />
                  {% if form.errors|lookup:'$email' %}
                  <p class="help-block">{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}</p>
                  {% endif %}
               </div>
            </div>
            <div class="form-group">
               <label for="first_name" class="col-sm-3 control-label">First Name</label>
               <div class="col-sm-9">
                  <input type="text" class="form-control" id="first_name" name="$first_name" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$first_name' }}{% else %}{{ person.first_name|default:'' }}{% endif %}" />
               </div>
            </div>
            <div class="form-group">
               <label for="last_name" class="col-sm-3 control-label">Last Name</label>
               <div class="col-sm-9">
                  <input type="text" class="form-control" id="last_name" name="$last_name" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$last_name' }}{% else %}{{ person.last_name|default:'' }}{% endif %}" />
               </div>
            </div>
            <div class="form-group">
               <label for="interests" class="col-sm-3 control-label">Interests</label>
               <div class="col-sm-9">
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="EmailInterests" value="New Releases" {% if 'New Releases' in person.EmailInterests or 'New Releases' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     New Product Releases
                     </label>
                  </div>
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="EmailInterests" value="Promotions" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     Promotions & Sales
                     </label>
                  </div>
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="EmailInterests" value="Blog" {% if 'Blog' in person.EmailInterests or 'Blog' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     Latest from the Blog
                     </label>
                  </div>
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="EmailInterests" value="Events" {% if 'Events' in person.EmailInterests or 'Events' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     Events
                     </label>
                  </div>
               </div>
            </div>
            <div class="form-group">
               <label for="interests" class="col-sm-3 control-label">How often would you like to hear from us?</label>
               <div class="col-sm-9">
                  <div class="radio">
                     <label>
                        <!-- Default value. -->
                        <input type="radio" name="EmailFrequency" id="email_frequency_0" value="All" {% if person.EmailFrequency == 'All' or request.POST.EmailFrequency == 'All' %}checked="checked"{% elif not person.EmailFrequency and not request.POST.EmailFrequency %}checked="checked"{% endif %} />
                        Twice per Week
                     </label>
                  </div>
                  <div class="radio">
                     <label>
                     <input type="radio" name="EmailFrequency" id="email_frequency_1" value="Weekly" {% if person.EmailFrequency == 'Weekly' or request.POST.EmailFrequency == 'Weekly' %}checked="checked"{% endif %} />
                     Once per Week
                     </label>
                  </div>
                  <div class="radio">
                     <label>
                     <input type="radio" name="EmailFrequency" id="email_frequency_2" value="Monthly" {% if person.EmailFrequency == 'Monthly' or request.POST.EmailFrequency == 'Monthly' %}checked="checked"{% endif %} />
                     Once per Month
                     </label>
                  </div>
               </div>
            </div>
            <div class="checkbox">
               <label>
               <input type="checkbox" name="$unsubscribe" value="true" />
               <span class="text">Unsubscribe me from all emails.</span>
               </label>
            </div>
            <div class="clearfix form-actions">
               <div class="pull-right">
                  <button type="submit" class="btn btn-default btn-primary">Update Preferences</button>
               </div>
            </div>
         </form>
         <footer class="footer">
            <p>
               © 2017 Company Name — <a href="https://www.klaviyo.com" target="_blank">Privacy Policy</a>
            </p>
         </footer>
      </div>
      <!-- /container -->
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
      <script>
        $(function() {
            $('#preferences_form').validate({
                rules: {
                    $email: {
                        required: true
                    }
                },
                messages: {
                    $email: 'Please enter your email address.',
                    $first_name: 'Please enter your first name.',
                    $last_name: 'Please enter your last name.'
                }
            });
            // Toggle validation based on selection.
            $('input[name="$unsubscribe"]').on('change', function() {
                $('form .form-actions button[type="submit"]').toggleClass('cancel', $(this).is(':checked'));
            });
        });
        $('input[name="$unsubscribe"]').on('change', function(){
          $('input[type=checkbox]').not(this).prop('checked', false);
        });
        $('input[type=checkbox]').not('input[name="$unsubscribe"]').on('change', function(){
          $('input[name="$unsubscribe"]').prop('checked', false);
        });
    </script>
   </body>
</html>

Imposta il reindirizzamento di una pagina ospitata dopo l’invio (facoltativo)

Per impostazione predefinita, dopo l’invio riuscito di una pagina ospitata (ad esempio una pagina delle preferenze ospitata), l’utente viene reindirizzato a 1 di 2 destinazioni:

Se ha richiesto di annullare l’iscrizione, verrà inviato alla pagina predefinita di conferma dell’annullamento dell’iscrizione dell’account.
Se hanno aggiornato il loro profilo (o hanno fatto qualsiasi cosa che non sia una richiesta di annullare l'iscrizione), l'utente verrà inviato alla pagina di conferma delle preferenze (operazione riuscita) predefinita del tuo account.

Se hai utilizzato l'HTML di esempio sopra, questo si riflette in <body> come:

<!-- <input type="hidden" name="$unsubscribed_url" value="/p/preferences_updated" /> --><!-- <input type="hidden" name="$updated_profile_url" value="/p/preferences_updated" /> -->

Per personalizzare dove viene reindirizzata una persona dopo l'invio della pagina ospitata, modifica le righe value="..." inserendo gli URL che preferisci all'interno dell'HTML.

Aggiungi risorse personalizzate alle pagine ospitate (facoltativo)

Se vuoi usare il tuo file CSS, il tuo file JS o le tue immagini nella tua pagina ospitata, caricali facendo clic sul simbolo + accanto a Risorse e fai riferimento a questi elementi nel codice sorgente della pagina.

Usa il seguente tag per fare riferimento a una risorsa che hai caricato nel tuo account Klaviyo: {% asset_url 'style.css' %}

Utilizzo delle pagine di consenso personalizzate

Puoi sostituire ciascuna delle pagine di consenso predefinite del tuo account con pagine con codice personalizzato, in modo che tutti gli e-mail utilizzino queste pagine personalizzate per impostazione predefinita. In alternativa, puoi configurare solo 1 elenco specifico in modo che utilizzi pagine con codice personalizzato, così solo gli e-mail inviati a quell'elenco utilizzeranno le pagine personalizzate.

Se hai personalizzato le pagine di consenso per un elenco specifico, qualsiasi e-mail inviata a quell'elenco userà quelle pagine di consenso uniche.
Tutte le liste per cui non hai personalizzato pagine di consenso univoche useranno le pagine di consenso predefinite del tuo account. Inoltre, qualsiasi e-mail che NON viene inviata a una lista specifica, incluse le e-mail del flusso attivate da una metrica, le campagne inviate a un segmento o le e-mail personali, utilizzerà anche le pagine di consenso predefinite.

Cambia le pagine del consenso predefinite in pagine ospitate

Se vuoi sostituire 1 o più pagine di consenso predefinite dell'account (ad esempio, la pagina delle preferenze, la pagina iscriviti o la pagina di annullare l'iscrizione alle e-mail) con pagine con codice personalizzato, segui questi passaggi:

Clicca sul nome della tua azienda nell'angolo in basso a sinistra di Klaviyo.
Seleziona Impostazioni.

Seleziona Altro in alto.
Clicca sul menu a discesa con i 3 puntini nella pagina di consenso che intendi sostituire e seleziona Usa pagina ospitata.

Nella finestra di dialogo che viene visualizzata, seleziona il file della tua pagina personalizzata e clicca su Salva.

Se vuoi usare una pagina personalizzata per le e-mail del flusso o per le campagne inviate a un segmento, dovrai sostituire le pagine di consenso predefinite dell’account in modo che usino le pagine personalizzate. Segui la stessa procedura descritta sopra per sostituire le pagine di consenso predefinite con pagine con codice personalizzato.

Usa pagine di consenso personalizzate per un elenco

Dovrai configurare ogni singola lista per cui vuoi usare una pagina personalizzata invece delle pagine di consenso predefinite.

Vai all’elenco che vuoi collegare a una pagina personalizzata.
Fai clic sulla scheda Pagine di iscrizione e preferenze per vedere tutte le pagine di consenso modificabili per quella lista.
Nella pagina di consenso che vuoi sostituire con una pagina personalizzata, fai clic sul menu a discesa con i 3 puntini e seleziona Usa pagina ospitata.

Nota che puoi scegliere di usare una pagina ospitata per tutte le pagine di consenso, se vuoi.

Nella finestra di dialogo che viene visualizzata, seleziona il file della tua pagina personalizzata e clicca su Salva.

Nelle tue e-mail, dovresti comunque utilizzare i tag standard di Klaviyo per annullare l'iscrizione e gestire le preferenze (ad es. {% unsubscribe %} e {% manage_preferences %}). Questi tag verranno compilati come link nelle tue e-mail live e porteranno automaticamente i destinatari alle tue pagine personalizzate.

FAQ sulle pagine ospitate

Devo aggiungere JavaScript alla mia pagina perché questo modulo venga inviato correttamente?
Poiché i tuoi moduli personalizzati saranno contenuti all’interno di una pagina ospitata, non devi aggiungere JavaScript aggiuntivo né un URL di azione al <form> per far sì che venga inviato correttamente. Finché una pagina ospitata viene visitata da un’e-mail inviata tramite Klaviyo, verrà automaticamente collegata al contatto corretto.

Questa pagina deve essere in HTML?
Questa pagina deve essere in HTML. Puoi includere immagini aggiuntive, fogli di stile e altro ancora, collegandoli oppure aggiungendo una cartella di file inclusi.

Klaviyo può aiutarmi a creare una pagina personalizzata?
Al momento Klaviyo non offre servizi per creare codice personalizzato e non forniamo assistenza per la risoluzione dei problemi del codice personalizzato. La funzionalità Pagine ospitate è pensata per offrire una tela bianca a sviluppatori o marketer esperti di codice.

Scopri di più sulle funzionalità di personalizzazione con le pagine di consenso integrate di Klaviyo in Primi passi con le pagine di consenso.

Risorse aggiuntive

Come personalizzare la pagina di annullare l'iscrizione di un elenco
Scopri come personalizzare una pagina per annullare l'iscrizione per un elenco Klaviyo specifico, ovvero la pagina in cui i tuoi iscritti possono annullare l'iscrizione alla ricezione del tuo marketing.
Riferimento ai moduli d'iscrizione e alle pagine di iscrizione
Scopri come usare gli strumenti di crescita delle liste di Klaviyo, inclusi vari tipi di moduli d'iscrizione e pagine di iscrizione, oppure un'integrazione di terze parti per raccogliere e coinvolgere nuovi iscritti.
Comprendere le pagine ospitate personalizzate in Klaviyo
Scopri le pagine con hosting personalizzato in Klaviyo, inclusi cosa sono e cosa possono fare.

Questo articolo è stato utile?

Usa questo modulo solo per il feedback sull'articolo. Scopri come contattare l'assistenza.

Esplora altri contenuti di Klaviyo

Community

Entra in contatto con altre aziende simili, partner ed esperti di Klaviyo per trovare ispirazione, condividere approfondimenti e ottenere risposte a tutte le tue domande.

Visita la Community

Partner

Assumi un esperto certificato Klaviyo per aiutarti con un compito specifico o per la gestione continua del marketing.

Assumi un partner

Assistenza

Accedi all'assistenza tramite il tuo account.

Assistenza via e-mail (prova gratuita e account a pagamento) Disponibile 24 ore su 24, 7 giorni su 7

Chat/assistente virtuale
La disponibilità può variare in base alla località e al tipo di piano

Accedi