Como criar e-mails dinâmicos acionados por meio de eventos, usando os modelos pré-prontos da SendPulse

Crie e-mails dinâmicos para enviá-los para cada uma das informações personalizadas de seus clientes - por exemplo, o status de seus pedidos em cada etapa. Por conta dos templates serem dinâmicos, você pode incluir não só textos, imagens e links, como também alterar boa parte do conteúdo utilizando variáveis. Esses templates podem ser expandidos para diversos elementos com cards de produtos baseados no número de produtos que um cliente pediu.

A SendPulse tem templates pré-prontos que funcionam a partir do mesmo principio, incluindo elementos para: “Produtos visualizados”, “Carrinho abandonado”, “Complete seu pedido”, “Checkout”, “Pedido enviado”, e “Pedido de feedback”.

Você só tem que selecionar o template desejado a partir do elemento “E-mail” no fluxo do construtor, e criar um evento com a lista de variáveis disponíveis no template. Em seguida, envie esses dados do seu site para a URL criada via API.

Vamos falar de cada etapa com mais detalhes

Escolha um modelo

Você pode selecionar um template imediatamente no construtor de fluxo com o elemento E-mail > Selecionar template > Nossa biblioteca de modelos, e editá-lo neste local. Ou você pode selecionar um template por meio do menu Modelos de e-mail> Biblioteca de templates, editá-lo, e adicioná-lo a um fluxo já existente depois que você terminar de editá-lo.

Edite o modelo

Configurar variáveis do pedido

Clique em Edite o modelo. Visualize a informação padrão - incluindo o design e as variáveis.

Para o template selecionado, informações personalizadas serão adicionadas usando as variáveis: order_id, order_date, delivery_recipient, payment_method, delivery_address, delivery_price, total.

A informação dinâmica é os dados do produto. Esse dado é transmitido por meio de uma matriz e cada variável começa com um item: item.name (nome do produto), item.img (foto do produto), item.price (preço do produto), item.url (link do produto), item_count (quantidade). Dependendo da quantidade de produtos transferidos (cada produto é um objeto separado da matriz de produtos), o número requerido de elementos é adicionado automaticamente.

Você pode mudar as variáveis, e qualquer outra informação ou dado que você deseja exibir no template de e-mail, para combinar com a sua ideia de um design ideal.

Um modo de edição de código fica disponível para cada elemento de texto. Para abrí-lo, selecione um elemento, clique no sinal <> no painel de edição azul. No editor de códigos, por exemplo, você pode encontrar a variável de link - aparece como um hiperlink para o texto de nome do produto e imagem de produto.

Além disso, aqui você pode checar as margens, a cor, tamanho, e outros elementos de formato do texto e tabelas.

Sem o conhecimento de tags e atributos de HTML, ou o que mudar diferentes parâmetros pode acarretar, não é recomendado mudar informações no código-fonte. Utilize a barra de ferramentas para fazer isso ou mantenha as configurações iniciais.

A estrutura deste elemento com o produto é tabelada, como o template como um todo, então cada elemento - seja elemento ou seja texto - é uma célula separada na tabela. Aqui tanto as estilizações de imagem e estilização de tabela são usadas.

Para a variável img, uma tag de exibição de imagem com o atributo de origem <img scr = ”item.img”> foi adicionada ao código do modelo. A própria imagem será transferida para a variável como um link para a imagem. Nesta variável, transfira a imagem do produto que o usuário selecionou. Este elemento também possui opções de estilo para exibir uma imagem através do atributo estilo.

A variável do link é adicionada por meio da tag de criação de link com o atributo de endereço <a href="/item.url">. Em seguida, o link nesse template é executado por meio do clique na imagem do produto ou no nome do produto. Nesse link, você pode transferir para a página do produto no site em que o cliente fez o pedido.

Configurar produtos em uma linha

Observe que nos modelos padrão, todos os produtos são adicionados como uma lista. Para organizá-los em uma linha, como na captura de tela abaixo, você precisa adicionar linhas de código adicionais usando um editor de HTML.

Para fazer isso, adicione a seguinte linha de código dentro da tag <tbody>:

<table>
    <tbody><!--{% set columns = 4 %}--> <!--{% for item in products%}--> <!--{% if loop.first or loop.index0 is divisible by(columns) %}-->
       <tr><!--{% endif %}-->
            <td>{{ item.product_name }}:{{ item.product_price }}</td>
       <!--{% if loop.last or loop.index is divisible by(columns) %}--></tr>
    <!--{% endif %}--> <!--{% endfor %}--></tbody>
</table>

Explicação da linha de código:

Para que isso funcione, você precisa comentar todas as linhas de código, exceto o layout do modelo e as variáveis dinâmicas (item.product_name e outros).

Copie os nomes das variáveis

Se você já editou todas as informações necessárias, copie todos os nomes das variáveis que nós aprendemos no passo anterior.

Por favor, note que a cada caracteres, assim como o formato em que ele é aplicado, tem um significado. Mensagens são criadas literalmente usando dados de variáveis. Se o dado é transferido para um outro nome de variável, um espaço em branco vai ser criado na mensagem recebida pelo usuário.

Nós vamos precisar dos nomes dessas variáveis para criar um evento. Por padrão, todas as variáveis utilizam caixa baixa.

Salve o modelo

Antes de sair do editor de templates, se certifique de que você removeu quaisquer elementos extras adicionados a título de exemplo. Para fazer isso, selecione o elemento e clique no ícone de lixo.

Cheque novamente o template - se tudo estiver certo, clique em Salvar e continuar no canto superior direito.

Crie um evento

Para iniciar o fluxo e transferir dados para o cliente do seu site, você vai precisar criar um evento com as variáveis necessárias.

Navegue para Automações > Gerenciamento de eventos, clique em Adicione um novo evento, e selecione Personalizar evento. Nesses campos, nós vamos adicionar as variáveis que estão especificadas no template.

Quaisquer variáveis de fora da matriz utilizarão as mesmas informações para todos os produtos para os quais blocos dinamicos não são necessários. Elas são escritas como variáveis separadas, cada um em uma nova linha. Na direita selecione o tipo de variável.

Para os dados do produto, existe um elemento que muda a dinâmica dependendo do número de produtos, adicione a variável produtos com o tipo de estrutura (em templates para disposições, por padrão, uma variável com o mesmo nome é usado se você mudar no template, então você também precisa mudar no evento). Então adicione o nome das variáveis para o produto. Nomes de variáveis são adicionadas sem o item.

Após adicionar todas as variáveis, clique em Adicionar. Parabéns, seu evento foi criado com sucesso. Copie a URL para qual os dados serão enviados e a estrutura dos dados em si. Você precisa transferí-lo para seu desenvolvedor para configurar o envio de informações do seu site para uma solicitação de POST.

Conectando tudo e construindo um fluxo

Vá para a seção Automações, e clique em Criar automação caso você não já tenha criado, e selecione Automação 360.

O começo do fluxo será o evento que você criou no primeiro passo.

Você pode escolher a opção de usar as variáveis da lista e selecionar a lista de e-mails. Se sua lista tiver dados de clientes para uma determinada variável, você pode usá-lo no template e nos filtros. Clique em Aplicar.

Então você pode adicionar um elemento de Filtro para filtrar contatos por meio de variáveis recebidos e criar diversas ramificações de scripts, e Ação, SMS, ou elementos Push. Ou selecione imediatamente o elemento E-mail e adicione um template pré-projetado.

Se você nunca criou templates antes, templates com dinâmicas pré-definidas estão localizados na aba Modelos de serviço. Se você já criou e salvou templates personalizados, selecione algum que você precise a partir da seção Meus modelos.

Para editar o template selecionado, clique em Editar abaixo do modelo. Para substituí-lo por um outro template, clique em Deletar modelo e selecione um novo.

Para o elemento E-mail, selecione também o tempo de resposta - imediatamente ou depois de um certo tempo. Selecione o assunto da mensagem e anexe o documento se necessário.

Para e-mails transacionais, você pode desabilitar o link de cancelamento de inscrição. Além disso, você pode adicionar até 3 e-mails sem um link. Depois de preencher todos os dados, clique em Aplicar.

Continue configurando o fluxo se você desejar enviar conteúdos adicionais. Quando você tiver tudo que você precisa, clique em Salvar e executar.

De acordo com as políticas de serviço, todos os e-mails criados são moderados: o conteúdo do e-mail, estatísticas de campanhas e contatos, portanto, são checados. A moderação pode levar até 20 minutos.

Se você iniciar um evento antes da moderação do e-mail, o assinante fica “na fila de espera” por 30 minutos.

Seu fluxo automático está pronto, agora você pode testar e-mails dinâmicos.

Testando o que criamos

Você pode testar o envio da solicitação usando o Gerenciador de eventos. Para fazer isso, selecione um evento e clique em Executar uma solicitação de teste.

Mas nesse caso, você não pode substituir seus valores - um valor teste de texto será adicionado no lugar de cada elemento.

Você pode testar recebendo um e-mail com dados reais por meio do programa. Usando programas do tipo, você pode enviar dados apenas no modo demo, que não servirá para enviar dados reais do seu site. Para casos reais, eles o backend do site por meio da base de dados do site em diversas linguagens de programação, o programador configura o envio destas solicitações.

Para testes, nós vamos usar o programa Postman.

No campo da URL, adicione o link para o evento criado. Para o método de solicitação selecione POST.

No corpo da solicitação, nós precisamos inserir os parametros transmitidos no formato JSON. Você pode adicionar diversos produtos ao parâmetro da combinação de produtos.

Para mandar uma solicitação, clique em Enviar.

Se a solicitação foi bem sucedida, você vai receber uma resposta verdadeira, e um e-mail será enviado para o e-mail especificado com a data de envio.

Exemplos de solicitações para eventos usando modelos pré-prontos

Abaixo está uma lista de todas as solicitações com variáveis que foram adicionadas, por padrão, para templates pré-projetos da SendPulse para fluxos de evento.

Exemplo de solicitação do modelo Complete o pedido:

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "products": [
    {
      "name": "name value",
      "img": "img value",
      "url": "url value",
      "price": 123
    }
  ]
}

Exemplo de solicitação para o modelo Pedido recebido:

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "order_id": 123,
  "order_date": "2020-06-18",
  "delivery_recipient": "delivery_recipient value",
  "payment_method": "payment_method value",
  "delivery_address": "delivery_address value",
  "total": 123
  "products": [
    {
      "name": "name value",
      "img": "img value",
      "url": "url value"  
    }
  ]
}

Exemplo de solicitação para o modelo Pedido confirmado:

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "order_id": 123,
  "order_date": "2020-06-18",
  "delivery_recipient": "delivery_recipient value",
  "payment_method": "payment_method value",
  "delivery_address": "delivery_address value",
  "delivery_price": 123,
  "total": 123,
  "products": [
    {
      "id": 123,
      "name": "name value",
      "img": "img value",
      "url": "url value",
      "price": 123,
      "count": 123
    }
  ]
}

Exemplo de solicitação para o modelo Carrinho abandonado:

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "products": [
    {
      "name": "name value",
      "img": "img value",
      "url": "url value",
      "count": 123
      "price": 123
    }
  ]
}

Exemplo de solicitação para o modelo Pedido enviado:

{
  "email": "e.darkling@gmail.com",
  "phone": "+123456789",
  "order_id": 123,
  "products": [
    {
      "id": 123,
      "name": "name value",
      "img": "img value",
      "url": "url value",
     }
  ]
}

Exemplo de solicitação para o modelo Solicitação de feedback:

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "order_id": 123,
  "products": [
    {
      "id": 123,
      "name": "name value",
      "img": "img value",
      "url": "url value",
     }
  ]
}

Envie e-mails automáticos baseados em templates dinâmicos pré-prontos pela SendPulse e automatize processos de pedidos de produtos.

Escolha o template

Última Atualização: 16.09.2024