Os templates de email do Pipefy possibilitam que você configure mensagens com campos dinâmicos (que extraem informações do seu processo) para facilitar a comunicação com clientes externos, fornecedores, candidatos etc.
Além de campos dinâmicos, o editor visual dos templates de email permite que você adicione imagens, links, tabelas, configure fontes, cores e muito mais. Algumas das configurações avançadas podem ser realizadas diretamente no editor de código HTML, como adicionar anexos ou imagens no campo de texto, por exemplo.
Para exibir uma imagem anexada ou GIF animado (JPG, PNG, GIF e demais formatos comuns) no próprio template de email, você pode utilizar um campo de anexo. Desse modo, você gera uma imagem a partir do arquivo anexado por meio do código em HTML.
Siga o passo a passo:
1 - Abra o editor de templates de email e acesse o código HTML do template. Clique no botão localizado no canto direito, para então visualizar o conteúdo HTML.
2 - Onde você quer que a imagem ou GIF animado seja exibido, cole o seguinte código no editor em HTML: <img src="{{X}}">. Este código {{X}} será posteriormente substituído pelo código do campo de anexo.
3 - Crie o campo dinâmico de formato anexo no corpo de texto, pois você precisará do código dele para colocá-lo dentro das chaves "{{X}}". Para criar um campo, basta clicar em Campo Dinâmico. Este é o código que contém o arquivo da imagem, que será mostrado no corpo do email.
4 - Substitua o código "{{X}}" dentro das chaves pelo código do campo dinâmico de anexo.
5 - Apague o campo dinâmico de anexo sem o código que listamos no item 2. Você só criou o código de campo de anexo para copiá-lo para dentro do "{{X}}"; uma vez que isso for feito, pode excluí-lo. Salve!
Confira o passo a passo do item 2 ao 5 no GIF abaixo:
Pronto! Imagens anexadas no template de email com o código mencionado vão aparecer no corpo do texto. A imagem aparecerá desconfigurada quando você sair do editor HTML e ir para o editor visual; mas não se preocupe, pois isto acontece pelo fato de não ter nenhuma imagem anexada de fato no template (é apenas um esqueleto).
🔔 Atenção: Coloque apenas uma imagem por campo de anexo. Se você colocar duas imagens ou mais, elas não serão exibidas. Crie campos diferentes para cada imagem.
Posso transformar uma imagem de campo anexo em uma imagem clicável?
Sim! Siga a mesma lógica do tutorial anterior e adicionar alguns pontos a mais:
1 - Clique no botão do link, localizado no cabeçalho. Insira primeiro a URL a ser redirecionada (como o site da empresa) e em segundo o texto exibido. Por exemplo, Clique Aqui.
2 - O texto com o link vai aparecer no corpo do texto. Depois, acesse o editor de código HTML do email. Clique no botão localizado no canto direito, para visualizar o template em HTML.
3 - Cole o seguinte código no texto, no lugar onde você quer que a imagem ou GIF animado seja exibido: <img src="{{X}}">.
4 - Crie o campo dinâmico de formato anexo no corpo de texto, pois você precisará do código dele para colocá-lo dentro das chaves "{{X}}". Para criar um campo, basta clicar em Campo Dinâmico.
5 - Substitua o código "{{X}}" dentro das chaves pelo código do campo dinâmico de anexo e apague o campo dinâmico de anexo sem o código.
6 - Por último, junte os códigos do campo dinâmico do anexo e do campo do link em uma linha só. O campo do link é identificado pelo código <a href="{{LINK DA SUA URL}}"> Clique Aqui</a>.
Confira o passo a passo do item 2 ao 6 no GIF abaixo:
7 - Para tornar a imagem do campo de anexo clicável, basta colocar os dois códigos lado a lado. Por exemplo: <img src="{{X}}"><a href="{{LINK DA URL}}"> Clique Aqui </a>.
Pronto! Agora essa imagem é clicável. Isso pode ser interessante quando você desejar que o site da empresa seja acessado ao clicar na imagem em anexo, por exemplo.
Participe da Pipefy Community e mostre como ficou o resultado do seu template! Compartilhe dicas, troque ideias, solucione dúvidas e confira conteúdos exclusivos! Você também pode inscrever-se na Pipefy University e assistir a cursos rápidos sobre as melhores práticas do Pipefy!
Conteúdo Relacionado: