Cómo programar páginas de consentimiento con código personalizado

Aprox. 5 minutos de lectura

Actualizado 5 ago 2025, 0:00 EST

Qué aprenderás

Aprende a habilitar y usar las funciones de páginas alojadas de Klaviyo, que te permiten programar con código personalizado tus propias páginas de preferencias, páginas para suscribirse y páginas para darse de baja.

Este artículo es para desarrolladores; actualmente, Klaviyo no ofrece servicios para ayudar a desarrollar código personalizado, ni proporcionamos soporte para la resolución de problemas de código personalizado. Para obtener información sobre nuestras páginas de consentimiento integradas en la aplicación, ve a nuestro artículo sobre primeros pasos con las páginas de consentimiento.

Antes de empezar

Antes de configurar una página alojada, habilita esta función:

Ve a Configuración > Otros.
Elige Páginas de consentimiento en el menú desplegable.
En Páginas alojadas personalizadas, activa el interruptor para Usar un dominio dedicado personalizado para las páginas alojadas.

Ten en cuenta que solo las cuentas con un plan de pago que hayan superado la verificación de la cuenta tienen acceso a esta configuración.

Crear una página de consentimiento personalizada

Ve a Configuración > Otros.
Haz clic en Páginas alojadas.
Junto a Páginas, haz clic en el símbolo + para añadir una nueva página.
Asigna un nombre a esta página (por ejemplo, unsubscribe.tmpl); podrás utilizarlo para cualquiera de tus páginas de consentimiento, pero, si quieres, puedes crear más de 1 página.

Los nombres de las páginas alojadas no pueden contener espacios, ya que generarían un error. Evita los espacios o utiliza guiones bajos para separar los títulos.

Diseña una página HTML que incluya los campos y las funciones que prefieras. Algunos ejemplos de campos que se pueden insertar para una página de consentimiento personalizada incluyen:
- Opciones de frecuencia de email:
  - Una opción para darse de baja
  - Una opción para recibir todos los emails
  - Opciones de frecuencia para boletines diarios, semanales, mensuales, etc.
- Información que se puede usar para orientar y segmentar:
  - Una casilla para indicar si el usuario quiere o no anuncios de rebajas
  - Una casilla para indicar si el usuario quiere o no anuncios de productos
  - Una casilla para indicar si el usuario quiere recibir actualizaciones del blog o no
  - Otras listas a las que el usuario puede querer unirse

Ejemplo de código HTML para una página de consentimiento

Puedes usar este código en tu unsubscribe.tmpl para obtener unas páginas de consentimiento totalmente funcionales con preferencias de tipo de email y frecuencia:

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

Configura la redirección de una página alojada después del envío (opcional)

De forma predeterminada, después de que una página alojada (p. ej., una página de preferencias alojada) se haya enviado correctamente, se redirigirá al usuario a 1 de 2 lugares:

Si han solicitado darse de baja, se les enviará a la página de confirmación de baja predeterminada de tu cuenta.
Si han actualizado su perfil (o han hecho algo que no sea una solicitud de darse de baja), se enviará al usuario a la página de confirmación de preferencias predeterminada (correcta) de tu cuenta.

Si has usado el HTML de ejemplo anterior, esto se refleja en el <body> como:

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

Para personalizar a dónde se redirige a alguien después de enviar tu página alojada, ajusta las líneas value="..." a la(s) URL que prefieras dentro del HTML.

Añade activos personalizados a páginas alojadas (opcional)

Si quieres usar tu propio archivo CSS, archivo JS o imágenes en tu página alojada, súbelos haciendo clic en el símbolo + junto a Recursos y haz referencia a ellos en el código fuente de la página.

Utiliza la siguiente etiqueta para hacer referencia a un recurso que has subido a tu cuenta de Klaviyo: {% asset_url 'style.css' %}

Uso de las páginas de consentimiento personalizadas

Puedes reemplazar cada una de las páginas de consentimiento predeterminadas de tu cuenta por páginas con código personalizado para que todos los emails usen estas páginas personalizadas de forma predeterminada. Como alternativa, puedes configurar solo 1 lista en particular para que use páginas con código personalizado, de modo que solo los emails enviados a esa lista usarían las páginas personalizadas.

Si tienes páginas de consentimiento personalizadas para una lista específica, cualquier email que se envíe a esa lista usará esas páginas de consentimiento únicas.
Las listas para las que no hayas personalizado páginas de consentimiento únicas usarán las páginas de consentimiento predeterminadas de tu cuenta. Además, cualquier email que NO se envíe a una lista específica, incluidos los emails de flujo activados por métricas, las campañas enviadas a un segmento o los emails personales, también usarán tus páginas de consentimiento predeterminadas.

Cambiar las páginas de consentimiento predeterminadas a páginas alojadas

Si quieres sustituir 1 o varias de las páginas de consentimiento predeterminadas de tu cuenta (p. ej., la página de preferencias, la página para suscribirse o la página para darse de baja del email) por páginas con código personalizado, sigue estos pasos:

Haz clic en el nombre de tu empresa en la esquina inferior izquierda de Klaviyo.
Selecciona Ajustes.

Selecciona Otro en la parte superior.
Haz clic en el menú desplegable de 3 puntos de la página de consentimiento que piensas reemplazar y selecciona Usar página alojada.

En la ventana de diálogo que aparece, selecciona el archivo de tu página personalizada y haz clic en Guardar.

Si quieres usar una página personalizada para los emails de flujo o las campañas enviadas a un segmento, tendrás que cambiar las páginas de consentimiento predeterminadas de tu cuenta para usar tus páginas personalizadas. Sigue el mismo proceso que se indica arriba para sustituir tus páginas de consentimiento predeterminadas por páginas con código personalizado.

Usar páginas de consentimiento personalizadas para una lista

Tendrás que configurar cada lista individual para la que quieras usar una página personalizada en lugar de las páginas de consentimiento predeterminadas.

Ve a la lista que quieras conectar a una página personalizada.
Haz clic en la pestaña Suscribirse & Preference Pages para ver todas las páginas de consentimiento editables de esa lista.
En la página de consentimiento que quieras reemplazar por una página personalizada, haz clic en el menú desplegable de los 3 puntos y selecciona Usar página alojada.

Ten en cuenta que puedes optar por usar una página alojada para todas las páginas de consentimiento, si lo deseas.

En la ventana de diálogo que aparece, selecciona el archivo de tu página personalizada y haz clic en Guardar.

En tus emails, debes seguir usando las etiquetas estándar de Klaviyo para darse de baja y gestionar preferencias (es decir, {% unsubscribe %} y {% manage_preferences %}). Estas etiquetas se completarán como enlaces en tus emails activos y llevarán automáticamente a los destinatarios a tus páginas personalizadas.

Preguntas frecuentes sobre páginas alojadas

¿Necesito añadir JavaScript a mi página para que este formulario se envíe correctamente?
Como tus formularios personalizados estarán contenidos dentro de una página alojada, no tienes que añadir JavaScript adicional ni una URL de acción al <form> para que se envíe correctamente. Siempre que se visite una página alojada desde un email enviado a través de Klaviyo, se vinculará automáticamente con el contacto correcto.

¿Esta página tiene que estar en HTML?
Esta página debe estar en HTML. Puedes incluir imágenes, hojas de estilos, etc. adicionales, ya sea enlazándolos o añadiendo una carpeta de archivos incluidos.

¿Puede Klaviyo ayudarme a crear una página personalizada?
Klaviyo no ofrece actualmente servicios para ayudar a crear código personalizado, ni proporcionamos asistencia para solucionar problemas de código personalizado. La función Páginas alojadas está pensada para proporcionar una base en blanco a desarrolladores o profesionales del marketing con conocimientos de código.

Obtén más información sobre las capacidades de personalización con las páginas de consentimiento integradas de Klaviyo en Primeros pasos con las páginas de consentimiento.

Recursos adicionales

¿Te ha resultado útil este artículo?

Utiliza este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar con el servicio de asistencia.

Descubre más sobre Klaviyo

Klaviyo Community

Conecta con compañeros, socios y expertos de Klaviyo para encontrar ideas, compartir información y resolver todas tus dudas.

Visitar Klaviyo Community

Socios

Contrata a un experto certificado por Klaviyo para ayudarte con una tarea específica o para la gestión continua de marketing.

Contratar un socio

Asistencia

Accede al servicio de asistencia a través de tu cuenta.

Asistencia por correo electrónico (prueba gratuita y cuentas de pago) Disponible 24/7

Asistencia por chat/virtual
La disponibilidad varía según la ubicación y el tipo de plan

Iniciar sesión