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

O que você vai aprender

Saiba como incorporar um formulário de registro na sua página de confirmação BigCommerce para coletar informações adicionais do cliente depois que ele concluir o processo checkout. Esses clientes recentes já estão interessados em sua marca, portanto, a confirmação representa uma grande oportunidade de se engajar ainda mais com eles.

Antes de começar

Certifique-se de que o senhor tenha feito a integração com o BigCommerce e marcado a configuração Automatically add Klaviyo onsite JavaScript.

Crie seu formulário

O senhor pode criar um formulário de inscrição e incorporá-lo à sua página de confirmação para fazer perguntas relevantes aos seus clientes após o checkout. Por exemplo, o senhor pode fazer perguntas para saber mais sobre a frequência com que um cliente usa seus produtos ou quais novos produtos em potencial ele pode estar interessado em comprar.

Para criar seu formulário de inscrição:

1. No Klaviyo, navegue até Sign-up forms (Formulários de inscrição) > Create Sign-up form (Criar formulário de inscrição) > Build from scratch (Criar do zero).
2. No menu que aparece, dê um nome ao seu formulário e selecione uma lista para os novos assinantes enviarem. 
3. Selecione Embed como o tipo de formulário.
   
4. Clique em Save (Salvar) e continue com o design. 
5. Isso o levará ao editor de formulários, onde o senhor pode editar os seguintes estilos:
   • Estilos: Edite a aparência do formulário para que corresponda à sua marca, como estilos de formulário ou de campo de entrada e tipo de fonte. O senhor também pode editar qualquer texto clicando nele e substituindo o idioma padrão pelo seu próprio. 
   • Adicionar blocos: Aqui o senhor pode adicionar conteúdo ao formulário para coletar informações, como uma caixa de texto para uma pergunta ou um campo de data para um aniversário. Certifique-se de definir uma propriedade de perfil para cada campo que adicionar e de não sobrecarregar os clientes com muitas perguntas.
   • Segmentação e comportamento: Escolha se deseja que o formulário seja exibido no desktop, no celular ou em ambos. Mantenha seu formulário definido como Show to all visitors (Mostrar para todos os visitantes ) ou Don't show to existing Klaviyo profiles (Não mostrar para perfis existentes da Klaviyo ). 
6. Na barra de menus, selecione Success (Sucesso ) para editar a página que é exibida depois que alguém envia o formulário.
7. Quando o senhor estiver satisfeito com o design do formulário, clique em Publish (Publicar).
8. No modal que aparece, copie o código de incorporação para que o senhor o tenha pronto para colar. 
   
9. Clique em Publicar.

O formulário não aparecerá no site até que o código de incorporação seja colado no código do site.

Verifique as configurações de opt-in dessa lista para que a experiência do cliente seja perfeita. Se a lista for double opt-in, o senhor deverá editar as páginas de confirmação. Todas as listas da Klaviyo são configuradas para double opt-in por padrão.

Adicione a incorporação ao seu site BigCommerce

1. Navegue até o administrador do BigCommerce.
2. Acesse o Storefront > Script Manager e clique em Create a Script .
3. Dê um nome ao script e configure-o com o seguinte:
   • Localização: Cabeça
   • Descrição (opcional): Descreva a finalidade do script
   • Páginas onde o script será adicionado: Confirmação do pedido
   • Tipo de script: Script
     
4. Exclua o conteúdo do script e, em vez disso, cole o seguinte código para adicionar klaviyo.js à sua página de confirmação. Observe que o senhor precisa fazer isso mesmo que já tenha instalado o klaviyo.js em 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>

5. No snippet acima, substitua PUBLIC_API_KEY pela chave de API pública do seu site.
6. No snippet acima, substitua FORM_ID pelo ID do seu formulário. Para encontrar o ID do formulário, navegue até o formulário incorporado em sua conta da Klaviyo. O ID do formulário é o código de 6 letras no final do URL.
   
7. Quando o senhor tiver preenchido todos os detalhes do script, clique em Save (Salvar).

Seu formulário incorporado agora será exibido na parte inferior da página depois que alguém fizer um pedido. Dependendo do tema, talvez seja necessário editar a borda, o preenchimento ou o tamanho do formulário na seçãoStyles (Estilos )para garantir que ele corresponda à aparência da página de confirmação do pedido; publique as alterações feitas para que sejam refletidas.

Próximas etapas

Depois que o senhor 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, o senhor pode ramificar a experiência pós-compra. O senhor também pode querer ramificar sua série de boas-vindas com base nesses dados ou criar segmentos relevantes para os quais enviar campanhas. Por exemplo, digamos que decidimos lançar um novo rímel. Como estamos coletando dados de interesse no produto nesse formulário incorporado, podemos notificar qualquer pessoa que tenha nos dito que estava interessada em rímel no lançamento do produto.

Recursos adicionais

• Introdução aos formulários de inscrição
• Como incorporar um formulário de inscrição em seu site