Fazer upload dos e-mails para o Customer.io

Faça upload pela API do Customer.io de e-mails ou templates reutilizáveis para o Design Studio, ou exporte um ZIP para copiar o HTML manualmente.

Vídeo tutorial: fazer upload dos e-mails para o Customer.io

Este vídeo mostra como fazer o upload manual de e-mails HTML do plugin Emailify para Figma para o Customer.io.

O Emailify tem duas opções de exportação para o Customer.io:

  • Customer.io (API) faz o upload dos e-mails direto para o Design Studio do Customer.io como e-mails ou como templates de e-mail reutilizáveis.
  • Customer.io (Zip) exporta um arquivo ZIP que você pode copiar manualmente para o Customer.io.

Fazer upload direto para o Design Studio do Customer.io ​

No painel de exportação do Emailify, selecione a opção Customer.io (API) na lista suspensa, cole uma App API Key válida do Customer.io e escolha a região do Customer.io correspondente ao seu workspace.

Se o seu workspace do Customer.io estiver hospedado na UE, escolha a região EU no Emailify. Caso contrário, mantenha selecionada a região padrão US.

Use a configuração Upload As para escolher se o Emailify cria templates de e-mail reutilizáveis ou e-mails normais do Design Studio no Customer.io. O padrão é Template, para manter a compatibilidade com versões anteriores. Quando estiver tudo pronto, clique no botão Upload To Customer.io para começar a exportar para HTML os e-mails selecionados no Figma e fazer o upload automático deles para o Design Studio do Customer.io.

Você vai precisar de uma App API key do Customer.io que possa criar e-mails do Design Studio no seu workspace do Customer.io.

Ao fazer upload pela API do Customer.io, o Emailify envia por padrão as imagens de e-mail compatíveis para o Customer.io Assets. Ele usa uma pasta emailify no Customer.io Assets e cria essa pasta automaticamente se ela ainda não existir. As imagens que o Customer.io Assets não aceita, incluindo as que passam do limite de 2 MB por arquivo do Customer.io, são enviadas para a Hypermatic como alternativa, para que o e-mail ou template do Design Studio ainda possa referenciar uma URL de imagem hospedada.

Atualizar e-mails e templates do Customer.io enviados pelo Emailify ​

Se quiser que os seus e-mails ou templates do Customer.io sejam atualizados automaticamente, em vez de serem criados como novos itens a cada vez, ative a opção Enable Updatable Templates nas configurações de exportação do plugin (ou Enable Updatable Emails quando a configuração Upload As estiver definida como Email).

Isso adiciona automaticamente um valor customerioEmailId ou customerioTemplateId ao nome da camada do frame do Figma enviado e reutiliza esse ID quando o mesmo frame for enviado de novo ao Customer.io pela API na próxima exportação do plugin.

Atenção: você precisa conferir se a opção Enable Updatable Templates ou Enable Updatable Emails também está ativada antes de fazer o upload inicial do e-mail ou do template, porque é isso que adiciona o ID original do e-mail ou template do Customer.io ao nome do frame do Figma. Esse ID passa a ser usado em todos os uploads seguintes para atualizar o mesmo item na sua conta do Customer.io (em vez de criar um novo a cada vez), desde que a opção de atualização continue ativada.

Para atualizar e-mails ou templates no Customer.io, você precisa usar uma App API key do mesmo workspace e da mesma região do Customer.io que receberam o upload original.

Fazer o upload manual de uma exportação ZIP para o Customer.io ​

No painel de exportação do Emailify, selecione a opção Customer.io (Zip) na lista suspensa. Quando estiver tudo pronto, clique no botão Export For Customer.io para começar a exportar para HTML os e-mails selecionados no Figma.

Quando a exportação terminar, baixe o arquivo .zip para o computador e descompacte. Abra o arquivo index.html dentro da pasta com o nome do seu e-mail em um editor de código ou de texto, copie todo o HTML do arquivo e depois:

  • Entre na sua conta do Customer.io.
  • Expanda o item de menu Content na navegação de administração.
  • Clique no item de menu Email Layouts.
  • Clique no botão Create Layout.
  • Clique na opção Start from scratch.
  • Dê um nome ao layout e clique em Create Layout.
  • Cole o HTML copiado do arquivo index.html exportado no editor da aba Edit.
  • Clique no botão Save changes.

Criar um layout totalmente em branco no Customer.io ​

Confira se você está usando um layout totalmente em branco! Por padrão, o Customer.io adiciona automaticamente as próprias tags HTML extras (por exemplo, head, body etc.) a todo layout novo. Você precisa remover esse código; caso contrário, o template HTML vai aparecer quebrado quando for enviado.

No Customer.io, ao começar a criar um e-mail, você precisa selecionar um Layout, e ele precisa estar totalmente em branco para que o seu template HTML personalizado seja a única coisa renderizada.

Seleção de um layout de e-mail no Customer.io

Como você pode ver na captura de tela abaixo, um Layout que parece em branco não está realmente em branco (ele inclui automaticamente as tags <html>, que envolvem o conteúdo do seu template HTML).

HTML padrão em um layout do Customer.io

Para resolver, remova manualmente todo o HTML que o Customer.io adiciona ao Layout em branco e deixe apenas a tag content (abaixo).

Layout do Customer.io em branco apenas com a tag content

Depois que o Layout for salvo e contiver apenas a tag content, o seu template HTML personalizado deve ser renderizado como esperado.