Vídeo tutorial: fazer upload dos seus e-mails para o MailChimp
Este vídeo mostra como fazer upload de e-mails HTML do plugin Emailify para Figma para o MailChimp.
Se você precisar de links com merge tags do Mailchimp (por exemplo, *|UNSUB|*) nos seus parágrafos de texto, o campo de link nativo do Figma vai bloqueá-los como URLs inválidas. Para contornar isso, use o formato especial de link do Mailchimp no Emailify, https://mailchimp.invalid/?*|UNSUB|*, e o Emailify vai gerar a merge tag bruta do Mailchimp no HTML exportado.
No painel de exportação do Emailify, selecione a opção MailChimp (API) na lista suspensa e cole uma chave de API válida do MailChimp, que você pode gerar na página de configurações da sua conta do MailChimp.
Quando estiver pronto, clique no botão Upload To MailChimp para começar a exportar para HTML os e-mails que você selecionou no Figma e fazer o upload automático deles para a sua página de templates do MailChimp (que você também acessa pelo menu do painel do MailChimp, clicando em Content e depois em Email templates).
Tornar as imagens editáveis no editor de campanhas do MailChimp
Por padrão, as áreas de conteúdo de texto e as linhas do seu template HTML ficam editáveis no editor de campanhas do MailChimp depois do upload. Se quiser, você também pode deixar as imagens editáveis ativando a opção Editable Images nas configurações de exportação do Emailify.
Ativar imagens editáveis faz com que sejam usadas imagens @1x (em vez de @2x retina). Você pode deixar as imagens do template editáveis no MailChimp com a opção Editable Images, mas, infelizmente, o MailChimp não aceita imagens @2x retina editáveis, então elas serão @1x. Se preferir ter imagens @2x retina que não sejam editáveis, deixe essa opção desativada.
Imagens borradas no editor do MailChimp (quando o template é editável)
Infelizmente, o MailChimp não aceita imagens @2x retina editáveis, então as suas imagens serão exportadas em resolução @1x se você tiver ativado a opção Editable Images. Se preferir ter imagens @2x retina que não sejam editáveis, deixe a opção Editable Images desativada.
Fazer upload manual de exportações .zip locais para o MailChimp (sem usar a API do MailChimp)
Se você preferir fazer o upload manual dos seus templates de e-mail para o MailChimp enviando um arquivo .zip, selecione a opção MailChimp (Zip) na lista suspensa Export HTML e clique no botão Export For MailChimp.
Quando a exportação terminar, clique no botão Download your .zip file, salve o arquivo no seu computador e descompacte-o. Depois disso, você pode fazer o upload dos arquivos .zip da pasta _zips (For upload to MailChimp), dentro da pasta principal descompactada (como mostra a gravação de tela acima).
Modificações do MailChimp no HTML e renderização no Gmail
O MailChimp modifica automaticamente os templates de e-mail HTML enviados antes do envio. Essas alterações são aplicadas de forma obrigatória e não podem ser desativadas.
Algumas das modificações conhecidas são:
- Dividir blocos de media queries
@mediacombinados em várias media queries separadas - Reescrever ou reestruturar regras de CSS
- Remover as aspas
"de alguns seletores CSS (por exemplo,a[href^="tel:"]viraa[href^=tel:])
Essas alterações podem ter efeitos colaterais inesperados, principalmente no Gmail. O Gmail tem um parser de CSS rigoroso e ignora todos os estilos dentro de uma tag <style> se encontrar um único seletor ou propriedade inválido. Isso pode causar problemas como larguras de coluna que não são aplicadas ou layouts que se empilham de forma inesperada.
Sempre que possível, o Emailify aplica soluções específicas para o MailChimp durante a exportação do plugin, para evitar problemas conhecidos. No entanto, como essas modificações acontecem depois do upload do HTML, parte do comportamento está fora do nosso controle (principalmente se você também adicionar CSS personalizado).
Se você encontrar problemas de layout específicos do Gmail ao enviar pelo MailChimp, é muito provável que eles venham dessas transformações automáticas do template, e não do HTML original exportado do Figma.