--- url: "/pt/emailify/integrations/klaviyo.md" description: "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." --- # 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. [Embedded media](https://www.youtube-nocookie.com/embed/7OCqmOsrAYk) > **Tip:** Se você precisar de links de template do Klaviyo (por exemplo, `{{ event.url }}`) nos seus [parágrafos de texto](/pt/emailify/content/link-paragraphs), 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](https://www.klaviyo.com/settings/account/api-keys). 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](https://www.klaviyo.com/email-templates/list). > **Info:** 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 {#updating-klaviyo-templates-uploaded-from-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. > **Tip:** 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. > **Warning:** 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 {#using-your-uploaded-klaviyo-email-template-in-a-campaign} 1. Crie uma nova [campanha de e-mail](https://www.klaviyo.com/campaigns) 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 {#a-b-testing-custom-html-templates-in-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. > **Tip:** 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](https://help.klaviyo.com/hc/en-us/articles/115005228148). ## Textos/imagens editáveis no Klaviyo (opcional) {#editable-text-images-in-klaviyo-optional} > **Warning:** **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](https://www.klaviyo.com/campaigns) 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 {#fixing-klaviyo-s-automatic-padding-overrides-in-editable-campaigns} [Video](/assets/videos/emailify/export/klaviyo-padding-overrides.mp4) Como o Klaviyo [atualizou o editor](https://help.klaviyo.com/hc/en-us/articles/13160284274459) 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 `` 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 {#adding-a-dynamic-product-feed-to-your-klaviyo-emails} ### 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. [Embedded media](https://www.youtube-nocookie.com/embed/PaRSIxVLYlo) Para adicionar um [feed de produtos](https://help.klaviyo.com/hc/en-us/articles/115005082787) 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. > **Note:** **Se precisar de ajuda com isso**, fale com um desenvolvedor da sua equipe ou com o [seu representante de suporte do Klaviyo](https://www.klaviyo.com/support), 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 {#manually-adding-editable-region-to-drag-drop-the-klaviyo-product-feed} 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: ``` Drag and Drop your Klaviyo Product Feed Block Here NOTE: Remove this text element in Klaviyo's editor when you're done! Video Tutorial: https://www.youtube.com/watch?v=PaRSIxVLYlo ``` Cole o código na linha acima de ` **Note:** **Se precisar de ajuda com isso**, fale com um desenvolvedor da sua equipe ou com o [seu representante de suporte do Klaviyo](https://www.klaviyo.com/support), 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.