Hoe je consentpagina's kunt coderen met aangepaste code

Ongeveer 5 minuten lezen

Bijgewerkt 5 aug 2025, 00:00 EST

Wat je leert

Leer hoe je de functie voor door Klaviyo gehoste pagina's inschakelt en gebruikt. Hiermee kun je met aangepaste code je eigen voorkeurs-, aanmeld- en afmeldpagina's maken.

Dit artikel is bedoeld voor ontwikkelaars; Klaviyo biedt momenteel geen services om aangepaste code te helpen bouwen en we bieden ook geen ondersteuning voor het oplossen van problemen met aangepaste code. Ga voor meer informatie over onze ingebouwde app-toestemmingspagina's naar ons artikel over Aan de slag met toestemmingspagina's.

Voordat je van start gaat

Voordat je een gehoste pagina configureert, schakel je deze functies in:

Navigeer naar Instellingen > Overige.
Kies Toestemmingspagina's in de vervolgkeuzelijst.
Schakel onder Custom hosted pages de schakelaar in voor Use custom dedicated domain for hosted pages.

Let op: alleen accounts met een betaald abonnement die account verification hebben doorlopen, hebben toegang tot deze instelling.

Een aangepaste toestemmingspagina maken

Ga naar Instellingen > Overige.
Klik op Gehoste pagina's.
Naast Pagina's klik je op het symbool + om een nieuwe pagina toe te voegen.
Geef deze pagina een naam (bijv. afmelden.tmpl); je kunt dit gebruiken voor al je toestemmingspagina's, maar je kunt meer dan 1 pagina maken als je wilt.

Namen van gehoste pagina's kunnen geen spaties bevatten, omdat dit tot een fout leidt. Vermijd spaties of gebruik underscores om titels op te delen.

Ontwerp een HTML-pagina met de velden en functies van jouw keuze. Voorbeeldvelden die je kunt invoegen voor een aangepaste toestemmingspagina zijn onder andere:
- Keuzes voor e-mailfrequentie:
  - Een optie om je af te melden
  - Een optie om alle e-mails te ontvangen
  - Frequentieopties voor dagelijkse, wekelijkse, maandelijkse enz. nieuwsbrieven
- Informatie die je kunt gebruiken om te targeten en te segmenteren:
  - Een selectievakje waarmee je aangeeft of de gebruiker wel of geen sale-aankondigingen wil ontvangen
  - Een selectievakje voor of de gebruiker productaankondigingen wil
  - Een selectievakje om aan te geven of de gebruiker blogupdates wil ontvangen
  - Andere lijsten waar de gebruiker mogelijk aan wil deelnemen

Voorbeeld van HTML-code voor een toestemmingspagina

Je kunt deze code gebruiken in je afmelden.tmpl om volledig werkende toestemmingspagina's te krijgen met e-mailtype- en frequentievoorkeuren:

{% 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>

Stel na het verzenden een omleiding voor een gehoste pagina in (optioneel)

Standaard wordt de gebruiker, nadat een gehoste pagina (bijv. een gehoste voorkeurenpagina) succesvol is ingediend, doorgestuurd naar 1 van 2 plekken:

Als ze een verzoek hebben ingediend om zich af te melden, worden ze naar de standaard afmeldbevestigingspagina van je account gestuurd.
Als ze hun profiel hebben bijgewerkt (of iets hebben gedaan dat geen afmeldingsverzoek is), wordt de gebruiker doorgestuurd naar de standaardpagina voor bevestiging van voorkeuren (succes) van je account.

Als je de bovenstaande voorbeeld-HTML hebt gebruikt, zie je dit terug in de <body> als:

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

Als je wilt aanpassen waar iemand na het indienen van je gehoste pagina naartoe wordt doorgestuurd, pas je de regels value="..." aan naar je gewenste URL('s) binnen de HTML.

Voeg aangepaste assets toe aan gehoste pagina's (optioneel)

Als je je eigen CSS-bestand, JS-bestand of afbeeldingen op je gehoste pagina wilt gebruiken, upload je deze door op het + -symbool naast Assets te klikken en verwijs je ernaar in de broncode van de pagina.

Gebruik de volgende tag om te verwijzen naar een asset die je naar je Klaviyo-account hebt geüpload: {% asset_url 'style.css' %}

De aangepaste toestemmingspagina's gebruiken

Je kunt de standaard toestemmingspagina’s van je account vervangen door pagina’s met aangepaste code, zodat alle e-mails deze aangepaste pagina’s standaard gebruiken. Je kunt ook instellen dat slechts 1 specifieke lijst pagina’s met aangepaste code gebruikt, zodat alleen e-mails die naar die lijst worden verzonden de aangepaste pagina’s gebruiken.

Als je aangepaste toestemmingspagina's hebt voor een specifieke lijst, gebruiken alle e-mails die naar die lijst worden verzonden die unieke toestemmingspagina's.
Alle lijsten waarvoor je geen unieke toestemmingspagina's hebt aangepast, gebruiken de standaard toestemmingspagina's van je account. Daarnaast gebruikt elke e-mail die NIET naar een specifieke lijst wordt verzonden, waaronder meetwaarde-getriggerde flow-e-mails, campagnes die naar een segment worden verzonden of persoonlijke e-mails, ook je standaard toestemmingspagina's.

Standaard toestemmingspagina's wijzigen in gehoste pagina's

Als je 1 of meer standaard toestemmingspagina's van je account (bijv. voorkeurenpagina, aanmeldpagina of pagina voor afmelden voor e-mail) wilt vervangen door aangepaste pagina's met eigen code, volg je deze stappen:

Klik op je bedrijfsnaam in de linkerbenedenhoek van Klaviyo.
Selecteer Instellingen.

Selecteer Overig bovenaan.
Klik op het dropdownmenu met 3 stippen op de toestemmingspagina die je wilt vervangen en selecteer Gehoste pagina gebruiken.

Selecteer in het dialoogvenster dat verschijnt je aangepaste paginabestand en klik op Opslaan.

Als je een aangepaste pagina wilt gebruiken voor flow e-mails of campagnes die naar een segment worden verzonden, moet je de standaard toestemmingspagina's van je account aanpassen om je aangepaste pagina's te gebruiken. Volg hetzelfde proces als hierboven om je standaard toestemmingspagina's te vervangen door aangepaste pagina's met eigen code.

Gebruik aangepaste toestemmingspagina's voor een lijst

Je moet elke afzonderlijke lijst die je een aangepaste pagina wilt laten gebruiken configureren, in plaats van de standaard toestemmingspagina's.

Navigeer naar de lijst die je wilt koppelen aan een aangepaste pagina.
Klik op het tabblad Aanmelden en voorkeurspagina's om alle bewerkbare toestemmingspagina's voor die lijst te zien.
Klik onder de toestemmingspagina die je wilt vervangen door een aangepaste pagina op het dropdownmenu met 3 puntjes en selecteer Gehoste pagina gebruiken.

Let op: je kunt ervoor kiezen om desgewenst voor alle toestemmingspagina's een gehoste pagina te gebruiken.

Selecteer in het dialoogvenster dat verschijnt je aangepaste paginabestand en klik op Opslaan.

In je e-mails moet je nog steeds de standaardtags voor afmelden en voorkeuren beheren van Klaviyo gebruiken (namelijk {% unsubscribe %} en {% manage_preferences %}). Deze tags worden ingevuld als links in je live e-mails en brengen ontvangers automatisch naar je aangepaste pagina's.

Veelgestelde vragen over gehoste pagina's

Moet ik JavaScript aan mijn pagina toevoegen om dit formulier correct in te dienen?
Aangezien uw aangepaste formulieren zich in een gehoste pagina bevinden, hoeft u geen extra JavaScript of een actie-URL aan het toe te voegen <form> om deze correct te verzenden. Zolang een gehoste pagina wordt bezocht via een e-mail die via Klaviyo is verzonden, wordt deze automatisch gekoppeld aan de juiste contactpersoon.

Moet deze pagina in HTML zijn?
Deze pagina moet in HTML staan. Je kunt extra afbeeldingen, stylesheets enz. toevoegen door ernaar te linken of door een map met opgenomen bestanden toe te voegen.

Kan Klaviyo me helpen een aangepaste pagina te bouwen?
Klaviyo biedt momenteel geen diensten aan om aangepaste code op te zetten en we bieden ook geen ondersteuning bij het oplossen van problemen met aangepaste code. De functie Hosted Pages is bedoeld als een blanco lei voor ontwikkelaars of marketeers met codekennis.

Lees meer over de aanpassingsmogelijkheden met Klaviyo's ingebouwde toestemmingspagina's in Aan de slag met toestemmingspagina's.

Was dit artikel nuttig?

Gebruik dit formulier alleen voor feedback op artikelen. Meer informatie over hoe je contact opneemt met support.

Ontdek meer van Klaviyo

Community

Maak contact met collega's, partners en Klaviyo-experts om inspiratie op te doen, inzichten te delen en antwoorden te krijgen op al je vragen.

Naar de community

Partners

Huur een Klaviyo-gecertificeerde expert in om je te helpen met een specifieke taak of voor doorlopend marketingbeheer.

Partner inhuren

Support

Krijg ondersteuning via je account.

E-mailsupport (gratis proefperiodes en betaalde accounts) 24/7 beschikbaar

Chat-/virtuele assistentie
Beschikbaarheid varieert per locatie en type abonnement

Inloggen