Como incorporar um formulário de registro em seu site

O que você vai aprender

Saiba como adicionar um formulário ao seu site colando o código de incorporação nos arquivos de tema ou no editor de páginas da sua loja, blog ou site. Você deve colar o código onde deseja que o formulário incorporado seja exibido. Isso pode variar de acordo com a programação do site.

Essas instruções são exclusivas para formulários incorporados; elas não se aplicam a pop-ups, flyouts ou formulários de página inteira. Após colar o código de incorporação em seu site, você pode editar o formulário na Klaviyo e publicar as alterações sem precisar atualizar o snippet.

Se você não tiver integração com a Shopify, BigCommerce, Magento ou WooCommerce, que sincronizam o snippet Klaviyo.js por meio de integrações (no caso da Shopify, por meio da incorporação de um aplicativo), é preciso instalar o Klaviyo.js em seu site antes de publicar formulários. O Klaviyo.js é conhecido como o snippet de código de rastreamento Ativo no Site porque permite o rastreamento das atividades do usuário. Saiba mais no guia de rastreamento web. 

Crie um novo formulário de incorporação

1. Acesse Formulários de registro > Criar formulário > Criar novo formulário.
2. Dê um nome ao formulário e escolha uma lista para adicionar assinantes.
3. Selecione Incorporação como tipo de formulário.
4. Clique em Salvar e continuar o projeto.
   
5. Use o editor para adicionar o estilo e os campos desejados.

Como obter o código de incorporação

Após deixar o formulário com seu estilo, você pode obter o código de incorporação em 2 locais:

1. Na seção Segmentação e comportamento:
   
2. Ao publicar um formulário incorporado, você verá uma solicitação para colar o código de incorporação em seu site:
   

Depois, publique o formulário e copie o snippet de código para colar em seu site. 

Cole o código em seu site

O código deve ser colado onde você quer exibir o formulário incorporado; isso varia de acordo com a integração. Abaixo, descrevemos alguns exemplos. Role para encontrar a plataforma que você usa (BigCommerce, Shopify, WooCommerce ou outra) e siga as instruções específicas.

BigCommerce 

Se quiser substituir o formulário de rodapé da BigCommerce por um formulário da Klaviyo, ou se quiser adicionar um formulário incorporado da Klaviyo a outra parte de seu site, confira as opções abaixo. 

Use o editor de páginas

1. Acesse Storefront > Webpages.
2. Selecione a página em que o formulário incorporado deve aparecer.
3. Selecione Edit no menu Action.
   
4. Clique em HTML na seção Page Content para abrir o editor de código-fonte.
5. Cole o código de incorporação do formulário.
6. Clique em Update e salve as alterações.

Como usar o editor de temas

1. Faça login na sua loja BigCommerce.
2. Navegue até Storefront > My Themes.
3. Clique em Customize na seção Current Theme. 
4. Selecione a página à qual deseja adicionar o formulário incorporado.
5. Localize a seção na página desejada.
6. Arraste um bloco HTML.
7. Cole o código de incorporação do formulário no editor de blocos.
8. Salve o bloco.
9. Salve as alterações.
   
   

Insira em seus arquivos de tema 

1. Navegue até Storefront > My Themes.
2. Clique no menu suspenso Advanced na seção Current Theme.
3. Clique em Edit Theme Files.
   
   
   1. Se a opção de Edit Theme Files não for exibida: 
      1. Faça uma cópia do tema.
      2. Edite a cópia.
4. Vá até o arquivo que contém o código-fonte da seção em que deseja incorporar um formulário.
5. Localize no código a seção em que o formulário deve aparecer.
6. Cole o código de incorporação.
7. Salve as alterações. 

Shopify

Rodapé da Shopify para todos os temas

Para posicionar o formulário incorporado no rodapé do site, siga as etapas abaixo. Estas instruções se aplicam aos temas vintage e 2.0 da Shopify. 

1. Navegue até seu admin da Shopify.
2. Acesse Online Store > Themes.
3. Clique nos três pontos e selecione Edit code.
4. Abra o arquivo de tema footer.liquid.
5. Localize a área onde quer que o formulário seja exibido.
   1. No exemplo abaixo, o formulário de registro será exibido acima das informações de direitos autorais do seu site:
      
6. Cole o código de incorporação do formulário.
7. Clique em Save.

Agora, o formulário aparecerá no rodapé do seu site.

Shopify sem rodapé para temas vintage

Para incluir um formulário incorporado em seu site da Shopify usando um tema vintage em qualquer lugar, com exceção do rodapé, siga estas etapas: 

1. Navegue até seu admin da Shopify.
2. Acesse Online Store > Themes.
3. Clique em Customize > Add Section.
4. Escolha uma das seguintes opções, dependendo do que aparecer para você:
   • Conteúdo personalizado
     1. Adicionar este bloco.
     2. Excluir o conteúdo padrão pré-definido.
   • HTML personalizado 
5. Clique em Add content > Custom HTML.
6. Cole em seu código de incorporação.
7. Clique em Save.

Shopify sem rodapé para temas 2.0

Para incluir um formulário incorporado em seu site da Shopify usando um tema 2.0 em qualquer lugar, com exceção do rodapé, siga estas etapas:

1. Crie seu formulário de registro incorporado na Klaviyo. O Tipo de formulário deve ser definido como formulário de incorporação na seção Estilos. Isso não funciona para formulários pop-up, flyout ou de página inteira. 
2. Salve a ID do formulário.
   Para encontrá-la, navegue até o formulário incorporado em sua conta Klaviyo. A ID do formulário é o código de seis letras no final do URL.
3. Navegue até seu admin da Shopify.
4. Acesse Online Store > Themes.
5. Clique em Customize.
6. Vá ao modelo de página ao qual deseja adicionar o formulário, por exemplo, sua página inicial.
7. Clique em Add Section e role até encontrar o Klaviyo Embedded Form em Apps.
   
   
8. Clique na nova seção e adicione a ID do formulário incorporado à caixa de texto. 
   
9. Clique em Save.
10. O formulário incorporado foi adicionado ao modelo e você pode movê-lo pela página como quiser.

Página de senha da Shopify para todos os temas

Para posicionar o formulário incorporado na página de senha do site, siga as etapas abaixo. Estas instruções se aplicam aos temas vintage e 2.0 da Shopify. 

Para habilitar os formulários de registro, é preciso instalar o snippet de código Klaviyo.js separadamente na página de senha. Isso porque o arquivo password-content.liquid (ou o arquivo password.liquid na Shopify 2.0) não usa o arquivo theme.liquid, onde a integração o instala automaticamente. Veja as instruções de instalação do Klaviyo.js abaixo.

1. Navegue até seu admin da Shopify.
2. Acesse Online Store > Themes.
3. Clique em Actions > Edit code.
4. Para temas vintage, abra o arquivo password-content.liquid ou password.liquid para temas 2.0.
5. Copie o snippet de código Klaviyo.js abaixo e cole-o na parte inferior do arquivo.
   

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

6. Quando o snippet mostrar PUBLIC_API_KEY, você deve substituí-la pela chave de API pública da sua conta Klaviyo. Para localizar a chave, acesse Configurações > Chaves de API.
   
7. Envolva o formulário de registro padrão da Shopify com tags de comentário para impedir que ele seja exibido em seu site:
   1. Adicione {% comment %} para iniciar a tag. 
   2. Adicione {% endcomment %} para fechar a tag.
      
8. Cole o código do formulário incorporado da Klaviyo acima do formulário incorporado da Shopify que foi comentado.
9. Clique em Save. 

O formulário incorporado da Klaviyo aparecerá na página de senha do seu site.

Todos os formulários pop-up e flyout publicados em sua conta aparecerão nesta página quando você instalar o Klaviyo.js, a menos que você indique que eles não devem ser exibidos no URL específico. 

WooCommerce

1. Abra seu painel na WooCommerce.
2. Clique em Customize Your Site.
3. Vá até a página à qual deseja adicionar o formulário incorporado.
4. Clique em Add a widget > Custom HTML.
5. Cole o código de incorporação na seção de conteúdo.
6. Clique em Publish para publicar as alterações.

Outras plataformas 

Para que um formulário incorporado da Klaviyo funcione, sua página precisa conter dois snippets de código: o Javascript da Klaviyo e o código de incorporação do formulário. Muitas das integrações padrão da Klaviyo (como Magento e Magento 2) injetam automaticamente o Klaviyo.js em seu site. Verifique as configurações de integração da sua plataforma para garantir que essa opção esteja selecionada. 

Se sua plataforma não tiver uma integração nativa com a Klaviyo, adicione nosso .js manualmente seguindo estas instruções. 

Depois de instalar o Klaviyo.js, cole o código de incorporação no HTML/código-fonte do seu site onde quiser que o formulário apareça. Se preferir que um especialista edite o código, entre em contato com um parceiro da Klaviyo. 

Recursos adicionais

• Introdução aos formulários de registro
• Como instalar o Klaviyo.js para publicar formulários de registro
• Como incorporar um formulário em sua página de confirmação de pedido
• Como adicionar um formulário incorporado da Klaviyo ao seu site da BigCommerce