Fazer upload dos seus e-mails para o Klaviyo

O Emailify tem uma integração nativa com o Klaviyo, que faz o upload de e-mails HTML direto do plugin para Figma para os seus templates do Klaviyo.

Vídeo tutorial: fazer upload dos seus e-mails para o Klaviyo

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

Se você precisar de links de template do Klaviyo (por exemplo, {{ event.url }}) 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 Klaviyo no Emailify, https://klaviyo.invalid/?{{ event.url }}, e o Emailify vai gerar a sintaxe bruta de template do Klaviyo no HTML exportado.

No painel de exportação do Emailify, selecione a opção Klaviyo na lista suspensa e cole uma chave de API privada válida do Klaviyo (seguindo os passos abaixo):

  1. Entre no Klaviyo e acesse a sua página de configurações de chaves de API do Klaviyo.
  2. Clique no botão Create Private API Key.
  3. Dê um nome à chave (por exemplo, “Emailify API Key”) e marque o botão de opção Custom Key.
  4. Defina o botão de opção dos API Scopes de Templates como Read/Write Access (todos os outros escopos de API podem ficar como No Access).
  5. Clique no botão de ícone Copy, na seção Your Private Key da tela de confirmação de criação da chave.
  6. Cole a chave de API copiada (que deve ter um formato parecido com pk_b3338b071136f98817d2a0e0a9581137ee) no plugin Emailify.

Quando estiver pronto, clique no botão Upload To Klaviyo 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 Klaviyo.

Se o seu e-mail HTML tem menos de 102kb, mas ainda assim é cortado no Gmail depois de enviado pelo Klaviyo, a causa é o rastreamento de links ativado no Klaviyo: ele troca automaticamente as URLs originais dos seus links por “URLs de rastreamento” bem mais longas e aumenta o tamanho do HTML enviado. Para evitar isso, você pode desativar a configuração de rastreamento de links/GA na sua conta do Klaviyo.

Atualizar templates do Klaviyo enviados pelo Emailify ​

Se quiser que o Emailify atualize automaticamente o mesmo template do Klaviyo em vez de criar um novo template a cada vez, ative a opção Enable Updatable Templates nas configurações de exportação do plugin quando a opção Klaviyo estiver selecionada.

Depois do primeiro upload bem-sucedido, isso adiciona automaticamente um valor klaviyoTemplateId ao nome do frame no Figma, e o Emailify reutiliza esse ID de template armazenado na próxima vez que o mesmo frame for enviado para o Klaviyo.

Ative a opção Enable Updatable Templates antes de fazer o upload do template pela primeira vez. É esse upload inicial que armazena o ID original do template do Klaviyo no nome do seu frame do Figma para os próximos uploads.

Isso atualiza apenas o template salvo na sua biblioteca de templates do Klaviyo. Se esse template já foi usado em uma campanha ou flow do Klaviyo, o Klaviyo cria uma cópia para essa mensagem, então um novo upload pelo Emailify não substitui automaticamente essas cópias em uso.

Usar o template de e-mail enviado ao Klaviyo em uma campanha ​

  1. Crie uma nova campanha de e-mail no Klaviyo.
  2. Clique no nome do seu novo template na aba Email:saved da lista da página Templates.
  3. Clique no botão Use template na janela pop-up de pré-visualização.
  4. Clique no botão Save na página do editor de código (este passo é importante).
  5. Depois da mensagem “Your changes have been saved.”, clique no botão Back to Content.
  6. Agende a sua campanha de e-mail conforme necessário.

Teste A/B de templates HTML personalizados no Klaviyo ​

O Klaviyo aceita testes A/B de e-mails HTML personalizados, mas, ao criar o teste, a Variation B vira automaticamente uma cópia idêntica da Variation A. Para testar dois designs diferentes do Emailify:

  1. No Figma, dê nomes claros aos dois frames do Emailify, por exemplo, Summer Sale - Test A e Summer Sale - Test B. O Emailify usa esses nomes de frame como nomes dos templates salvos no Klaviyo.
  2. Faça o upload dos dois frames para o Klaviyo como templates salvos separados.
  3. Use o template Test A para criar a sua campanha no Klaviyo e clique em Create A/B test, acima da linha de assunto. O Klaviyo vai criar a Variation B como uma cópia da Variation A.
  4. Em outra aba do navegador, abra o template salvo Test B em Content > Templates, abra o editor de código dele e copie todo o HTML.
  5. Volte à campanha, abra a Variation B, clique em Edit, substitua o HTML copiado do Test A pelo HTML do Test B e salve as alterações.
  6. Dê nomes descritivos às duas variações, depois pré-visualize ou envie um teste de cada versão e revise a versão em texto simples antes de agendar a campanha.

Se você estiver testando o design ou o conteúdo do e-mail, mantenha a linha de assunto e os dados do remetente iguais, para que só uma variável mude.

Para saber mais sobre como configurar o teste e escolher uma métrica para definir a vencedora, leia o guia de testes A/B do Klaviyo.

Textos/imagens editáveis no Klaviyo (opcional) ​

IMPORTANTE: o novo editor do Klaviyo adiciona padding automático aos blocos de texto e aos botões editáveis. Infelizmente, você vai precisar redefinir manualmente cada um deles para “0” para que o e-mail fique igual aos designs originais do Figma, seguindo o vídeo da seção Corrigir o padding automático do Klaviyo em campanhas editáveis, abaixo.

Se quiser que os blocos de conteúdo possam ser editados depois do upload do template para o Klaviyo, ative a opção Editable Content nas opções de exportação do Emailify e siga os passos abaixo no Klaviyo:

  1. Crie uma nova campanha de e-mail no Klaviyo.
  2. Clique na opção Drag and Drop na etapa Content da campanha.
  3. Clique na aba My Templates e depois no seu novo template.
  4. Clique no botão Save e depois em Back to Content.
  5. Clique no botão Edit Email.

Corrigir o padding automático do Klaviyo em campanhas editáveis ​

Como o Klaviyo atualizou o editor e passou a obrigar todos os templates a usá-lo a partir de 6 de junho de 2023, infelizmente, se você exporta e-mails HTML com a opção Editable Content ativada no Emailify, o Klaviyo aplica por padrão cerca de 18px de padding adicional em volta de cada elemento de texto. Esse padding entra como um atributo style inline em um novo elemento <td> que o Klaviyo injeta no HTML quando o template é editável.

Ativar a opção Force the padding added by Klaviyo's new editor to be 0px no Emailify adiciona automaticamente um CSS extra que remove esse padding em todos os clientes de celular e nos clientes de desktop que não são o Outlook, como o Gmail. No entanto, o Outlook continua exibindo o padding, a menos que você altere manualmente para “0” cada um dos valores de “Padding” dos blocos de texto editáveis do template ao editar o e-mail da sua campanha no editor do Klaviyo.

Adicionar um feed de produtos dinâmico aos seus e-mails do Klaviyo ​

Vídeo tutorial: adicionar um feed de produtos dinâmico aos seus e-mails do Klaviyo

Este vídeo mostra como adicionar feeds de produtos personalizados do Klaviyo a templates HTML personalizados com o plugin Emailify para Figma.

Para adicionar um feed de produtos dinâmico do Klaviyo ao seu template de e-mail HTML no Emailify, você pode usar uma das predefinições de componentes da aba Ecomm, entre as abas de categorias do plugin Emailify.

Depois de adicionar o componente ao seu frame do Emailify, troque o nome YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE no componente adicionado pelo nome do feed de produtos que você criou na sua conta do Klaviyo.

Para usar feeds de produtos em HTML personalizado no Klaviyo, você também precisa ativar a opção Editable Content nas opções de exportação do Emailify. Isso permite arrastar e soltar um bloco “Product” padrão da barra lateral “Blocks” do editor do Klaviyo no seu e-mail depois que ele for enviado aos seus templates do Klaviyo.

Vale a pena acompanhar o vídeo tutorial acima para ver como fazer isso passo a passo e garantir que o seu template do Klaviyo esteja configurado corretamente. Caso contrário, os dados do seu feed de produtos podem não aparecer se algum passo não tiver sido seguido corretamente.

Se precisar de ajuda com isso, fale com um desenvolvedor da sua equipe ou com o seu representante de suporte do Klaviyo, pois nós (Emailify) não podemos oferecer suporte técnico nem ajudar com implementações personalizadas desse recurso de templates mais avançado do Klaviyo.

Adicionar manualmente uma região editável para arrastar e soltar o feed de produtos do Klaviyo ​

Desde 2025, ao que parece, também é preciso incluir manualmente esta região editável no seu template HTML pelo próprio editor de código de templates HTML do Klaviyo primeiro e salvar o template novamente antes de usá-lo em uma campanha, para garantir que o feed de produtos dinâmico carregue os dados:

<table>
  <tr>
    <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
      <div class="klaviyo-block klaviyo-text-block">
        Drag and Drop your Klaviyo Product Feed Block Here <br/>
        NOTE: Remove this text element in Klaviyo's editor when you're done! <br/>
        Video Tutorial: <a href="https://www.youtube.com/watch?v=PaRSIxVLYlo" target="_blank">https://www.youtube.com/watch?v=PaRSIxVLYlo</a>
      </div>
    </td>
  </tr>
</table>

Cole o código na linha acima de <div dir="auto" lang="en"... no seu template HTML, dentro do editor de templates do Klaviyo. Isso o adiciona ao topo do template.

Adicionar um feed de produtos de carrinho abandonado aos seus e-mails do Klaviyo ​

Vídeo tutorial: criar no Figma um template de e-mail para o fluxo de carrinho abandonado do Klaviyo

Este vídeo mostra como adicionar fluxos personalizados de carrinho abandonado do Klaviyo a templates HTML personalizados com o plugin Emailify para Figma.

Para adicionar ao seu template de e-mail HTML no Emailify um bloco dinâmico de fluxo de carrinho abandonado do Klaviyo, você pode usar uma das predefinições de componentes da aba Ecomm, entre as abas de categorias do plugin Emailify, para as seguintes variantes:

  • Shopify
  • WooCommerce
  • Magento 1
  • Magento 2
  • BigCommerce

Isso cria automaticamente as camadas com as variáveis de dados de eventos de produto do Klaviyo para cada plataforma. Observe que você ainda vai precisar configurar o seu fluxo de carrinho abandonado no Klaviyo para que isso funcione.

Se precisar de ajuda com isso, fale com um desenvolvedor da sua equipe ou com o seu representante de suporte do Klaviyo, pois nós (Emailify) não podemos oferecer suporte técnico nem ajudar com implementações personalizadas desse recurso de templates mais avançado do Klaviyo.