Como criar páginas de consentimento com código personalizado

Estimado 5 min de leitura

Atualizado 5 de ago. de 2025, 00:00 EST

O que você vai aprender

Saiba como ativar e usar os recursos de páginas hospedadas da Klaviyo, que permitem que você use código personalizado para criar suas próprias páginas de preferências, páginas de inscrever-se e páginas de cancelar inscrição.

Este artigo é destinado a desenvolvedores; no momento, a Klaviyo não oferece serviços para ajudar a desenvolver código personalizado nem fornecemos suporte para solução de problemas de código personalizado. Para saber mais sobre nossas páginas de consentimento integradas do app, acesse nosso artigo do Guia de introdução às páginas de consentimento.

Antes de começar

Antes de configurar uma página hospedada, ative este recurso:

Navegue até Configurações > Outros.
Escolha Páginas de consentimento no menu suspenso.
Em Páginas hospedadas personalizadas, ative o botão para Usar domínio dedicado personalizado para páginas hospedadas.

Observe que apenas contas com um plano pago e que passaram pela verificação de conta têm acesso a essa configuração.

Criar uma página de consentimento personalizada

Vá para Configurações > Outros.
Clique em Páginas hospedadas.
Ao lado de Páginas, clique no símbolo + para adicionar uma nova página.
Dê um nome a esta página (por exemplo, cancelar inscrição.tmpl); você poderá usar isso em qualquer uma das suas páginas de consentimento, mas pode criar mais de 1 página se quiser.

Os nomes das páginas hospedadas não podem conter espaços, pois isso causará um erro. Evite espaços ou use sublinhados para separar os títulos.

Crie uma página HTML que inclua os campos e recursos que você escolher. Exemplos de campos que podem ser inseridos em uma página de consentimento personalizada incluem:
- Opções de frequência de e-mail:
  - Uma opção para cancelar inscrição
  - Uma opção para receber todos os e-mails
  - Opções de frequência para newsletters diárias, semanais, mensais etc.
- Informações que podem ser usadas para direcionar e segmentar:
  - Uma caixa de seleção para indicar se o usuário quer receber anúncios de promoção
  - Uma caixa de seleção para indicar se o usuário quer ou não anúncios de produtos
  - Uma caixa de seleção para indicar se o usuário quer ou não receber atualizações do blog
  - Outras listas que o usuário pode querer assinar

Exemplo de código HTML para uma página de consentimento

Você pode usar este código no seu unsubscribe.tmpl para obter páginas de consentimento totalmente funcionais com tipo de e-mail e preferências de frequência:

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

Defina o redirecionamento de uma página hospedada após o envio (opcional)

Por padrão, depois que uma página hospedada (por exemplo, uma página de preferências hospedada) for enviada com sucesso, o usuário será redirecionado para 1 de 2 lugares:

Se tiverem solicitado cancelar inscrição, serão enviados para a página padrão de confirmação de cancelamento de inscrição da sua conta.
Se eles tiverem atualizado o perfil (ou feito qualquer coisa que não seja uma solicitação de cancelar inscrição), o usuário será enviado para a página padrão de confirmação de preferências (sucesso) da sua conta.

Se você usou o HTML de exemplo acima, isso é refletido no <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 para onde alguém é redirecionado depois de enviar sua página hospedada, ajuste as linhas value="..." ao(s) URL(s) de sua preferência dentro do HTML.

Adicionar recursos personalizados às páginas hospedadas (Opcional)

Se você quiser usar seu próprio arquivo CSS, arquivo JS ou imagens na sua página hospedada, faça upload deles clicando no símbolo + ao lado de Ativos e faça referência a eles no código-fonte da página.

Use a seguinte tag para fazer referência a um recurso que você fez upload na sua conta Klaviyo: {% asset_url 'style.css' %}

Como usar as páginas de consentimento personalizadas

Você pode substituir cada uma das páginas de consentimento padrão da sua conta por páginas com código personalizado para que todos os e-mails usem essas páginas personalizadas por padrão. Como alternativa, você pode configurar apenas 1 lista específica para usar páginas com código personalizado, de modo que apenas os e-mails enviados para essa lista usem as páginas personalizadas.

Se você tiver páginas de consentimento personalizadas para uma lista específica, todos os e-mails enviados para essa lista usarão essas páginas de consentimento exclusivas.
Quaisquer listas para as quais você não tiver personalizado páginas de consentimento exclusivas usarão as páginas de consentimento padrão da sua conta. Além disso, qualquer e-mail que NÃO for enviado para uma lista específica, incluindo e-mails de fluxo acionados por métrica, campanhas enviadas para um segmento ou e-mails pessoais, também usará suas páginas de consentimento padrão.

Altere as páginas de consentimento padrão para páginas hospedadas

Se você quiser substituir 1 ou mais páginas de consentimento padrão da sua conta (por exemplo, página de preferências, página de inscrição ou página de cancelamento de inscrição de e-mail) por páginas com código personalizado, siga estas etapas:

Clique no nome da sua empresa no canto inferior esquerdo da Klaviyo.
Selecione Configurações.

Selecione Outro na parte superior.
Clique no menu suspenso de três pontos na página de consentimento que você planeja substituir e selecione Usar página hospedada.

Na janela de diálogo que aparece, selecione o arquivo da sua página personalizada e clique em Salvar.

Se você quiser usar uma página personalizada para e-mails de fluxo ou campanhas enviadas para um segmento, será necessário trocar as páginas de consentimento padrão da sua conta para usar suas páginas personalizadas. Siga o mesmo processo acima para substituir suas páginas de consentimento padrão por páginas com código personalizado.

Usar páginas de consentimento personalizadas para uma lista

Você vai precisar configurar cada lista individual que gostaria de usar com uma página personalizada em vez das páginas de consentimento padrão.

Navegue até a lista que você gostaria de conectar a uma página personalizada.
Clique na aba Páginas de inscrição e preferências para ver todas as páginas de consentimento editáveis para essa lista.
Na página de consentimento que você quer substituir por uma página personalizada, clique no menu suspenso de 3 pontos e selecione Usar página hospedada.

Observe que, se quiser, você pode optar por usar uma página hospedada para todas as páginas de consentimento.

Na janela de diálogo que aparece, selecione o arquivo da sua página personalizada e clique em Salvar.

Nos seus e-mails, você ainda deve usar as tags padrão de cancelar inscrição e gerenciar preferências da Klaviyo (ou seja, {% unsubscribe %} e {% manage_preferences %}). Essas tags serão preenchidas como links nos seus e-mails ativos e levarão automaticamente os destinatários às suas páginas personalizadas.

FAQ de páginas hospedadas

Preciso adicionar algum JavaScript à minha página para que este formulário seja enviado corretamente?
Como seus formulários personalizados estarão contidos em uma página hospedada, você não precisa adicionar nenhum JavaScript ou URL de ação extra ao <form> para enviá-lo corretamente. Desde que uma página hospedada seja acessada a partir de um e-mail enviado pela Klaviyo, ela será automaticamente vinculada ao contato correto.

Esta página precisa estar em HTML?
Esta página deve estar em HTML. Você pode incluir imagens adicionais, folhas de estilo etc., seja vinculando-as ou adicionando uma pasta de arquivos incluídos.

A Klaviyo pode me ajudar a criar uma página personalizada?
No momento, a Klaviyo não oferece serviços para ajudar a criar código personalizado, nem oferece suporte para solucionar problemas de código personalizado. O recurso Páginas hospedadas foi criado para oferecer uma tela em branco para desenvolvedores ou profissionais de marketing com conhecimento de código.

Saiba mais sobre os recursos de personalização com as páginas de consentimento integradas do Klaviyo em Guia de introdução às páginas de consentimento.

Recursos adicionais

Esse artigo foi útil?

Use esse formulário somente para dar feedback sobre os artigos. Saiba como entrar em contato com o suporte.

Saiba mais sobre a Klaviyo

Community

Conecte-se com colegas, parceiros e especialistas da Klaviyo para ter ideias, compartilhar insights e tirar dúvidas.

Visite a Klaviyo Community

Parceiros

Contrate um especialista certificado pela Klaviyo para ajudá-lo com uma tarefa específica ou para gerenciamento contínuo de marketing.

Contratar um parceiro

Suporte

Acesse o suporte na sua conta.

Suporte por e-mail (teste gratuito e contas pagas) Disponível 24 horas

Chat/assistência virtual
A disponibilidade varia conforme o local e o tipo de plano

Entrar