Como adicionar um formulário incorporado da Klaviyo ao seu site da BigCommerce
O que você vai aprender
Saiba como adicionar um formulário incorporado do Klaviyo ao seu site BigCommerce, o que exige criar o formulário no Klaviyo e, depois, colar o código de incorporação dele nos arquivos do seu site onde você quer que ele apareça (por exemplo, no rodapé).
Este guia mostra como substituir o formulário de registro padrão do BigCommerce por um formulário incorporado do Klaviyo.
Antes de começar
Antes de criar um formulário incorporado na Klaviyo, você precisa primeiro integrar com a BigCommerce e, em seguida, ativar a funcionalidade de formulário de registro (também chamada de "rastreamento no site"). Se você marcou a configuração Adicionar automaticamente o JavaScript no site da Klaviyo ao integrar com a BigCommerce, está tudo pronto.
Se não:
- Na Klaviyo, selecione a aba Integrações.
- Clique em BigCommerce.
- Marque a configuração Adicionar automaticamente o javascript onsite da Klaviyo.
- Clique em Save.
O exemplo neste artigo usa o tema Cornerstone padrão da BigCommerce. Tenha em mente que seu tema pode ser diferente, assim como os nomes de alguns arquivos ou os locais dos snippet de código.
Adicionar o código de incorporação do formulário ao seu site
Primeiro, crie e publique um formulário incorporado na Klaviyo. Esta seção mostrará as próximas etapas para colar o código incorporado do seu formulário no seu site BigCommerce, para que ele seja exibido e sincronize dados corretamente.
- Se você ainda não fez isso, copie o código de incorporação do seu formulário incorporado. Você pode acessar o código de incorporação do formulário abrindo o formulário no editor e clicando na seção Segmentação e comportamento.
- Acesse seu site e localize o formulário de registro padrão do BigCommerce. Se você estiver usando um tema Cornerstone, ele fica no rodapé do site.
- Se você não vir um formulário padrão no seu site:
- Abra seu painel do BigCommerce.
- Navegue até Marketing > marketing por e-mail
- Marque a caixa chamada Permitir assinaturas de newsletter. Isso permite coletar consentimento de e-mail dos visitantes do seu site e também adiciona uma caixa padrão de inscrição por e-mail no seu site da BigCommerce. Se essa caixa já estiver marcada e você ainda não vir um formulário padrão, talvez seu tema não inclua um.
- Abra o painel do BigCommerce e, em seguida, navegue até Storefront > Themes.
- Na seção Tema atual, clique no menu suspenso Avançado e escolha Editar arquivos de tema.
- Se você estiver usando um tema padrão, não será possível selecionar esta opção. Em vez disso:
- Clique em Fazer uma cópia, dê um nome e selecione Salvar uma cópia.
- Depois de adicioná-lo à seção Temas, selecione os 3 pontos e escolha Editar arquivos do tema. Observe que todas as edições feitas só serão aplicadas ao tema que você estiver editando, e será preciso aplicar o tema ao seu site para ver as alterações refletidas.
- Na barra lateral esquerda, abra o arquivo correspondente a onde o formulário padrão apareceu no seu site. Se o formulário padrão estava localizado no rodapé, como no exemplo, navegue até modelos > componentes > comum e clique no arquivo footer.html.
- Use o atalho de busca (Command+F no Mac ou Control+F no Windows) para pesquisar a palavra "newsletter" no arquivo de rodapé.
- No código abaixo, encontre a referência ao formulário. No exemplo, o formulário é referenciado em um caminho de arquivo diferente: {{> components/common/subscription-form}}.
- Na barra lateral esquerda, siga o caminho do arquivo referenciado no código (neste exemplo, selecione components > common > subscription-form). A partir daqui, você verá os componentes reais do formulário padrão.
- Como o cabeçalho e o idioma do formulário padrão correspondem aos estilos do restante do nosso site, vamos substituir apenas o campo de entrada do formulário. No código-fonte, você pode ver que a entrada do formulário padrão está contida no elemento <form>.
- Selecione tudo entre as tags <form> de abertura e fechamento e, em seguida, cole o código de incorporação que você copiou do Klaviyo para substituir o texto selecionado.
- Clique em Salvar e aplicar arquivo para aplicar essas alterações ao seu site.
- Se o botão mostrar apenas Salvar arquivo, então o arquivo que você acabou de editar ainda não é o seu Tema atual. Você precisa clicar em Salvar arquivo, depois rolar para cima e selecionar Editar arquivos do tema > Salvar > Usar como tema com atividade no canto superior direito para aplicar o tema ao seu site.
Depois de colar o código de incorporação, salvar e aplicar as alterações no BigCommerce, volte para o seu site e atualize a página. Seu formulário incorporado do Klaviyo vai aparecer no seu site e começar a adicionar novos assinantes à lista do Klaviyo vinculada ao formulário.
Se você não vir seu formulário, consulte solução de problemas de formulários incorporados.
Próximas etapas
Em seguida, crie um fluxo de série de boas-vindas para causar um impacto imediato nos seus novos assinantes.
Recursos adicionais
- How to create an email welcome series
Learn how to create a sequence of emails sent directly after someone subscribes to hear from your brand. This is a critical moment in the customer lifecycle because it's your opportunity to introduce new, interested prospects to your business and product offering. With a welcome series, you should capitalize on this display of interest.
- How to disable notification emails sent by BigCommerce
Learn how to disable different types of notification emails sent by BigCommerce. If you are currently sending certain emails with BigCommerce - such as abandoned cart or order status emails - and plan to start sending them via Klaviyo, you will need to disable these emails in BigCommerce to avoid sending them twice.