Como incorporar um formulário de registro na sua página de confirmação de pedido do BigCommerce

O que você vai aprender

Saiba como incorporar um formulário de registro na sua página de confirmação da BigCommerce para coletar informações adicionais dos clientes depois que eles concluírem o processo de checkout. Esses clientes recentes já têm interesse na sua marca, então a confirmação é uma ótima oportunidade para interagir ainda mais com eles.

Antes de começar

Verifique se você integrou com a BigCommerce e conferiu a configuração Adicionar automaticamente o JavaScript onsite da Klaviyo (recomendado).

Crie o seu formulário

Você pode criar um formulário de registro e incorporá-lo à sua página de confirmação para fazer perguntas relevantes aos seus clientes depois que eles finalizarem a compra. Por exemplo, você pode fazer perguntas para entender melhor com que frequência um cliente usa seus produtos ou em quais possíveis produtos novos ele pode ter interesse em comprar.

Para criar seu formulário de registro:

1. No Klaviyo, navegue até Site > Formulários de registro e clique em Criar formulário.
2. Se você for solicitado a escolher um canal, dê um nome ao formulário, selecione Web e clique em Criar.
3. Clique em Criar formulário em branco. No menu exibido, insira ou confirme o nome do seu formulário e selecione uma lista para que novos assinantes participem.
4. Selecione Incorporação como o tipo de formulário.
   

5. Clique em Salvar e continuar o projeto.
6. No editor de formulários, personalize as seguintes configurações:
   • Editar estilos: Edite a aparência do seu formulário para combinar com a sua marca, como estilos de formulário ou de campo de dados e tipo de fonte. Você também pode editar qualquer texto clicando nele e substituindo o idioma padrão pelo seu.
   • Adicionar blocos: aqui, você pode adicionar conteúdo ao seu formulário para coletar informações, como uma caixa de texto para uma pergunta ou um campo de data para um aniversário. Não se esqueça de definir uma Propriedade do perfil para cada campo que você adicionar e de não sobrecarregar os clientes com perguntas demais.
   • Comportamento de segmentação e exibição: em Exibição, escolha se o formulário aparece no desktop, no celular ou em ambos. Em Segmentação, defina Público como Mostrar para todos os membros do público para que clientes reconhecidos também possam ver o formulário. Não mostrar para perfis existentes do Klaviyo oculta o formulário dos visitantes que o Klaviyo reconhece, o que pode excluir clientes de quem você quer pedir feedback.
7. Na barra de menus, selecione Sucesso para editar a página exibida depois que alguém envia seu formulário.
8. Quando você estiver satisfeito com o design do seu formulário, clique em Publicar ou agendar. Resolva todos os alertas de formulário bloqueadores e, em seguida, selecione Publicar agora e clique em Publicar agora para ativar o formulário.
9. Abra Segmentação e comportamento de exibição > Exibição e copie o código de incorporação. Você vai usar o ID do formulário desse código no script de instalação abaixo.

Seu formulário não vai aparecer na página de confirmação do pedido até que você adicione o script de instalação abaixo.

Verifique as configurações de inscrição da lista para a qual seu formulário envia os envios. As listas podem usar inscrição em uma etapa ou inscrição em duas etapas. Se a lista usar inscrição em duas etapas, personalize as páginas de confirmação e lembre-se de que novos assinantes precisam confirmar a inscrição antes de entrar na lista.

Adicione o código incorporado ao seu site no BigCommerce

1. Navegue até o admin do BigCommerce.
2. Acesse Storefront > Gerente de scripts e clique em Criar um script.
3. Nomeie o script e configure-o da seguinte forma:
   • Local: cabeçalho
   • Descrição (opcional): Descreva a finalidade do script
   • Páginas em que o script será adicionado: confirmação do pedido
   • Tipo de script: Script
     

4. Exclua o conteúdo do script e cole o seguinte código para adicionar klaviyo.js à sua página de confirmação. Observe que você precisa fazer isso mesmo que já tenha instalado o klaviyo.js no seu site:
   

  <script src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js" async=""></script>
  <script>
     document.addEventListener("DOMContentLoaded", function() {       var elem = document.createElement('div');
     elem.className = 'klaviyo-form-FORM_ID'
     document.body.appendChild(elem);
     });</script>

1. No snippet acima, substitua PUBLIC_API_KEY pela chave de API pública do seu site.
2. No snippet acima, substitua FORM_ID pelo ID depois de klaviyo-form- no código de incorporação que você copiou do Klaviyo. Copie apenas o ID, não o código de incorporação inteiro.

3. Quando você tiver preenchido todos os detalhes do script, clique em Salvar.

Seu formulário incorporado agora será exibido na parte inferior da página depois que alguém fizer um pedido. Dependendo do seu tema, pode ser que você queira editar a borda, o espaçamento interno (padding) ou o tamanho do seu formulário na seção Editar estilos para garantir que ele corresponda à aparência e à experiência da sua página de confirmação do pedido; publique as alterações que você fizer para vê-las refletidas.

Depois de fazer um pedido de teste, verifique se o formulário aparece na parte inferior da página de confirmação do pedido nos dispositivos que você selecionou. Envie uma resposta de teste e confirme se as respostas aparecem no perfil pretendido no Klaviyo. Se você estiver testando uma nova inscrição em uma lista de inscrição em duas etapas, conclua a confirmação antes de verificar se ela faz parte da lista.

Próximas etapas

Depois que você começar a coletar respostas com seu formulário incorporado, cada envio será armazenado no perfil do cliente como uma propriedade personalizada, disponível para uso em segmentos, fluxos e modelos de e-mail.

Com base nas respostas, você pode ramificar a experiência de pós-compra. Você também pode ramificar sua série de boas-vindas com base nesses dados ou criar segmentos relevantes para enviar campanhas. Por exemplo, digamos que decidimos lançar um novo rímel. Como estamos coletando dados de interesse em produtos neste formulário incorporado, podemos avisar qualquer pessoa que nos disse que tinha interesse em rímel no lançamento do produto.

Recursos adicionais