O editor de e-mail permite criar, de forma responsiva e visual, o conteúdo dos e-mails que serão enviados aos seus clientes a partir da sua conta, através de workflows criados para esse fim.
Como acessar?
Você pode acessar o editor de e-mail por dois caminhos:
1. Em “Conteúdo > E-mails”. Clique em Criar novo e-mail para gerar um novo conteúdo, ou em Mais e selecione Editar para modificar um e-mail existente.
2. A partir do nó "Enviar e-mail" de um workflow, clicando em (Editar configuração do nó). Clique em Criar novo conteúdo ou em Editar para modificar um e-mail existente.
Interface
O editor de e-mail é composto por três painéis:
1. Pré-visualização e salvamento: para salvar ou descartar as alterações feitas e pré-visualizar o resultado final do e-mail que será enviado.
2. Design: para construir visualmente o e-mail usando as estruturas e componentes do painel 3 (ferramentas).
3. Ferramentas: para configurar todas as propriedades do e-mail, acessar modelos e adicionar variáveis. Este painel pode ser expandido ou recolhido clicando em (Abrir ferramentas) ou (Fechar ferramentas).
Funcionamento
O editor de e-mail se baseia no método de design 'drag and drop' (arrastar e soltar), permitindo montar os e-mails de forma rápida, simples e muito visual.
1. Classificar o e-mail
No painel de design (2), categorize seu e-mail e localize-o rapidamente clicando em Inserir etiquetas e adicionando palavras-chave que ajudem a identificá-lo.
As etiquetas são muito úteis tanto para encontrar seus workflows mais rapidamente quanto para extrair relatórios no Data Explorer. Recomendamos adicionar etiquetas com:
— Nome da campanha.
— Data de envio.
— Público-alvo.
— Objetivo da campanha (venda, fidelização, captação…).
Por exemplo, utilizando as etiquetas “Natal 2022”, “Clientes B2B” e “Captação”.
2. Editar estilo geral
No painel de Ferramentas (3), clique na aba Geral para editar os parâmetros de aparência geral. Também é possível acessar clicando em Propriedades gerais no painel de design (2).
Os parâmetros a serem definidos são:
-
Nome do conteúdo: nome que você deseja dar ao conteúdo para identificá-lo em sua conta do Connectif.
O nome do conteúdo não é o assunto do e-mail. Para configurar o assunto, consulte o artigo Campanha de e-mail em massa.
-
Cores: cor de fundo do conteúdo e cor de fundo geral.
-
Disposição: largura do conteúdo em pixels e limite para modo responsivo (a partir de qual largura de tela será considerado um dispositivo móvel).
-
Texto: fonte ou tipografia padrão dos textos do e-mail.
Você pode adicionar novas tipografias para personalizar ao máximo seus e-mails. Para isso, recomendamos contar com a ajuda de um especialista em design e codificação CSS e HTML.
-
Resumo: texto que aparecerá para o cliente na pré-visualização do e-mail, logo após o assunto.
-
Cabeçalho: título que aparecerá na aba do navegador do contato ao clicar em “ver no navegador”.
-
Opções HTML: configuração geral de estilo baseada em CSS e HTML.
Recomendamos não editar esta seção sem a ajuda de um especialista em design e codificação CSS e HTML.
3. Construir o e-mail por blocos
No painel de Ferramentas (3), clique na aba Componentes para criar sua composição arrastando e soltando estruturas ou elementos no painel de design (2).
Estrutura
Distribuição que um bloco de conteúdo terá dentro do e-mail. Pode ser apresentado em uma ou várias colunas, com proporções iguais ou diferentes.
A estrutura deve ser inserida primeiro. Caso não seja incluída, será utilizada por padrão a estrutura de uma única coluna.
Depois de criar uma estrutura, posicione o cursor sobre ela e clique em (Editar bloco) para modificá-la, (Duplicar bloco) para criar um igual ou (Excluir bloco) para removê-lo.
Elementos
Conteúdos multimídia que você pode adicionar ao seu e-mail, arrastando-os para o painel de design (2). Assim como com a estrutura, você pode editá-los posicionando o cursor sobre o elemento e clicando no botão (Editar elemento) ou sobre o conteúdo em si. Também é possível duplicá-los clicando em (Duplicar elemento), ou excluí-los clicando em (Excluir elemento).
Os elementos disponíveis são:
-
"Texto".
Escreva seu conteúdo aplicando formatação rica (negrito, itálico, links...), inserindo variáveis dinâmicas ou ajustando a disposição no bloco inserido.
As variáveis dinâmicas permitem personalizar o texto com base nos dados do perfil de cada contato. Para saber mais sobre variáveis e melhorar os resultados dos seus e-mails, recomendamos ler o artigo Variáveis predefinidas para personalizar e-mails e conteúdos.
O botão (Converter para HTML) deste e de outros elementos, converte o bloco de texto para o formato HTML de forma irreversível. Para utilizar esta função, é necessário ter conhecimentos básicos em HTML & CSS. Se você não tiver um especialista, recomendamos não converter.
-
"Imagem".
Se a imagem já estiver publicada na internet, cole a URL da imagem para incluí-la no conteúdo. Se preferir enviá-la do seu dispositivo, clique em Carregar imagem ou no ícone de montanhas, e selecione o arquivo na janela do navegador que será exibida. Ao carregar, a URL da imagem será preenchida automaticamente.
Como configurações adicionais, você pode inserir o texto alternativo (exibido caso a imagem não carregue), o atributo 'title' (mostrado ao passar o mouse sobre a imagem) e a disposição no bloco.Se precisar editar sua imagem, você pode usar o editor de imagem.
-
"Botão".
Defina o texto que aparecerá no botão, o atributo ‘title’ e o link (pode ser específico ou predefinido para executar uma ação). Para configurar a aparência visual, escolha as cores de texto e fundo e ajuste a disposição no bloco. -
"Social".
Escolha as redes sociais que deseja incluir e edite a URL dos links, além da disposição no bloco. -
"Divisor".
Configure a cor e a disposição da linha horizontal para separar conteúdos visualmente. -
"Espaço".
Defina a distância de espaço em branco que deseja inserir entre dois blocos. -
"Produtos" (OLD).
Insira um bloco de produtos que poderá ser preenchido via workflow com os artigos de interesse do contato. Você pode escolher um dos três modelos padrão (Produto básico, Produto com marca ou Produto com preço) ou personalizar sua aparência no editor de texto ou como HTML. Também é possível definir a estrutura de linhas e colunas para desktop e mobile.
-
"Produtos" (NOVO).
Insira um bloco de produtos que poderá ser preenchido por meio de um workflow com os artigos de interesse do contato. Você pode editá-lo usando um modelo ou o editor HTML. Ao editar como modelo, selecione uma das três opções (Vertical, Imagem à Esquerda ou Imagem à Direita) e personalize facilmente cada elemento para definir quais atributos do produto serão exibidos no card, a ordem, o estilo, etc. Além disso, é possível escolher o número de linhas e colunas a exibir no modo desktop ou mobile. Você poderá ver em tempo real como ficará o resultado final do design no editor.
Para que o bloco de produtos seja preenchido com os itens de interesse do contato, é indispensável usar o nó “Obter produtos” antes do nó “Enviar e-mail”. Saiba mais nos artigos Exibir produtos personalizados no e-mail de carrinho abandonado e Nó “Obter produtos”.
-
"HTML".
Insira um código HTML personalizado e ajuste sua disposição.
Para inserir este elemento, será necessário o suporte de um especialista em design e codificação CSS e HTML, para garantir a visualização correta do conteúdo.
-
"Ver no navegador"
Texto predefinido para inserir um link que permite visualizar o conteúdo do e-mail em uma janela do navegador. Ao editar o link, você poderá modificar o texto de exibição, o título e escolher se ele será aberto em uma nova aba.
O link sempre será “#__cn_view_in_browser” e vem configurado por padrão. Você pode acessá-lo através da opção Inserir/Editar link do editor.
-
"Rodapé"
Texto predefinido para inserir um rodapé no seu e-mail, onde você pode especificar os dados da sua empresa e oferecer ao cliente a opção de cancelar a inscrição ou reenviar o e-mail.
O RGPD exige oferecer aos clientes a opção de cancelar a inscrição de forma visível, por isso o link de “Cancelar inscrição” deve estar sempre presente em e-mails do tipo newsletter. O link de cancelamento deve ser sempre “#__cn_unsubscribe”.
4. Criar, editar ou excluir um bloco global
Salve um bloco como global para poder usá-lo em todos os seus e-mails e editá-lo simultaneamente em todos os e-mails onde for adicionado.
Os blocos globais são muito úteis, por exemplo, para criar o cabeçalho dos seus e-mails, blocos de produtos visitados e outros elementos que você possa usar frequentemente em seus e-mails.
Para isso, depois de adicionar os elementos desejados ao seu bloco, passe o cursor sobre ele e clique no botão Criar bloco global.
Em seguida, na janela pop-up, será exibida a Loja onde o bloco será criado. Indique um nome para ele e clique no botão Criar bloco global.
Uma vez criado, salve o e-mail e você já poderá usá-lo em seus conteúdos de e-mail. Para utilizá-lo, na aba Componentes do editor, vá até Meus blocos globais e localize o bloco que você criou. Arraste-o para o editor como qualquer outro componente.
Enquanto o e-mail onde o bloco global foi criado ou adicionado não for salvo, ele não será considerado como em uso.
Você poderá editar o bloco em nível global para que ele seja atualizado em todos os seus e-mails, clicando no bloco e selecionando a opção Edição Global.
Se quiser editar o bloco apenas para o e-mail atual, clique em Desvincular e editar para fazer as alterações.
Depois de modificar, clique em Publicar alterações para que o novo design seja salvo e publicado automaticamente em todos os e-mails onde estiver sendo utilizado.
Para excluir o bloco global, na aba Componentes do editor, vá até Meus blocos globais, localize o bloco que deseja remover e clique em (Excluir).
Na janela pop-up, você poderá ver os usos desse bloco. Para confirmar a exclusão, clique no botão Excluir bloco global.
O bloco será desvinculado de todos os conteúdos onde está em uso, mas não será removido desses conteúdos. Além disso, esta ação não pode ser desfeita.
Além disso, você poderá acessar todos os seus Blocos Globais a qualquer momento sem precisar entrar no Editor de Email, através de "Conteúdo > Blocos globais de email".
5. Criar e personalizar um bloco de produtos
O bloco Produtos permite inserir um elemento que poderá ser preenchido em um workflow com produtos personalizados para o contato, conforme seus interesses (produtos em oferta, produtos no carrinho, últimos produtos visitados, etc.)
Para isso, no painel de Ferramentas (3), clique na aba Componentes e localize o bloco Produtos (Novo). Selecione-o e arraste-o para o painel de Design (2), no local onde deseja posicioná-lo.
Clique sobre o elemento ou em (Editar).
(Opcional) dê um Nome e selecione um dos três modelos (Vertical, Imagem à Esquerda ou Imagem à Direita).
No nosso exemplo, foi escolhido o modelo Vertical.
Em Link para a página do produto, você pode indicar o ID da variável que direcionará para a página do produto. Por padrão está indicado buttonURL.
Aprenda o que são e como funcionam as variáveis na Connectif neste artigo.
Se você marcar a caixa Vincular todo o cartão de produto (ativada por padrão), qualquer elemento incluído sobre o produto no e-mail será vinculado à página.
Por outro lado, se você quiser que nem todos os elementos sejam vinculados, desmarque a caixa e, no menu suspenso de cada elemento, personalize na seção Link se deseja que esse elemento seja vinculado (através da opção Link para a página do produto) ou se deseja que não seja vinculado (com a opção Sem Link).
No nosso exemplo, estaríamos ativando o link para a página do produto em seu Nome.
Para editar cada um dos elementos que podem compor o cartão de Produto, clique no menu suspenso que eles contêm.
Personalize facilmente cada um dos elementos para definir sua aparência final sem precisar editá-lo como HTML. Cada um deles contém opções relacionadas à sua aparência e conteúdo, bem como o ID da Variável que o contém e que você deverá completar através da atribuição de variáveis com o nó "Enviar email".
Aprenda passo a passo como mostrar produtos personalizados em um e-mail com este caso de uso de variáveis.
Se você precisar adicionar outras informações aos cartões de Produto, clique na opção Adicionar variável e, no novo elemento criado (por padrão com o nome variavel1) edite o conteúdo que desejar incluir, assim como com os demais elementos.
Uma vez configurado seu bloco de Produtos, você poderá salvá-lo como Bloco Global (ver ponto 3.3) para reutilizá-lo em outros e-mails com o mesmo design e objetivo.
6. Aplicar uma condição a um bloco
Aplique uma condição aos blocos desejados para exibi-los somente se o contato atender à condição estabelecida. Você pode definir a condição com base na pertença ou não a um segmento ou com base no valor de um campo do contato.
Para isso, passe o cursor sobre o bloco que deseja mostrar ou ocultar dependendo das condições e clique no botão Adicionar condição.
Para definir uma condição com base no valor de um campo do contato, escolha a opção Campos do contato. Em seguida, escolha o campo, o operador e o valor que o campo deve conter para que o bloco seja exibido para o contato.
Para definir uma condição com base na pertença ou não do contato a um ou vários segmentos, escolha a opção Segmento. Em Selecionar o operador, escolha se deve pertencer a um dos segmentos indicados, a todos, se não deve pertencer a algum dos selecionados ou a todos eles. Por fim, selecione o(s) segmento(s) que atuarão como filtro condicional.
Clique em Selecionar e, em seguida, em Aplicar. Desta forma, o Connectif exibirá este bloco apenas para os contatos que atenderem à condição.
7. Utilizar modelo existente ou salvar um novo
Crie rapidamente seus emails utilizando modelos predefinidos pela Connectif ou criados por você a partir do painel de Ferramentas (3), na aba Modelos, clicando em Usar modelo. Você também poderá salvar o design que elaborou como modelo clicando em Criar modelo a partir deste conteúdo.
8. Adicionar links predefinidos a um botão
Além dos elementos predefinidos explicados no ponto 3, (Ver no Navegador e Cancelar inscrição), a Connectif oferece vários links predefinidos que podem ser adicionados aos botões dos emails e oferecem certas funcionalidades sem precisar criá-las manualmente.
Para adicionar um desses links, adicione um botão ao seu modelo de email, adicione um componente Botão ao seu email e edite sua configuração.
Na seção Botão do link, clique no botão Adicionar link predefinido.
Clique no menu suspenso e selecione o link predefinido que deseja incluir no seu botão. Estão disponíveis:
- Confirmar inscrição na newsletter: se um contato clicar neste link, a Connectif mudará o "Status da inscrição na newsletter" para "Inscrito". Além disso, a inscrição será notificada automaticamente ao backoffice do seu site.
- Cancelar inscrição na newsletter: se um contato clicar neste link, a Connectif mudará o "Status da inscrição na newsletter" para "Cancelado" e notificará essa alteração ao backoffice do seu site.
- Ver no navegador: se um contato clicar, verá o email em uma nova aba do navegador. Esta página é gerada automaticamente pela Connectif.
- Reenviar email: se um contato clicar neste link, poderá reenviar o email através do cliente de email padrão.
Uma vez selecionado, clique em Aceitar e o link predefinido será adicionado ao seu botão.
9. Revisar as variáveis
Examine as variáveis criadas e quantas vezes elas se repetem nos elementos de texto a partir do painel de Ferramentas (3), na aba Variáveis. Para editar seu formato, clique em .
Se você adicionou uma nova variável recentemente e ela não aparece, clique em para atualizar.
Saiba mais sobre o formato das variáveis clicando aqui.
10. Visualizar resultado final e salvar
No painel de visualização e salvamento (1) você poderá ver o resultado final do seu email. Todo o conteúdo criado é responsivo, por isso você pode clicar em Visualizar para abrir um novo painel e revisar o resultado final. Clique em (Visualização em desktop) para ver o resultado no computador, ou clique em (Visualização em celular) para ver o resultado no celular.
Você também pode enviar um email de visualização clicando em (Enviar email de visualização) para receber um email de teste no endereço selecionado e verificar como o cliente o receberá.
Uma vez satisfeito com o resultado, clique em Salvar.
A Connectif está preparada para recuperar conteúdo que foi fechado acidentalmente. No entanto, para evitar perda de informação causada pelo dispositivo ou pela rede usada durante a edição, recomendamos salvar seu email a cada poucos minutos.
Parabéns!
Você chegou ao final da lição.
Ficou com dúvidas?
Lembre-se de que você pode contar com nossos especialistas em Connectif. Para entrar em contato, basta abrir um ticket de Suporte clicando no botão azul de “Ajuda” no seu painel.
Continue aprendendo!
Para aproveitar todo o potencial da sua conta na Connectif, recomendamos que continue com os seguintes artigos:
-
Criar bloco de produtos personalizados em um email, para enviar aos seus clientes produtos do interesse deles.
- Links em emails: ver no navegador, cancelar inscrição e botões, para configurar links predefinidos.
- Campanha semanal de produtos recomendados, para programar envios automáticos com artigos recomendados.
-
Cupom massivo por email, para enviar um desconto exclusivo aos seus clientes.