Adicionar um cronômetro de contagem regressiva aos e-mails do SendGrid funciona perfeitamente tanto nas Marketing Campaigns quanto nos templates transacionais enviados pela API do SendGrid. Este guia mostra como incorporar uma contagem regressiva ao vivo no Design Editor do SendGrid e como usar os templates Handlebars para prazos dinâmicos e personalizados: cortes de envio, expirações de teste, datas de vencimento de pagamentos e contagens regressivas de eventos.
O SendGrid (Twilio SendGrid) é uma plataforma de e-mail amigável para desenvolvedores, usada por 80,000+ marcas tanto em campanhas de marketing quanto em e-mails transacionais. Sua força dupla — disparos de marketing em massa e e-mail transacional guiado por API — abre casos de uso de cronômetros que a maioria dos ESPs não oferece de forma nativa.
O que você precisa
Uma conta Tickvio gratuita e uma conta SendGrid.
Passo 1: crie seu cronômetro no Tickvio
Faça login no Tickvio e crie um cronômetro. Para as campanhas do SendGrid:
Data fixa: um prazo compartilhado para campanhas promocionais.
Evergreen: prazos pessoais para sequências automatizadas.
Dinâmico: a data de término é passada por um parâmetro de URL. Perfeito para e-mails transacionais em que cada destinatário tem um prazo único (corte de envio, expiração do teste, data de vencimento do pagamento).
Personalize o design, defina o seu estado de expiração e copie o código de incorporação.
Método A: Design Editor (Marketing Campaigns)
Para as Marketing Campaigns do SendGrid com o editor visual:
Passo 2: crie ou edite um e-mail no Design Editor.
Passo 3: arraste um módulo HTML (ou módulo "Code") para o seu template.
Passo 4: cole o código de incorporação do Tickvio. Salve e visualize.
Método B: editor de código / templates de API
Para desenvolvedores que criam templates no editor de código ou pela API do SendGrid:
Passo 2: abra o seu template de e-mail no editor de código ou no seu ambiente de desenvolvimento local.
Passo 3: cole o código de incorporação do Tickvio (uma tag <img> envolvida por um link) diretamente no seu HTML, onde você quer o cronômetro.
Cronômetros dinâmicos com Handlebars
O SendGrid oferece suporte aos templates Handlebars para dados dinâmicos. Substitua o parâmetro de data na URL do cronômetro dinâmico do Tickvio por uma variável Handlebars para exibir contagens regressivas personalizadas por destinatário:
<img src="https://app.tickvio.com/cd/your-timer?d={{trial_end_date}}" alt="Countdown timer" />
Quando você passa trial_end_date como campo de personalização na chamada da API, cada destinatário recebe um cronômetro que faz a contagem regressiva até a data específica dele. Esse é o padrão usado para lembretes de teste de SaaS, renovações de assinatura e datas de vencimento de faturas.
Passo 5: visualize e teste
Use a visualização do SendGrid ou envie um e-mail de teste. Para os cronômetros dinâmicos, verifique com dados de teste que contenham datas diferentes. Confira o nosso guia de compatibilidade com caixas de entrada para a renderização nos clientes de e-mail.
Casos de uso em e-mail transacional (o recurso matador do SendGrid)
A força do SendGrid em e-mail transacional abre oportunidades de cronômetro únicas que a maioria dos ESPs não consegue igualar:
Corte de envio: "Faça seu pedido nas próximas 4 horas para envio no mesmo dia", com um cronômetro evergreen nos e-mails de abandono de navegação ou de confirmação de pedido. Funciona melhor em logísticas sensíveis ao tempo (entrega no mesmo dia, cortes por feriados).
Expiração do teste: um cronômetro dinâmico que usa a data de término do teste do usuário. "Seu teste gratuito expira em:" nos e-mails de lembrete automatizados. Impulsiona as conversões dos testes de SaaS — este é o caso de uso de cronômetro transacional com o maior ROI de todos.
Vencimento de pagamento: um cronômetro dinâmico que faz a contagem regressiva até a data de vencimento da fatura. Reduz os pagamentos atrasados ao deixar o prazo visualmente em destaque. As equipes financeiras adoram este.
Confirmação de evento: um cronômetro de data fixa nos e-mails de confirmação de evento, contando de forma regressiva até o início do evento. Aumenta as taxas de comparecimento em webinars e eventos virtuais.
Lembretes de compromisso: um cronômetro dinâmico que faz a contagem regressiva até compromissos agendados (médicos, serviços, consultas). Reduz as ausências de forma significativa.
Redefinição de senha / expiração de verificação: um cronômetro evergreen mostrando "Este link expira em 30 minutos." Torna a restrição de segurança tangível e desestimula os usuários a adiar a verificação.
Casos de uso em campanhas de marketing
Vendas relâmpago: um cronômetro de data fixa para promoções por tempo limitado. Confira o nosso manual de vendas relâmpago.
Promoções sazonais: vendas de fim de ano, liquidações de fim de temporada, volta às aulas — todas se beneficiam de prazos visíveis.
Reengajamento: os recursos de automação do SendGrid permitem disparar e-mails de reengajamento. Combine-os com cronômetros evergreen para janelas de reconquista personalizadas.
Dicas específicas para o SendGrid
Abordagem API-first: para desenvolvedores, o Tickvio oferece uma API para criar cronômetros de forma programática. Crie cronômetros na hora com base em eventos da aplicação (usuário cadastrado, teste iniciado, pedido enviado) e incorpore as URLs nos templates transacionais do SendGrid — urgência totalmente automatizada e em escala.
Módulos do Design Editor: salve o seu cronômetro como um módulo reutilizável no Design Editor para inseri-lo rapidamente em várias campanhas. Funciona tanto para templates de marketing quanto transacionais.
Entregabilidade: o SendGrid é conhecido pela forte entregabilidade — é feito explicitamente para chegar à caixa de entrada. As imagens de cronômetro do Tickvio são servidas a partir de domínios de CDN confiáveis que não vão prejudicar a sua reputação como remetente. Confira o nosso guia de entregabilidade.
API de Dynamic Templates: se você usa o recurso Dynamic Templates do SendGrid (template_id + dynamic_template_data), passe os prazos do cronômetro como parte de dynamic_template_data. Isso torna a lógica do seu cronômetro transacional testável e versionada.
Event Webhook: o Event Webhook do SendGrid rastreia aberturas e cliques. Combine-o com as análises de visualizações de cronômetro do Tickvio para ver o engajamento de todo o funil: visualizações do cronômetro (do Tickvio) + aberturas de e-mail (do SendGrid) + cliques (do SendGrid) em um único painel.
Integração com Twilio SMS: como o SendGrid é um produto da Twilio, você pode coordenar e-mail + SMS. Envie um SMS pela API da Twilio quando o cronômetro do e-mail se aproximar de zero, para uma urgência de última hora multicanal.
Subcontas / multimarca: o SendGrid oferece suporte a subcontas para agências e remetentes multimarca. Crie um cronômetro do Tickvio por marca, com cores e fontes correspondentes, armazenado na biblioteca de templates de cada subconta.
Não faça cache das URLs de cronômetro no servidor: se a sua aplicação armazena em cache o HTML renderizado, certifique-se de que a URL do cronômetro não seja armazenada com um prazo desatualizado. Renderize sempre a URL do cronômetro do zero para cada destinatário.
Qual tipo de cronômetro para cada campanha do SendGrid?
Envios promocionais (Marketing Campaigns): cronômetros de data fixa.
Sequências automatizadas / fluxos de drip: cronômetros evergreen.
E-mails transacionais com prazos por destinatário: cronômetros dinâmicos com Handlebars.
Perguntas frequentes
O SendGrid tem um cronômetro de contagem regressiva integrado?
Não. O SendGrid não tem nenhum elemento de cronômetro de contagem regressiva nativo. Você adiciona cronômetros colando o código de incorporação do Tickvio em um bloco HTML no Design Editor, ou diretamente no HTML do template para os envios guiados por API.
Posso usar os cronômetros do Tickvio nos e-mails transacionais do SendGrid?
Sim — este é um dos padrões mais fortes do Tickvio com o SendGrid. Para prazos por destinatário (expirações de teste, cortes de envio, datas de vencimento de pagamentos), use cronômetros dinâmicos com variáveis Handlebars passadas pela API do SendGrid.
Os cronômetros do Tickvio funcionam com os Dynamic Templates do SendGrid?
Sim. Passe o prazo do cronômetro como parte de dynamic_template_data na sua chamada de API e use a sintaxe Handlebars no template para inseri-lo na URL do cronômetro.
O cronômetro vai afetar a pontuação de entregabilidade do SendGrid?
Não. As imagens de cronômetro carregam a partir do CDN do Tickvio com HTTPS adequado e cabeçalhos de imagem padrão. Os sistemas de entregabilidade do SendGrid as tratam como qualquer outra imagem incorporada.
O Tickvio está no SendGrid Integration Directory?
O Tickvio não é uma integração formalmente listada no SendGrid. A integração é feita via HTML e Handlebars padrão, o que significa que não há nada para instalar ou provisionar — basta colar o código de incorporação nos seus templates.
Posso usar o cronômetro na API de e-mail do SendGrid sem templates?
Sim. Os cronômetros do Tickvio funcionam em qualquer e-mail HTML, seja enviado pelas Marketing Campaigns, pelos Dynamic Templates ou como HTML puro passado diretamente para a API do SendGrid. Se você gera o HTML de forma programática, basta incluir a tag <img> do cronômetro na sua saída.
Comece agora
Crie o seu cronômetro Tickvio gratuito — 20,000 visualizações/mês, cronômetros dinâmicos para e-mail transacional incluídos, sem marca. Funciona com o Design Editor e os templates de API do SendGrid.
Para saber mais, confira o nosso guia completo e a página de integração com o SendGrid.