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. Copiar o código de incorporação do formulário do modal de publicação.
3. Colar o código de incorporação nos arquivos do seu site.

Para colar o código do formulário é preciso ter acesso ao HTML e à plataforma de e-commerce do seu site. Por isso, nossa equipe de suporte não consegue oferecer assistência prática. Se você não tem um desenvolvedor na sua equipe, considere entrar em contato com um parceiro da Klaviyo para obter ajuda.

Antes de começar

Antes de criar seu formulário de registro, confira se a funcionalidade de formulário de registro está habilitada na sua conta Klaviyo. Isso garante que os formulários publicados na Klaviyo sejam exibidos corretamente no seu site e sincronizem todos os dados necessários.

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

• Habilitar a funcionalidade do formulário de registro. Também conhecido como "rastreamento no site" instalado.
• Copiar o código de incorporação colado no seu site onde você quer que o formulário seja exibido.

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 agora serão registradas apenas quando o formulário estiver 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 estiver usando Shopify, BigCommerce ou WooCommerce, os assinantes que se cadastrarem por meio do formulário de incorporação da sua plataforma serão automaticamente adicionados à sua lista Klaviyo por meio das integrações. Por esse motivo, você não precisa substituir o formulário de incorporação das suas integrações por um da Klaviyo, mas ainda pode criar um na Klaviyo se quiser que os assinantes sejam coletados em outra lista.

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

1. Selecione a aba formulário de registro à esquerda no site da Klaviyo.
2. Selecione Criar formulário. A partir daí, você pode:
   
   • Personalizar um modelo predefinido da biblioteca de formulários. Clique no menu suspenso ao lado de Todos os tipos e selecione Incorporados para filtrar a biblioteca de formulários e mostrar todos os modelos de formulários incorporados predefinidos.
   • Para começar com um modelo de formulário incorporado em branco, selecione Criar novo formulário no canto superior direito.
3. No modal de criação:
   
   • Dê um nome ao seu formulário.
   • Escolha em qual lista os novos assinantes serão incluídos.
   • Confirme Incorporado como seu tipo de formulário.
   
4. 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.
   

   Se quiser incorporar o formulário no rodapé do site, recomendamos solicitar apenas endereços de e-mail para aumentar o volume de inscrições.

6. Após concluir o formulário, clique em Publicar. O formulário ainda não aparecerá no seu site. Você precisará colar o código de incorporação no seu site para que ele seja ativado.
7. No modal Publicados, clique em Copiar para copiar o código incorporado para a área de transferência. Este é o código que você precisará colar nos arquivos do seu site na próxima seção deste artigo.

Observe que o código incorporado de um formulário também pode ser encontrado na aba Segmentação e comportamento no editor de formulários.

Colar o código de incorporação no seu site

Depois de publicar seu formulário na Klaviyo e copiar o código de incorporação, você precisará colar esse código nos arquivos do seu site para exibir o formulário. O local para colar o código depende de onde você quer que o formulário apareça (por exemplo, em um arquivo de tema ou arquivo de página específico) e pode variar de acordo com as integrações.

Encontre a plataforma que você usa na lista abaixo e, em seguida, acesse o artigo vinculado abaixo dela para obter um guia mais específico sobre como colar o snippet de código de incorporação para essa integração.

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 quiser que ele apareça.
  • Acesse Adicionar o código incorporado ao site do BigCommerce.
• Shopify Para Shopify, adicione o aplicativo Formulário incorporado Klaviyo ao modelo de sua página e cole o código de incorporação do formulário.
  • Acesse Adicionar o código incorporado ao site da Shopify.
• Square Para Square, cole o código de incorporação nos arquivos do seu site onde quiser que ele 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é).
      • Você pode copiar o código incorporado de um formulário na aba Comportamentos de segmentação no editor de formulários.

Salve todas as alterações feitas no seu site. Se você não se sentir à vontade para editar o código do seu site, considere entrar em contato com um parceiro da Klaviyo para obter ajuda.

Próximas etapas

Depois de publicar o formulário de incorporação na Klaviyo, cole o código de incorporação no site e salve as alterações, depois acesse o site e atualize a página.

O formulário incorporado deve aparecer no seu site onde quer que você tenha colado o código de incorporação.

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:

• Atualize o cache do navegador.
• Verifique se o seu site está devidamente integrado à Klaviyo e se está publicado.
• Confirme se você habilitou o formulário de registro da sua conta. Isso é o mesmo que habilitar o rastreamento no site.
• Verifique se você salvou as alterações no seu site depois de colar o código incorporado.
• 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 de incorporação colado no seu site corresponde corretamente ao código fornecido pela Klaviyo
    • 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ê se encaixa em alguma restrição da configuração Visitante
    • 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 se encaixa nas definições de geolocalização para o formulário
    • Seu carrinho atende a todos os requisitos de conteúdo de carrinho configurados para o formulário
• Execute novamente o teste em uma nova janela no modo anônimo ("privado") no navegador.
• Confirme se apenas uma conta Klaviyo está integrada ao seu site. Saiba mais sobre integrações.

Outros possíveis motivos para o formulário não aparecer

• Se tiver um CSS personalizado no seu site, isso pode entrar em conflito com o snippet de rastreamento no site da Klaviyo (“Klaviyo.js”) e interferir com seu 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.