Enviando um código de desconto para clientes via pop-up - Tutorial - (WSForm, Twilio, Oxygen)

Publicados: 2022-07-22

Neste tutorial, vamos criar um pop-up que coleta o número de telefone e o endereço de e-mail de um cliente para criar uma lista de SMS e marketing por e-mail para nossa loja WooCommerce. No envio, enviaremos um código de cupom de 10% de desconto e adicionaremos esses dados ao perfil de usuário.

Para isso, usaremos o WSForm para criar o formulário, integrar com o Twilio e acionar a criação do nosso cupom. Usaremos o Oxygen Builder para o pop-up geral e o estilo do formulário. E usaremos o ACF Pro para armazenar o e-mail de marketing e o número de telefone (junto com os dados de aceitação) no perfil do usuário.

Curso de Construtor de Oxigênio - em breve!

O curso Oxygen Builder Mastery o levará do iniciante ao profissional - módulos ACF, MetaBox e WooCommerce incluídos.

Receba notificação de lançamento e desconto

Primeiro, vamos configurar o formulário. Este será um formulário de duas etapas, destinado a coletar primeiro um e-mail e, em seguida, um número de telefone. Com ele, podemos construir duas listas separadas para usar para marketing via SMS e marketing via e-mail.

Estou dividindo-o em duas etapas que devem aumentar a taxa de conversão, pois uma vez que alguém digitou um e-mail, é menos provável que abandone o formulário quando apresentado com mais uma entrada de texto.

Primeiro, adicionamos 2 guias, uma para e-mail e outra para número de telefone.

A primeira guia tem uma entrada de e-mail, juntamente com um botão continuar que exibe a próxima etapa do formulário quando clicado.

Na guia de configurações avançadas do campo de entrada de email, adicionamos um padrão de expressão regular que validará emails.

A próxima guia é um pouco mais complicada.

Aqui, coletamos o número de telefone dos usuários. Isso usa o campo de número de telefone integrado e inclui uma seleção internacional.

No entanto, existem três campos adicionais. Tanto o texto do cupom quanto os campos de consentimento de data e hora ficam ocultos do usuário front-end e são preenchidos dinamicamente. O campo de consentimento é uma caixa de seleção obrigatória que deve ser marcada para o usuário enviar o formulário.

O campo de consentimento de data é preenchido com o carimbo de data e hora usando JavaScript. Quando o formulário é enviado, essas informações são adicionadas a um campo ACF, mostrando o momento específico que eles usam para enviar o formulário e consentir. Isso é útil ao provar que este é um usuário "real" se estou tentando exportar dados para plataformas de SMS ou email marketing.

A entrada de texto do cupom também é ocultada do usuário. Este campo gera um cupom dinâmico que combina o nome de exibição do usuário e uma sequência de texto gerada aleatoriamente. Usaremos isso para criar automaticamente um cupom atribuído ao endereço de e-mail enviado no WooCommerce.

isotrópico-2022-07-20-at-16-44-51 — Isso cria um código como: james-d9sa249a

O botão enviar tem um pouco de HTML nele, e vamos revisitar isso ao estilizar o formulário usando Oxigênio e o detector selecionado. A partir de agora, aqui está a aparência do formulário no frontend:

isotrópico-2022-07-20-at-16-47-01 — Guia 1

isotrópico-2022-07-20-at-16-47-42 — Guia 2

Agora que o formulário está coletando todos os dados de que precisamos, vamos criar algumas ações de envio. Essas são ações que são tomadas quando o usuário envia o formulário.

Na submissão, 4 coisas acontecem, na ordem mostrada acima.

Primeiro, ele adiciona o cupom que foi gerado automaticamente no campo mencionado acima ao WooCommerce.

Em seguida, ele mostra ao usuário uma mensagem de que ele deve esperar um texto com o código em alguns minutos.

Em seguida, usando a integração do WSForm Twilio, ele envia o código para o número de telefone inserido durante o envio.

Por fim, ele atualiza as informações do usuário no perfil de usuário do WordPress, adicionando o número de telefone e o e-mail aos campos personalizados criados com o ACF.

Adicionar o cupom ao WooCommerce é feito usando a ação de envio "run WordPress hook" incorporada ao WSForm e algum PHP personalizado.

<?php // Adicionar filtro add_filter("prog_add_coupon_form", "iso_add_coupon", 10, 2); // Função de filtro function iso_add_coupon($form, $submit) { // Definir meta-chave para o ID do campo 123 (Altere isso para o ID do seu campo) $wsf_autocode = "field_1"; $wsf_useremail = "field_4"; $wsf_userphone = "field_5"; $coupon_code = $submit->meta[$wsf_autocode]["value"]; $quantia = "10"; // Valor $discount_type = "fixed_cart"; // Tipo: fixed_cart, percent, fixed_product, percent_product $coupon = [ "post_title" => $coupon_code, "post_content" => "", "post_status" => "publish", "post_author" => 1, "post_type" => "cupom_loja", ]; $new_coupon_id = wp_insert_post($coupon); // Adiciona meta update_post_meta($new_coupon_id, "discount_type", $discount_type); update_post_meta($new_coupon_id, "coupon_amount", $amount); update_post_meta($new_coupon_id, "uso_individual", "não"); update_post_meta($new_coupon_id, "usage_limit", "1"); update_post_meta($new_coupon_id, "usage_limit_per_user", "1"); update_post_meta($new_coupon_id, "apply_before_tax", "yes"); update_post_meta($new_coupon_id, "free_shipping", "no"); $user_email_res = $submit->meta[$wsf_useremail]["value"]; // O e-mail a ser adicionado update_post_meta($new_coupon_id, "customer_email", $user_email_res); }

Este código adiciona programaticamente um cupom WooCommerce a partir do código gerado no campo WSform.

isotrópico-2022-07-20-at-17-01-39 — É adicionado ao WordPress usando WPCodeBox, uma ferramenta de gerenciamento de trechos

Quando o formulário é enviado, todo esse código é executado.

Recebemos o e-mail, telefone e código do cupom do nosso envio do WSForm. Em seguida, geramos um cupom.

Neste exemplo, o cupom oferece US$ 10 de desconto em um carrinho, pode ser usado uma vez e está restrito ao e-mail enviado no formulário.

isotrópico-2022-07-20-at-17-03-25 — Aqui está o cupom que foi adicionado. Neste exemplo, "admin" é o nome de exibição dos meus usuários. Observe que o cupom está restrito a *ser usado apenas com* o e-mail que foi enviado.

Depois de adicionar nosso cupom ao WooCommerce e atribuí-lo ao e-mail enviado (isso é feito para reduzir fraudes), mostramos uma mensagem de sucesso ao usuário:

Observe o #field(5) dinâmico usado para personalizar a mensagem.

Então, nós realmente enviamos o texto para o usuário. Isso usa a integração Twilio que o WSForm oferece e é fácil de configurar.

Primeiro, instalamos o complemento e o conectamos à conta do Twilio colando nossa chave de API.

isotrópico-2022-07-20-at-17-05-09 — Obter chave de API

isotrópico-2022-07-20-at-17-06-20 — Adicionar às configurações do WSForm

Agora, de volta às ações de envio do formulário, configuramos a mensagem de texto.

Escolhemos o número de origem, conectamos nosso campo de consentimento e adicionamos dinamicamente o número de telefone para o qual enviar a mensagem. A própria mensagem também é criada dinamicamente, combinando uma mensagem de boas-vindas estática e um cupom dinâmico, preenchido a partir do campo oculto gerado automaticamente.

Também podemos adicionar GIFs e mídia, se desejado.

Por fim, armazenamos os dados enviados em algum lugar útil. Nessa situação, usei o ACF pro para criar campos no perfil do usuário.

A ação final usa o complemento WSForm User Management para adicionar esses dados aos campos personalizados no Perfil do usuário.

No entanto, você pode ser mais bem servido enviando essas informações para a GetResponse ou outra plataforma de marketing usando as muitas integrações do WSForm:

Agora que a funcionalidade geral e o mecanismo do formulário estão funcionando, vamos criar nosso pop-up, trazendo esse formulário de captura de dados de marketing para o front-end do site.

O Oxygen Builder e o WSForm são uma ótima combinação. Usando o construtor, é fácil enviar o formulário e ainda mais fácil estilizá-lo.

Usando uma parte reutilizável (que me permite inserir esse pop-up onde eu quiser), primeiro vou adicionar o pop-up, adicionar o formulário e, finalmente, estilizá-lo.

Estou usando um Modal, colunas e alguns outros elementos para fazer um popup clássico de 50% 50%.

Eu inseri o formulário usando um shortcode.

Ele é acionado na intenção de saída.

Agora, tudo o que preciso fazer é estilizar o WSForm. Eu poderia fazer isso usando o personalizador embutido, mas isso é um pouco limitado. Eu também poderia escrever CSS personalizado, mas isso não é visual. A terceira opção é usar o detector de seletor embutido que vem com o Oxygen Builder e estilizar usando o editor. Isso é algo que muitas pessoas não aproveitam simplesmente porque não está habilitado por padrão. Então vá para sua página de configurações para Oxygen e ative o detector seletor.

Agora, clique no elemento shortcode e clique em "detector seletor" na parte inferior.

Use-o para clicar nas entradas e botões, estilizando usando a guia Avançado.

isotrópico-2022-07-20-at-17-37-54 — Estilize usando os IDs do WSF e os elementos dentro deles.

Eu uso o elemento de código curto em vez do elemento Oxygen do formulário WS integrado porque posso desabilitar o código curto e, em seguida, renderizá-lo novamente, trazendo-me de volta à guia original do formulário. Se eu editar o próprio WSForm, posso renderizar novamente o código de acesso sem precisar recarregar o construtor.

isotrópico-2022-07-20-at-17-40-51 — Botão de formulário de estilo em oxigênio

Usando o detector, posso direcionar qualquer pedaço de HTML, permitindo-me editar o intervalo adicionado no segundo botão, diminuindo a fonte.

E assim, criamos um formulário personalizado para nosso site WooCommerce que:

Aparece na intenção de saída, oferecendo $ 10 de desconto
Coleta e-mail e números de telefone em 2 etapas usando WSForm
É personalizado e estilizado de acordo com as diretrizes da marca usando Oxygen
Adiciona um código de cupom exclusivo atribuído ao e-mail enviado no WooCommerce
Envia o código do cupom para o número de telefone enviado
Envia esses dados para o perfil do usuário (campos personalizados adicionados com o ACF pro)

isotrópico-2022-07-20-at-17-45-12 — O código, que foi gerado pelo WSForm e adicionado ao WooCommerce, foi enviado por mensagem de texto para o meu número enviado.