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

Estimado 6 min de leitura

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

O que você vai aprender

Saiba como ativar e usar o recurso de páginas hospedadas da Klaviyo, que permite criar um código personalizado para suas próprias páginas de preferências, páginas para inscrever-se e páginas para 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

Apenas contas com recursos pagos de e-mail que passaram pela verificação de conta podem ativar páginas hospedadas personalizadas.

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

Navegue até Configurações > Outros.
Escolha Páginas de consentimento.
Em Páginas hospedadas personalizadas, clique em Ativar páginas personalizadas.

Um domínio dedicado personalizado é opcional; você não precisa configurar um para ativar páginas hospedadas.

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), e depois clique em Adicionar página. Você pode usá-la como uma página de preferências, para inscrever-se ou para cancelar inscrição de e-mails e criar mais de 1 página, se necessário.

Os nomes das páginas hospedadas não podem conter espaços, pois isso causa 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

Use este exemplo no seu cancelar inscrição.tmpl para coletar preferências de tipo e frequência de e-mail. Substitua o logotipo de exemplo, o nome da empresa e o link da Política de Privacidade pelos seus antes de usar.

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

" style="--bg: #2d2d30;--headerBg: #1e1e1e;--border: #3e3e3e;--filenameText: #cccccc;" data-astro-cid-djropyco>

<!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 %}checked="checked"{% 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 %}checked="checked"{% 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.</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>

O exemplo armazena interesses e frequência de e-mail como Propriedades do perfil. Use essas propriedades para direcionar suas campanhas e fluxos; escolher uma frequência não agenda e-mails automaticamente. A opção de cancelar inscrição segue as configurações de cancelar inscrição da sua conta e da sua lista.

Clique em Salvar e depois em Visualizar para conferir sua página antes de atribuí-la a uma página de consentimento.

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 a pessoa tiver solicitado cancelar inscrição, ela será enviada para a página de confirmação de cancelamento de inscrição.
Se a pessoa tiver atualizado o perfil (ou feito qualquer coisa que não seja uma solicitação de cancelar inscrição), ela será enviada para a página de confirmação de preferências (sucesso).

Se o link estiver associado a uma lista que tem páginas de consentimento personalizadas, o Klaviyo usa a página de sucesso dessa lista. Caso contrário, usa o padrão da conta.

O HTML de exemplo inclui estas entradas opcionais de redirecionamento, comentadas para que não substituam o comportamento padrão:

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

Para personalizar um redirecionamento, remova  ao redor do campo correspondente, substitua o value="..." dele pela URL que você quer usar e clique em Salvar. Use $unsubscribed_url para solicitações de cancelar inscrição e $updated_profile_url para outros envios bem-sucedidos. Se você usar /p/preferences_updated, primeiro crie e salve uma página hospedada com o nome preferences_updated.tmpl.

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 as páginas padrão de preferências, de inscrever-se e de cancelar inscrição por e-mail da sua conta por páginas com código personalizado. Você também pode configurar listas individuais para usar as próprias páginas com código personalizado.

Se você tiver páginas de consentimento personalizadas para uma lista específica, as campanhas enviadas apenas para essa lista e os e-mails em fluxos acionados por essa lista usarão essas páginas.
Listas sem páginas de consentimento personalizadas usam as páginas de consentimento padrão da sua conta. E-mails que não estão associados a uma única lista, incluindo e-mails de fluxo acionados por métrica, campanhas enviadas para várias listas ou segmentos, ou e-mails pessoais, também usarão 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 Outros > Páginas de consentimento.
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.

Para e-mails de fluxo que não são acionados por uma lista, ou campanhas enviadas para várias listas ou segmentos, substitua as páginas de consentimento padrão da sua conta por páginas com código personalizado usando as etapas acima. Os fluxos acionados por listas podem usar as páginas de consentimento personalizadas dessa lista.

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 guia Páginas de consentimento.
Se a lista estiver usando as páginas de consentimento padrão, clique em Personalizar para esta lista. Ignore esta etapa se a lista já tiver páginas de consentimento personalizadas.
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.

Você pode atribuir páginas hospedadas à página de preferências, página de inscrever-se e página de cancelar inscrição de e-mail. E-mails de confirmação não oferecem suporte a páginas hospedadas.

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 seu formulário personalizado está dentro de uma página hospedada, você não precisa de JavaScript adicional nem de um URL de ação para enviá-lo. Defina o método de <form> como POST, como no exemplo. Use as tags padrão da Klaviyo de cancelar inscrição ou gerenciar preferências nos seus e-mails para que o link resultante identifique o perfil correto.

Esta página precisa estar em HTML?
Esta página precisa estar em HTML. Você pode incluir imagens adicionais, folhas de estilo etc. vinculando a esses arquivos ou fazendo upload de arquivos individuais em Recursos e referenciando-os na sua página.

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

Como personalizar a página de cancelamento de inscrição de uma lista
Saiba como personalizar uma página de cancelamento de inscrição para uma lista específica do Klaviyo, que é a página em que seus assinantes podem cancelar a inscrição do recebimento do seu marketing.
Referência de formulários de registro e páginas de inscrição
Saiba como usar as ferramentas de crescimento de listas da Klaviyo, incluindo vários tipos de formulários de registro e páginas de inscrição, ou uma integração de terceiros para coletar e engajar novos assinantes.
Como entender páginas personalizadas hospedadas no Klaviyo
Conheça páginas hospedadas personalizadas na Klaviyo, incluindo o que são e o que podem fazer.

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