Hur du kodar samtyckessidor med anpassad kod

Förväntad lästid: 5 minut(er)

Uppdaterad 5 aug. 2025 00:00 EST

Du kommer att lära dig

Läs mer om hur du aktiverar och använder Klaviyo funktioner för värdsidor, som gör att du kan använda egen kod för att skapa dina egna inställningssidor, prenumerationssidor och sidor för att avsluta prenumeration.

Den här artikeln är för utvecklare; Klaviyo erbjuder för närvarande inte tjänster för att hjälpa till att bygga anpassad kod, och vi ger inte heller support för felsökning av anpassad kod. Om du vill lära dig mer om våra inbyggda samtyckessidor i appen kan du gå till vår artikel om att komma igång med samtyckessidor.

Innan du börjar

Innan du konfigurerar en värdbaserad sida aktiverar du den här funktionen:

Gå till Inställningar > Övrigt.
Välj Samtyckessidor i rullgardinsmenyn.
Under Anpassade värdsidor aktiverar du reglaget för Använd anpassad dedikerad domän för värdsidor.

Observera att endast Konton med en betald plan som har genomgått kontoverifiering har åtkomst till den här inställningen.

Skapa en anpassad samtyckessida

Gå till Inställningar > Övrigt.
Klicka på Värdbaserade sidor.
Bredvid Sidor klickar du på symbolen + för att lägga till en ny sida.
Ge den här sidan ett namn (t.ex. unsubscribe.tmpl); du kan använda detta för valfri av dina samtyckessidor, men du kan skapa mer än 1 sida om du vill.

Namn på värdsidor kan inte innehålla mellanslag eftersom det leder till ett fel. Undvik mellanslag eller använd understreck för att dela upp rubriker.

Designa en HTML-sida som innehåller de fält och funktioner du väljer. Exempel på fält som kan infogas för en anpassad samtyckessida inkluderar:
- Alternativ för e-postfrekvens:
  - Ett alternativ för att avsluta prenumerationen
  - Ett alternativ för att ta emot alla e-postmeddelanden
  - Frekvensalternativ för dagliga, veckovisa, månatliga osv. nyhetsbrev
- Information som kan användas för att rikta in och segmentera:
  - En kryssruta för om användaren vill ha reameddelanden
  - En kryssruta för om användaren vill ha produktmeddelanden eller inte
  - En kryssruta för om användaren vill ha blogguppdateringar eller inte
  - Andra listor som användaren kanske vill gå med i

Exempel på HTML-kod för en samtyckessida

Du kan använda den här koden i din avsluta prenumeration.tmpl för att få fullt fungerande samtyckessidor med inställningar för e-posttyp och frekvens:

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

Ställ in omdirigeringen för en värdbaserad sida efter inskick (valfritt)

Som standard, efter att en värdsida (t.ex. en värdad inställningssida) har skickats in utan problem, omdirigeras användaren till 1 av 2 platser:

Om de har begärt att avsluta prenumeration skickas de till ditt Kontos standardsida för bekräftelse av avslutad prenumeration.
Om de har uppdaterat sin profil (eller gjort något annat än att avsluta prenumerationen) skickas användaren till din Kontos standardbekräftelsesida för inställningar (lyckades).

Om du använde exempel-HTML-koden ovan återspeglas detta i <body> som:

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

Om du vill anpassa vart någon omdirigeras efter att ha skickat in din värdsida justerar du raderna value="..." till dina önskade URL:er i HTML-koden.

Lägg till anpassade resurser på värdbaserade sidor (valfritt)

Om du vill använda din egen CSS-fil, JS-fil eller dina egna bilder på din värdbaserade sida laddar du upp dem genom att klicka på + -symbolen bredvid Tillgångar och referera till dem i sidans källkod.

Använd följande etikett för att referera till en tillgång som du har laddat upp till ditt Klaviyo-konto: {% asset_url 'style.css' %}

Använda anpassade samtyckessidor

Du kan ersätta alla ditt kontos standardsamtyckessidor med anpassade, kodade sidor så att alla e-postmeddelanden använder dessa anpassade sidor som standard. Alternativt kan du konfigurera endast 1 specifik lista så att den använder anpassade, kodade sidor, så att endast e-postmeddelanden som skickas till den listan använder de anpassade sidorna.

Om du har anpassade samtyckessidor för en specifik lista kommer alla e-postmeddelanden som skickas till den listan att använda dessa unika samtyckessidor.
Alla listor som du inte har anpassat unika samtyckessidor för kommer att använda ditt Kontos standardsamtyckessidor. Dessutom kommer alla e-postmeddelanden som INTE skickas till en specifik lista, inklusive mättalsutlösta flödesmejl, kampanjer som skickas till ett segment eller personliga e-postmeddelanden, också att använda dina standardsamtyckessidor.

Ändra standardsidor för medgivande till värdbaserade sidor

Om du vill ersätta 1 eller flera av ditt kontos standardsamtyckessidor (t.ex. inställningssida, prenumerationssida eller sida för att avsluta prenumeration på e-post) med anpassade, kodade sidor följer du dessa steg:

Klicka på ditt företagsnamn längst ned till vänster i Klaviyo.
Välj Inställningar.

Välj Övrigt längst upp.
Klicka på rullgardinsmenyn med tre punkter på samtyckessidan som du planerar att ersätta och välj Använd värdsidan.

I dialogrutan som visas väljer du din anpassade sidfil och klickar på Spara.

Om du vill använda en anpassad sida för flödesmejl eller kampanjer som skickas till ett segment måste du byta ditt Kontos standardsamtyckessidor så att de använder dina anpassade sidor. Följ samma process som ovan för att ersätta dina standardsamtyckessidor med sidor med anpassad kod.

Använd anpassade samtyckessidor för en lista

Du måste konfigurera varje enskild lista som du vill använda en anpassad sida för istället för standardsamtyckessidorna.

Gå till den lista som du vill ansluta till en anpassad sida.
Klicka på fliken Prenumerera och inställningssidor för att se alla redigerbara samtyckessidor för den listan.
Under samtyckessidan som du vill ersätta med en anpassad sida klickar du på listrutemenyn med de 3 punkterna och väljer Använd värdsida.

Observera att du kan välja att använda en värdbaserad sida för alla samtyckessidor om du vill.

I dialogrutan som visas väljer du din anpassade sidfil och klickar på Spara.

I dina e-postmeddelanden ska du fortfarande använda Klaviyos standardetiketter för att avsluta prenumeration och hantera inställningar (dvs. {% unsubscribe %} och {% manage_preferences %}). Dessa etiketter kommer att fyllas i som länkar i dina liveutskick och tar automatiskt mottagarna till dina anpassade sidor.

Vanliga frågor om värdbaserade sidor

Måste jag lägga till någon JavaScript på min sida för att det här formuläret ska skickas in korrekt?
Eftersom dina anpassade formulär kommer att finnas inuti en värdbaserad sida behöver du inte lägga till någon extra JavaScript eller en åtgärds-URL i <form> för att det ska skickas in korrekt. Så länge en värdbaserad sida besöks från ett e-postmeddelande som skickats via Klaviyo kopplas den automatiskt tillbaka till rätt kontakt.

Måste den här sidan vara i HTML?
Den här sidan måste vara i HTML. Du kan inkludera ytterligare bilder, stilmallar osv., antingen genom att länka till dem eller genom att lägga till en mapp med inkluderade filer.

Kan Klaviyo hjälpa mig att skapa en anpassad sida?
Klaviyo erbjuder för närvarande inga tjänster för att hjälpa till att bygga anpassad kod, och vi ger heller ingen support för felsökning av anpassad kod. Funktionen Hosted Pages är tänkt att ge en tom utgångspunkt för utvecklare eller kodkunniga marknadsförare.

Läs mer om anpassningsmöjligheterna med Klaviyos inbyggda medgivandesidor i Komma igång med medgivandesidor.

Ytterligare resurser

Var den här artikeln till hjälp?

Använd endast detta formulär för feedback på artiklar. Lär dig hur du kontaktar support.

Utforska mer från Klaviyo

Community

Få kontakt med kollegor, partner och Klaviyo-experter för att hitta inspiration, dela insikter och få svar på alla dina frågor.

Besök communityn

Partners

Anlita en Klaviyo-certifierad expert för att hjälpa dig med en specifik uppgift eller för löpande marknadsföringshantering.

Anlita en partner

Support

Få tillgång till support via ditt konto.

E-postsupport (gratis provperiod och betalkonton) Tillgänglig dygnet runt, alla dagar i veckan

Chatt/virtuell hjälp
Tillgängligheten varierar beroende på plats och abonnemangstyp

Logga in