Como incorporar um formulário de inscrição em sua página de confirmação de pedido

O que você vai aprender

Saiba como incorporar um formulário de inscrição em sua página de confirmação para coletar informações adicionais dos clientes depois que eles concluírem o processo de checkout. Esses clientes recentes já estão interessados em sua marca, portanto, a confirmação representa uma grande oportunidade de interagir ainda mais com eles.

As etapas exatas a serem seguidas para incorporar um formulário na página de confirmação do pedido dependerão muito da sua plataforma de comércio eletrônico, mas o processo envolverá a atualização dos arquivos de código da sua loja com um pequeno snippet. Neste guia, descrevemos como fazer isso em duas plataformas de comércio eletrônico:

• Shopify
• BigCommerce

Antes de começar

Se estiver usando o Shopify ou o BigCommerce, ou se tiver o plugin Klaviyo para Magento ou WooCommerce, o senhor estará pronto para começar a criar seu formulário na seção abaixo.

No entanto, se o senhor estiver usando uma plataforma de comércio eletrônico que não se integra nativamente ao Klaviyo, certifique-se de ativar o rastreamentoActive on Site para o seu site. Isso é feito automaticamente para as plataformas listadas acima, mas deve ser feito manualmente para outras plataformas. É o que permite que o Klaviyo publique formulários de inscrição em seu site. 

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. As próximas duas seções abordarão como colar o código para um site do Shopify e, em seguida, para um site do Bigcommerce.

Adicione a incorporação ao seu site da Shopify

1. Navegue até o backend de sua loja Shopify.
2. Acesse Settings (Configurações) > Checkout > Order processing (Processamento de pedidos).
3. Em Additional scripts (Scripts adicionais), cole o código de incorporação.

Para testar como o formulário aparece ao vivo, crie um pedido de amostra e conclua o processo de checkout. Dependendo do tema da sua loja, talvez seja necessário voltar ao editor de formulários para ajustar ligeiramente a aparência desejada. Certifique-se de publicar novamente após fazer qualquer alteração, mas o senhor não precisará adicionar o código de incorporação novamente, pois todas as edições serão aplicadas automaticamente após a publicação.

Em nosso exemplo, adicionamos uma borda branca ao formulário para dar mais preenchimento entre a mensagem "Thank you" e o próprio formulário. 

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