Centrum pomocy
/
Formularze rejestracyjne
/
Strony wyrażania zgody na wysyłkę
/
Strony wyrażania zgody na wysyłkę: pierwsze kroki

Jak niestandardowo kodować strony zgody

Około 5 min czytania
|
Zaktualizowano 5 sie 2025, 00:00 EST

Czego się dowiesz

Dowiedz się, jak włączać i korzystać z funkcji stron hostowanych Klaviyo, które umożliwiają niestandardowe kodowanie własnych stron preferencji, stron subskrybowanych i wycofać strony subskrypcji.

Ten artykuł jest przeznaczony dla programistów; Klaviyo nie oferuje obecnie usług pomagających w tworzeniu niestandardowego kodu, ani nie zapewnia pomocy w rozwiązywaniu problemów z niestandardowym kodem. Aby dowiedzieć się więcej o naszych wbudowanych stronach zgody aplikacji, przejdź do naszego artykułu Pierwsze kroki ze stronami zgody.

Zanim zaczniesz

Przed skonfigurowaniem hostowanej strony włącz tę funkcję:

  1. Przejdź do Ustawień > Inne.
  2. Wybierz strony zgody z listy rozwijanej.
  3. W sekcji Niestandardowe strony hostowane przełącz przełącznik na Użyj niestandardowej dedykowanej domeny dla stron hostowanych.
Sekcja Niestandardowe strony hostowane na karcie Strony zgody w Klaviyo pokazuje przełączenie na strony hostowane włączać.
Sekcja Niestandardowe strony hostowane na karcie Strony zgody w Klaviyo pokazuje przełączenie na strony hostowane włączać.

Pamiętaj, że dostęp do tego ustawienia ma tylko konto z płatnym adresem plan, które przeszło weryfikację konta.

Utwórz niestandardową stronę zgody

  1. Przejdź do Ustawień > Inne.
  2. Kliknij opcję Hostowane strony.
  3. Obok pozycji Strony kliknij symbol +, aby dodać nową stronę.
  4. Nazwij tę stronę (np. wycofać subskrypcję.tmpl); Będziesz mógł użyć tego dla dowolnej ze swoich stron zgody, ale możesz utworzyć więcej niż jedną stronę, jeśli chcesz.

Nazwy hostowanych stron nie mogą zawierać spacji, ponieważ spowoduje to błąd. Unikaj spacji lub używaj podkreśleń, aby rozdzielić tytuły.

  1. Zaprojektuj stronę HTML zawierającą wybrane pola i funkcje. Przykładowe pola, które można wstawić na niestandardową stronę zgody, obejmują:
    • Wybierz częstotliwość wysyłania wiadomości e-mail:
      • Opcja wycofać subskrypcję
      • Opcja otrzymywania wszystkich wiadomości e-mail
      • Opcje częstotliwości dla biuletynu dziennego, tygodniowego, miesięcznego itp.
    • Informacje, które można wykorzystać do targetowania i segment:
      • Pole wyboru określające, czy użytkownik chce otrzymywać ogłoszenia o sprzedaży.
      • Pole wyboru określające, czy użytkownik chce otrzymywać ogłoszenia o produktach.
      • Pole wyboru określające, czy użytkownik chce aktualizacji bloga.
      • Inna lista, do której użytkownik może chcieć dołączyć
Przykład kodu HTML dla strony zgody

Możesz użyć tego kodu w pliku wycofać subskrypcję.tmpl, aby uzyskać w pełni funkcjonalne strony zgody z preferencjami dotyczącymi typu i częstotliwości wiadomości e-mail:

< meta charset="utf-8"> < meta http-equiv="X-UA-Compatible" content="IE=edge"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" < div class="container"> < div class="header"> < img src="http://via.placeholder.com/300x75" />

e-mail Preferences

< 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 %}
{% endif %} {% endfor %}
/div> {% endif %} < input type="hidden" name="$fields" value="EmailInterests,EmailFrequency" /> < input type="hidden" name="$list_fields" value="EmailInterests" /> < div class="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}" > < label for="email" class="col-sm-3 control-label"> e-mail Address < 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' %} {% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}xml-ph-0031@d> {% endif %}

< div class="form-group"> < label for="first_name" class="col-sm-3 control-label"> First Name < 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 class="form-group"> < label for="last_name" class="col-sm-3 control-label"> Last Name < 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 class="form-group"> < label for="interests" class="col-sm-3 control-label"> Interests < div class="col-sm-9"> < div class="checkbox> < div class="checkbox">
< div class="checkbox"> /div> < div class="form-group"> < label for="interests" class="col-sm-3 control-label"> Jak często chciałbyś otrzymywać od nas wiadomości? < div class="col-sm-9"> < div class="radio"> < div class="radio"> < div class="radio"> < div < div class="clearfix form-actions"> < div class="pull-right"> < button type="submit" class="btn btn-default btn-primary"> aktualizacja preferencji < footer class="footer">

© 2017 nazwa firmy - polityka prywatności

< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> < script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> " data-astro-cid-mnja5ucx style="--bg: #2d2d30;--headerBg: #1e1e1e;--border: #3e3e3e;--filenameText: #cccccc;">
text 
<! DOCTYPE html>
 < html lang="pl">
   <head>
      < meta charset="utf-8"> 
 < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 < meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Najnowszy skompilowany i zminimalizowany CSS -->
      < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      <style type="text/css"> 
 /* Rozmieść nieco treść */
 body {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        form {
            margin-bottom: 18px;
        }

        /* Niestandardowy nagłówek strony */
.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;
        }

        lista-group-item etykieta {
            font-weight: normal;
            margin-top: 17px;
        }

        lista-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:aktywni {
            text-decoration: none;
        }

        .panel-group .panel-title a:hover .text,
        .panel-group .panel-title a:aktywni .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;
        }

        /* Niestandardowa stopka strony */ .footer {
            padding-top: 18px;
            border-top: 1px solid #e5e5e5;
        }

        /* Dostosuj kontener */ @media (min-width: 768px) { .container </style>
      <!-- -->
      <!-- -->
      <!--[if lt IE 9]>
      {
                max-width: 730px;
            }
        }
    /style   !-- HTML5 shim i Respond.js dla IE8 obsługują elementy HTML5 i zapytania o media --   !-- OSTRZEŻENIE: Respond.js nie działa, jeśli przeglądasz stronę przez file:// --   !-- [if lt IE 9]   script src= https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js   /script 
 <>
 <>
 <>
 <>
 <""><></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>e-mail 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>
            /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"> e-mail 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' %}
                  {% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}xml-ph-0031@d>
                   {% endif %}
               </p>
                  </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="Promocje" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
 Promocje & Sprzedaż
                     </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 %} />
 Najnowsze z bloga
                     </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>
            < div class="form-group"> 
 < label for="interests" class="col-sm-3 control-label"> Jak często chciałbyś otrzymywać od nas wiadomości?</label>
               < div class="col-sm-9"> 
 < div class="radio">
                     <label>
                        <!-- Wartość domyślna. -->
                        <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 %} />
 Raz w miesiącu
                     </label>
                  </div>
               </div>
            </div>
            < div <class="checkbox">
               <label>
               < input type="checkbox" name="$unsubscribe" value="true" />
 span class="text"> wycofać subskrypcję me  od wszystkich wiadomości e-mail.</span>
               </label>
            </div>
            < div class="clearfix form-actions"> 
 < div class="pull-right"> 
 < button type="submit" class="btn btn-default btn-primary"> aktualizacja preferencji</button>
               </div>
            </div>
         </form>
         < footer class="footer">
            <p>
               © 2017 nazwa firmy - <a href="https://www.klaviyo.com" target="_blank"> polityka prywatności</a>
            </p>
         </footer>
      </div>
      <!-- /container -->
      <!-- jQuery (niezbędne dla wtyczek JavaScript Bootstrapa) -->
      < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <!-- Najnowszy skompilowany i zminimalizowany 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.'
                }
            });
 // przełączenie walidacji na podstawie wyboru.
            $('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>

Ustaw przekierowanie hostowanej strony po przesłaniu (opcjonalnie)

Domyślnie po pomyślnym przesłaniu hostowanej strony (np. hostowanej strony preferencji) użytkownik zostanie przekierowany do jednego z dwóch miejsc:

Jeśli użyłeś przykładowego HTML powyżej, jest to odzwierciedlone w treści <body> <> jako:

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

Aby dostosować, gdzie ktoś zostanie przekierowany po przesłaniu hostowanej strony, dostosuj linie value="..." do preferowanych adresów URL w kodzie HTML.

Dodaj niestandardowe zasoby do hostowanych stron (opcjonalnie)

Jeśli chcesz użyć własnego pliku CSS, pliku JS lub obrazów na hostowanej stronie, prześlij je, klikając symbol + obok opcji Zasoby i odwołując się do nich w kodzie źródłowym strony.

Użyj poniższego znacznika, aby odwołać się do zasobu przesłanego na konto Klaviyo: {% asset_url 'style.css' %}

kod źródłowy twojej strony zgody pokazujący przesłany niestandardowy znacznik zasobu
kod źródłowy twojej strony zgody pokazujący przesłany niestandardowy znacznik zasobu

Korzystanie z niestandardowych stron zgody

Możesz zastąpić każdą z domyślnych stron zgody na koncie stronami niestandardowymi, tak aby wszystkie wiadomości e-mail domyślnie korzystały z tych niestandardowych stron. Alternatywnie możesz skonfigurować tylko 1 konkretną listę do korzystania z niestandardowych stron, tak aby tylko wiadomości e-mail wysyłane do tej listy korzystały z niestandardowych stron.

Zmień domyślne strony zgody na strony hostowane

Jeśli chcesz zastąpić 1 lub więcej domyślnych stron zgody konta (np. stronę preferencji, stronę subskrybować lub stronę wycofać subskrypcję e-mail) stronami niestandardowymi, wykonaj następujące kroki:

  1. Kliknij nazwę swojej firmy w lewym dolnym rogu strony Klaviyo.
  2. Wybierz Ustawienia.
zakładka Konto w lewym dolnym rogu z ustawieniami wybranymi z menu nawigacyjnego
zakładka Konto w lewym dolnym rogu z ustawieniami wybranymi z menu nawigacyjnego
  1. Wybierz opcję Inne u góry.
  2. Kliknij menu rozwijane z trzema kropkami na stronie zgody, którą chcesz zastąpić plan i wybierz opcję Użyj strony hostowanej.
Zakładka Strony zgód w Klaviyo pokazuje menu dodatkowych opcji otwarte na przykładowej stronie preferencji.
Zakładka Strony zgód w Klaviyo pokazuje menu dodatkowych opcji otwarte na przykładowej stronie preferencji.
  1. W wyświetlonym oknie dialogowym wybierz plik strony niestandardowej i kliknij przycisk Zapisz.

Jeśli chcesz użyć niestandardowej strony dla sekwencji e-mail lub kampanie wysyłane do segment, będziesz musiał przełączyć domyślne strony zgody na koncie, aby korzystać z niestandardowych stron. Postępuj zgodnie z tym samym procesem, co powyżej, aby zastąpić domyślne strony zgody stronami niestandardowymi.

Użyj niestandardowych stron zgody dla listy

Będziesz musiał skonfigurować każdą indywidualną listę, dla której chcesz użyć niestandardowej strony zamiast domyślnych stron zgody.

  1. Przejdź do listy, którą chcesz połączyć ze stroną niestandardową.
  2. Kliknij kartę subskrybować & Strony preferencji, aby wyświetlić wszystkie edytowalne strony zgody dla tej listy.
  3. Pod stroną zgody, którą chcesz zastąpić stroną niestandardową, kliknij menu rozwijane z trzema kropkami i wybierz opcję Użyj strony hostowanej.

Podskrybuj & zakładkę stron preferencji dla przykładowej listy w Klaviyo pokazującej dodatkowe menu akcji otwarte na stronie preferencji.
Podskrybuj & zakładkę stron preferencji dla przykładowej listy w Klaviyo pokazującej dodatkowe menu akcji otwarte na stronie preferencji.

Pamiętaj, że jeśli chcesz, możesz użyć hostowanej strony dla wszystkich stron zgody.

  1. W wyświetlonym oknie dialogowym wybierz plik strony niestandardowej i kliknij przycisk Zapisz.

W wiadomości e-mail nadal powinieneś używać standardowego Klaviyo wycofać subskrypcję i zarządzać preferencjami znacznika (tj. {% unsubscribe %} i {% manage_preferences %}). Znaczniki te pojawią się jako linki w Twojej wiadomości e-mail na żywo i automatycznie przeniosą odbiorców na Twoje niestandardowe strony.

Najczęściej zadawane pytania dotyczące hostowanych stron

Czy muszę dodać jakiś JavaScript do mojej strony, aby formularz został przesłany poprawnie?
Ponieważ twoje niestandardowe formularze będą znajdować się wewnątrz hostowanej strony, nie musisz dodawać żadnych dodatkowych skryptów JavaScript ani adresu URL akcji do formularza <> ,<form> aby poprawnie go przesłać. Tak długo, jak hostowana strona jest odwiedzana z wiadomości e-mail wysłanej przez Klaviyo, automatycznie powiąże powrót do właściwego kontaktu.

Czy ta strona musi być w HTML?
Ta strona musi być w formacie HTML. Możesz dołączyć dodatkowe obrazy, arkusze stylów itp., łącząc się z nimi lub dodając folder z dołączonymi plikami.

Czy Klaviyo może mi pomóc w stworzeniu niestandardowej strony?
Klaviyo nie oferuje obecnie usług pomagających w tworzeniu niestandardowego kodu, ani nie zapewnia pomocy w rozwiązywaniu problemów z niestandardowym kodem. Funkcja Hosted Pages jest przeznaczona dla programistów lub marketingowców znających się na kodzie.

Dowiedz się więcej o możliwościach dostosowywania za pomocą wbudowanych stron zgody Klaviyo w artykule Pierwsze kroki ze stronami zgody.

Dodatkowe źródła

Czy ten artykuł był pomocny?
Ten formularz służy tylko do przesyłania opinii na temat artykułów. Dowiedz się, jak skontaktować się z zespołem ds. pomocy.

Dowiedz się od Klaviyo więcej

Społeczność
Nawiązuj kontakty z osobami na podobnych stanowiskach, partnerami oraz ekspertami i ekspertkami Klaviyo – inspirujcie się nawzajem, wymieniajcie spostrzeżeniami i pomagajcie szukać odpowiedzi na nurtujące Was pytania.
Odwiedź stronę społeczności
Partnerzy
Zatrudnij certyfikowanego eksperta Klaviyo, który pomoże Ci w konkretnym zadaniu lub w ciągłym zarządzaniu marketingiem.
Zatrudnij partnera
Pomoc

Uzyskaj wsparcie za pośrednictwem konta.

E-mail do zespołu ds. pomocy (konta w bezpłatnym okresie próbnym oraz konta płatne) Całodobowa dostępność

Czat/wirtualna pomoc
 Dostępność różni się w–zależności od lokalizacji i typu planu.

Zaloguj się