Como incorporar um formulário de registro no seu site.

O que você vai aprender

Saiba como adicionar um formulário de registro incorporado a uma página ou local específico do seu site (por exemplo, o rodapé), para que os compradores que desejam saber mais sobre a sua marca possam se cadastrar facilmente. Incorporar um formulário de registro no rodapé do seu site para trabalhar em conjunto com seus outros formulários publicados é uma prática recomendada da Klaviyo para otimizar o crescimento da lista.

Para adicionar um formulário incorporado ao seu site, você precisará:

1. Criar e personalizar um novo formulário incorporado na Klaviyo.
2. Publique o formulário e, em seguida, copie o código de incorporação dele.
3. Adicione o formulário ao seu site usando as instruções da sua plataforma abaixo.

Antes de começar

Antes de criar seu formulário de registro, confira se a funcionalidade de formulário de registro está habilitada no seu site. Isso permite que os formulários publicados no Klaviyo sejam exibidos no seu site e sincronizem dados com o Klaviyo.

Para que os formulários incorporados funcionem, você precisará:

• Rastreamento no site (Klaviyo.js) instalado no seu site para habilitar a funcionalidade do formulário de registro.
• O código de incorporação do formulário colocado onde você quer que ele seja exibido, ou o ID do formulário adicionado a um bloco do app Klaviyo Embedded Form no Shopify.

Observe que a colagem do código incorporado é algo exclusivo dos formulários incorporados. Os formulários pop-up, flyout e de página inteira não exigem a colagem de código e podem ser publicados diretamente no gerador de formulários da Klaviyo.

Em vigor a partir de 6 de dezembro de 2024: a Klaviyo aprimorou a forma de calcular as visualizações dos formulários incorporados para medir o engajamento com mais precisão. As visualizações dos formulários incorporados são registradas apenas quando o formulário está visível na janela de visualização do usuário. Essa alteração pode resultar em uma mudança perceptível no número de visualizações e em um aumento nas taxas de envio, especialmente para formulários incorporados no rodapé de um site, pois eles só serão contabilizados se o visitante rolar a página o suficiente para que o formulário entre parcialmente em sua janela de visualização.

Adicionar um formulário incorporado ao seu site

Se você usa um formulário de registro fornecido pela Shopify, BigCommerce ou WooCommerce, verifique se suas integrações estão configuradas para sincronizar assinantes com a lista da Klaviyo que você quer. Você não precisa substituir esse formulário se ele já envia assinantes para a lista certa, mas você pode criar um formulário incorporado da Klaviyo para coletar assinantes em uma lista diferente.

Como criar e personalizar um novo formulário incorporado na Klaviyo

1. Selecione formulário de registro na navegação da Klaviyo.
2. Selecione Criar formulário. Se aparecer um seletor de canal, insira um nome, selecione Web e clique em Criar para abrir a biblioteca de formulários. Na biblioteca, você pode:
   • Personalize um modelo predefinido da biblioteca de formulários. Abra Estilo do formulário e selecione Incorporar para mostrar os modelos de formulários incorporados. Selecione o modelo que você quer.
   • Comece com um formulário em branco selecionando Criar formulário em branco.
3. Configure seu formulário no painel que se abre:
   • Insira ou confirme o nome do seu formulário.
   • Escolha a lista de assinantes para cada canal que seu formulário coleta.
   • Se você começou com um formulário em branco, selecione Incorporar como o tipo de formulário.
     

4. Para um modelo, clique em Criar formulário. Para um formulário em branco, clique em Salvar e continuar o projeto.
5. Use o editor para adicionar o estilo do formulário e adicionar os blocos e campos desejados. Para obter orientação sobre como personalizar o formulário, consulte Introdução aos formulários de registro.
   

1. Quando você estiver satisfeito com o formulário, resolva todos os alertas que estiverem bloqueando. Clique em Publicar ou agendar, selecione Publicar agora e, em seguida, clique em Publicar agora. O formulário foi publicado no Klaviyo, mas ele também precisa ser adicionado ao seu site conforme descrito abaixo para que os visitantes possam vê-lo.
2. Se a janela Seu formulário foi publicado! aparecer, clique em Copiar para copiar o código incorporado para a área de transferência. Se essa janela não aparecer, copie o código usando o caminho do editor abaixo.
   

Para copiar o código de incorporação no editor, selecione Segmentação e comportamento > Exibição. Copie o snippet em Código de incorporação.

Adicionar o formulário incorporado ao seu site

Depois de publicar seu formulário na Klaviyo e copiar o código de incorporação, siga as instruções da sua plataforma abaixo para adicionar o formulário onde você quer que ele apareça (por exemplo, em um arquivo de tema ou em uma página específica). Para o bloco do app Formulário incorporado do Klaviyo do Shopify, use o ID do formulário do código em vez do snippet completo.

Encontre a plataforma que você usa na lista abaixo e, em seguida, acesse o artigo linkado logo abaixo dela para ver um guia mais específico sobre como adicionar o formulário incorporado a essa plataforma.

Se não encontrar sua plataforma, veja o item “Outras plataformas”.

• BigCommerce
  Para BigCommerce, cole o código de incorporação nos arquivos do seu site onde você quiser que ele apareça.
  • Acesse Adicionar o código incorporado ao site do BigCommerce.
• Shopify
  Para Shopify, adicione o bloco do app Formulário incorporado Klaviyo ao modelo da sua página e cole o ID do formulário do código de incorporação. Por exemplo, em <div class="klaviyo-form-ABC123"></div>, o ID do formulário é ABC123.
  • Acesse Adicionar o código incorporado ao site da Shopify.
• Square
  Para o Square, adicione uma seção de código incorporado no editor do site do Square Online e cole o código incorporado onde você quer que o formulário apareça.
  • Acesse Adicionar o código incorporado ao site da Square.
• WooCommerce
  Para WooCommerce, cole o código de incorporação no HTML do site.
  • Acesse Adicionar o código incorporado ao rodapé do site do WooCommerce.
• Outras plataformas
  Se a sua plataforma não estiver listada acima ou se você usar uma integração personalizada que não se integre nativamente com a Klaviyo, será necessário colar 2 snippet de código no seu site para que o formulário de incorporação funcione:
  
  • Rastreamento no site (também conhecido como Klaviyo.js) para habilitar a funcionalidade do formulário de registro.
    • Observe que muitas plataformas adicionam automaticamente o rastreamento no site ao seu site quando você faz a integração (incluindo Wix, PrestaShop, Magento 1 e 2 etc.). Verifique as configurações de integração da sua plataforma na Klaviyo para confirmar se essa opção está selecionada.
      • Se a sua plataforma não tiver uma integração nativa com a Klaviyo, você deverá adicionar o rastreamento no site manualmente.
  • O código específico de incorporação do formulário
    • Depois que o rastreamento no site estiver habilitado, você deve colar o código de incorporação do formulário no código HTML/fonte do seu site, no local em que quiser que ele apareça (por exemplo, no rodapé).
      • Para copiar o código de incorporação de um formulário, selecione Segmentação e comportamento > Exibição no editor de formulários e, em seguida, copie o trecho em Código de incorporação.

Próximas etapas

Depois de publicar o formulário de incorporação na Klaviyo, adicioná-lo ao site seguindo as instruções da sua plataforma e salvar as alterações, acesse o site e atualize a página.

O formulário incorporado deve aparecer no local que você escolheu no seu site.

1. Envie o formulário com detalhes de contato de teste. Se ele coletar endereços de e-mail, use um endereço que você ainda não tenha usado nesse formulário.
2. Para inscrição em duas etapas por e-mail, confirme sua inscrição usando o e-mail de confirmação. Depois de concluir qualquer confirmação obrigatória, verifique se você foi adicionado à lista de assinantes selecionada para o formulário.

Resolução de problemas com formulários incorporados

Se o formulário incorporado estiver ativo na Klaviyo, mas não estiver sendo exibido no seu site, consulte as seguintes dicas de resolução de problemas:

• Limpe o cache do navegador e recarregue a página.
• Verifique se o seu site está devidamente integrado à Klaviyo e se está publicado.
• Confirme se você habilitou o formulário de registro no seu site (isso é o mesmo que habilitar o rastreamento no site).
• Verifique se você salvou as alterações no seu site depois de adicionar o código de incorporação do formulário ou, no Shopify, o ID do formulário.
• No editor do formulário de registro da Klaviyo, navegue até a seção Segmentação e comportamento e analise o seguinte:
  • Na seção Exibição, verifique se:
    • O código incorporado colado no seu site corresponde ao código fornecido pela Klaviyo, ou o bloco do app da Shopify contém o ID de formulário correspondente
    • As configurações do dispositivo na Klaviyo correspondem ao dispositivo que você está usando para visualizar o formulário
  • Na seção Segmentação, verifique se:
    • Você confere as configurações de Público do formulário
    • O formulário está configurado para ser exibido no URL que você está visualizando e se inclui os parâmetros UTM especificados
    • Sua localização corresponde a qualquer segmentação de local configurada para o formulário
    • No Shopify, seu carrinho atende a todos os requisitos de conteúdo de carrinho configurados para o formulário
• Se o formulário puder ser exibido para novos visitantes, execute o teste novamente em uma nova janela anônima (privada). Se o formulário estiver restrito a perfis existentes, assinantes ou membros de uma lista ou segmento, use um navegador que a Klaviyo reconheça como um perfil que atenda a essas condições.
• Confirme se apenas uma conta Klaviyo está integrada ao seu site. Saiba mais sobre integrações.

Outros possíveis motivos pelos quais seu formulário não está aparecendo

• Se você tiver CSS personalizado no seu site, ele pode substituir o estilo do formulário ou ocultar o formulário. Peça ao seu desenvolvedor que use as ferramentas de desenvolvedor do navegador para inspecionar o código do site e identificar o problema ou entre em contato com o suporte.
• Se você estiver usando um site de aplicativo de página única (“SPA”), sua configuração pode afetar a exibição do formulário de forma intermitente. Consulte seu desenvolvedor para obter assistência.

Recursos adicionais