Comment utiliser du code personnalisé sur les pages de consentement

Environ 6 min de lecture

Mise à jour le 5 août 2025, 00:00 EST

Objectif de cet article

Apprenez à activer et à utiliser les pages hébergées de Klaviyo, qui vous permettent de coder vos propres pages de préférences, d’abonnement et de désabonnement.

Cet article s’adresse aux développeurs. Klaviyo ne propose pas actuellement de services d’aide à la création ni d’assistance au dépannage pour le code personnalisé. Pour en savoir plus sur nos pages de consentement intégrées, consultez notre article sur les notions de base à connaître au sujet des pages de consentement.

Avant de commencer

Avant de configurer une page hébergée, vous devez activer cette fonctionnalité :

Accédez à Paramètres > Autre.
Sélectionnez Pages de consentement dans la liste déroulante.
Sous Pages hébergées personnalisées, activez l’option Utiliser un domaine dédié personnalisé pour les pages hébergées.

Notez que seuls les comptes disposant d’un abonnement payant et ayant fait l’objet d’une vérification ont accès à ce paramètre.

Créer une page de consentement personnalisée

Accédez à Paramètres > Autre.
Cliquez sur Pages hébergées.
À côté de Pages, cliquez sur le symbole + pour créer une page.
Donnez-lui un nom (par exemple, unsubscribe.tmpl). Vous pourrez l’utiliser pour n’importe laquelle de vos pages de consentement, mais vous pouvez également créer plusieurs pages si vous le souhaitez.

Les noms des pages hébergées ne peuvent pas contenir d’espaces, car cela entraînerait une erreur. Utilisez des traits de soulignement à la place.

Concevez une page HTML qui contient les champs et les fonctionnalités de votre choix. Voici quelques exemples de champs pouvant être insérés dans une page de consentement personnalisée :
- Choix de la fréquence des e-mails :
  - Une option pour se désabonner
  - Une option pour recevoir tous les e-mails
  - Des options de fréquence pour les newsletters quotidiennes, hebdomadaires, mensuelles, etc.
- Des informations qui peuvent être utilisées pour le ciblage et la segmentation :
  - Une case à cocher pour indiquer si l’utilisateur souhaite ou non recevoir des offres spéciales
  - Une case à cocher pour indiquer si l’utilisateur souhaite ou non recevoir des annonces de nouveaux produits
  - Une case à cocher pour indiquer si l’utilisateur souhaite ou non recevoir des annonces de publication sur le blog
  - Autres listes auxquelles l’utilisateur est susceptible de s’inscrire

Exemple de code HTML pour une page de consentement

Vous pouvez utiliser ce code sur votre page unsubscribe.tmpl pour obtenir une page de consentement entièrement fonctionnelle avec des préférences en matière de type d’e-mails et de fréquence d’envoi :

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

Définir la redirection d’une page hébergée après sa validation (facultatif)

Par défaut, lorsqu’une page hébergée (par exemple, une page de préférences hébergée) est validée, 2 types de redirection sont possibles :

Si l’utilisateur a demandé à se désabonner, il sera envoyé à la page de confirmation de désabonnement par défaut de votre compte.
S’il a mis à jour son profil (ou fait quoi que ce soit qui ne soit pas une demande de désabonnement), l’utilisateur sera envoyé à la page de confirmation (validée) des préférences par défaut de votre compte.

Si vous avez utilisé l’exemple de code HTML ci-dessus, le contenu de l’élément <body> se présentera comme suit :

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

Pour personnaliser le type de redirection après validation de votre page hébergée, adaptez les lignes « value="..." » et ajoutez l’URL de votre choix dans le code HTML.

Ajouter des ressources personnalisées aux pages hébergées (facultatif)

Si vous souhaitez utiliser vos propres fichiers CSS, JS ou images sur votre page hébergée, téléchargez-les en cliquant sur le symbole + en regard de Ressources et faites-y référence dans le code source de la page.

Utilisez la balise suivante pour faire référence à une ressource que vous avez téléchargée dans votre compte Klaviyo : {% asset_url 'style.css' %}.

Utiliser les pages de consentement personnalisées

Vous pouvez remplacer chacune des pages de consentement par défaut de votre compte par des pages personnalisées, de sorte que tous les e-mails utilisent ces pages par défaut. Vous pouvez également configurer une seule liste spécifique pour qu’elle utilise des pages personnalisées, de sorte que seuls les e-mails envoyés à cette liste utilisent ces pages.

Si vous avez personnalisé les pages de consentement pour une liste spécifique, tous les e-mails qui lui sont envoyés utiliseront ces pages, et non celles par défaut.
Toutes les listes pour lesquelles vous n’avez pas personnalisé de pages de consentement utiliseront celles par défaut de votre compte. En outre, tous les e-mails qui ne sont PAS envoyés à une liste spécifique utiliseront également vos pages de consentement par défaut. Cela comprend les e-mails déclenchés par des indicateurs dans des flux, les campagnes envoyées à un segment ou les e-mails individuels.

Remplacer les pages de consentement par défaut par des pages hébergées

Si vous souhaitez remplacer une ou plusieurs pages de consentement par défaut de votre compte (par exemple, la page de préférences, d’abonnement ou de désabonnement pour les e-mails) par des pages codées sur mesure, procédez comme suit :

Cliquez sur le nom de votre entreprise dans le coin inférieur gauche de Klaviyo.
Sélectionnez Paramètres.

Sélectionnez Autre dans la partie supérieure.
Sur la page de consentement que vous souhaitez remplacer, cliquez sur les 3 points pour ouvrir le menu déroulant et sélectionnez Utiliser la page hébergée.

Dans la boite de dialogue qui s’affiche, sélectionnez le fichier qui correspond à votre page personnalisée et cliquez sur Enregistrer.

Si vous souhaitez utiliser une page personnalisée au lieu d’une page de consentement par défaut pour les e-mails de flux ou les campagnes envoyées à un segment, vous devrez modifier les paramètres de votre compte en ce sens. Suivez la même procédure que ci-dessus pour remplacer vos pages de consentement par défaut par des pages codées sur mesure.

Utiliser des pages de consentement personnalisées pour une liste

Vous devrez configurer chaque liste pour laquelle vous souhaitez utiliser une page personnalisée au lieu des pages de consentement par défaut.

Accédez à la liste que vous souhaitez connecter à une page personnalisée.
Cliquez sur l’onglet Pages d’abonnement et de préférences pour afficher toutes les pages de consentement modifiables pour cette liste.
Sous la page de consentement que vous souhaitez remplacer par une page personnalisée, cliquez sur les 3 points pour ouvrir le menu déroulant et sélectionnez Utiliser la page hébergée.

Notez que, si vous le souhaitez, vous pouvez choisir d’utiliser une page hébergée pour toutes les pages de consentement.

Dans la boite de dialogue qui s’affiche, sélectionnez le fichier qui correspond à votre page personnalisée et cliquez sur Enregistrer.

Dans vos e-mails, vous devez continuer à utiliser les balises Klaviyo standard de désabonnement et de gestion des préférences (c’est-à-dire {% unsubscribe %} et {% manage_preferences %}). Ces balises s’afficheront sous forme de liens dans vos e-mails et redirigeront automatiquement les destinataires vers vos pages personnalisées.

FAQ sur les pages hébergées

Dois-je ajouter du JavaScript à ma page pour que ce formulaire fonctionne correctement ?
Étant donné que vos formulaires personnalisés sont contenus dans une page hébergée, vous n’avez pas besoin d’ajouter du JavaScript supplémentaire ou une URL d’action à l’élément <form> pour qu’il fonctionne correctement. Tant que l’utilisateur accède à la page hébergée à partir d’un e-mail envoyé via Klaviyo, le système peut faire l’association sans problème.

Cette page doit-elle être en HTML ?
Oui, cette page doit être en HTML. Vous pouvez lui ajouter des images, des feuilles de style, etc., soit en créant un lien vers ces ressources, soit en ajoutant un dossier de fichiers inclus.

Est-ce que Klaviyo peut m’aider à créer une page personnalisée ?
Actuellement, Klaviyo ne propose pas de service d’aide à la création de code personnalisé, ni d’assistance au dépannage de ce type de code. Les pages hébergées ont vocation à donner plus de liberté aux développeurs ou aux spécialistes du marketing qui savent coder.

Pour en savoir plus sur les possibilités de personnalisation des pages de consentement intégrées à Klaviyo, consultez notre article sur les bases des pages de consentement.

Ressources complémentaires

Cet article vous a-t-il été utile ?

Utilisez ce formulaire uniquement pour nous faire part de vos commentaires sur cet article. Comment contacter l’assistance.

Explorer d’autres contenus Klaviyo

Communauté

Contactez des membres de votre secteur, des partenaires et des experts Klaviyo pour trouver de l’inspiration, partager des informations et obtenir des réponses à toutes vos questions.

Découvrez la Communauté

Partenaires

Engagez un expert certifié Klaviyo pour vous aider avec une tâche spécifique ou pour la gestion continue du marketing.

Engager un partenaire

Assistance

Accédez à l’assistance par l’intermédiaire de votre compte.

Assistance par e-mail (essai gratuit et comptes payants) Disponible 24 h/24, 7 j/7

Assistance par chat/virtuelle
La disponibilité varie selon la localisation et le type d’abonnement.

Se connecter