mailinapp
Documentation menu

Bloco Tarefa

Lição de casa ou trabalho de curso com data de entrega: um título, instruções, um valor de pontos opcional, quantos links de recursos você quiser, e um controle de envio. É o bloco do estúdio para transformar um e-mail em uma tarefa de verdade, em vez de apenas um anúncio dela.

Como funciona

A data de entrega é renderizada como uma imagem de contagem regressiva ao vivo no e-mail enviado, usando a mesma técnica de GIF animado renderizado no servidor que o próprio bloco de contagem regressiva usa. Esse endpoint é genuinamente compartilhado; o bloco de tarefa não roda seu próprio codificador de imagem. Ao lado dela fica uma linha de texto simples "Faltam Xd Yh Zm" ou "Atrasado". Essa combinação importa porque é o que mantém o prazo preciso, quer um determinado cliente renderize a imagem ou não. A linha de texto é calculada no momento do envio a partir da própria abertura do destinatário, então ela é exibida corretamente mesmo em um cliente que não mostra nenhuma imagem, enquanto o GIF continua contando para os clientes que mostram.

O envio tem três formatos, escolhidos pelo campo Envio:

  • Marcar como concluída — uma ação de valor fixo, então recebe o mesmo tratamento baseado em link que uma opção de enquete ou um chip de avaliação: um <form> real dentro do e-mail que envia para o endpoint de interações (nível cinético), junto com um link de fallback simples para a página de confirmação hospedada (/v/[token]/act), ambos envolvendo o mesmo controle "Marcar como concluída". Como o valor enviado nunca varia, o caminho de nível 2 baseado apenas em link funciona bem aqui, diferente dos dois modos abaixo.
  • Resposta em texto curto / Resposta em link — esses carregam um valor livre que nenhum link GET simples consegue pré-preencher, então — assim como o fallback de formulário inteiro do bloco de quiz — o caminho de nível 2 é um link para a própria visualização ao vivo hospedada, onde um <input> real (tipo text ou type url, respectivamente, com um placeholder apropriado) coleta a resposta e a envia. Não há digitação dentro do e-mail para esses dois modos em clientes que não conseguem renderizar o formulário cinético; eles abrem a visualização ao vivo em vez disso.

Qualquer que seja o modo configurado, um envio chega como um evento de interação normal e é deduplicado por destinatário da mesma forma que um voto de enquete — um clique repetido no próprio link do destinatário é um no-op, não um segundo envio. Se a data de entrega do bloco já tiver passado quando um envio chegar, ele ainda é registrado, apenas sinalizado como atrasado a jusante (veja o resumo do Diário de notas abaixo). O bloco de tarefa nunca bloqueia o registro de um envio atrasado; ele apenas o marca.

Em qualquer outro lugar (Outlook, ou qualquer cliente que não honre nem o nível cinético nem consiga renderizar a imagem de contagem regressiva de forma significativa), o fallback é simplesmente a linha de texto estática com a data de entrega mais a lista de links de recursos. Ambas são sempre renderizadas independentemente do nível, junto com o controle de envio aplicável (chip ou link para a visualização ao vivo).

Campos configuráveis:

  • Título e Instruções, além de suas próprias cores e tamanhos de fonte.
  • Data de entrega — uma data/hora; a imagem de contagem regressiva e o texto "Faltam…"/"Atrasado" só são renderizados quando isso está definido.
  • Pontos — 0 significa sem nota (a mesma convenção "0 = não definido" que o campo de estoque do bloco de produto usa); um valor diferente de zero adiciona "(N pts)" ao lado do título.
  • Links de recursos — qualquer quantidade de pares rótulo/URL, renderizados como uma lista simples de links abaixo das instruções.
  • Envio — Marcar como concluída / Resposta em texto curto / Resposta em link, como acima.
  • Cor de fundo, preenchimento (padding), borda, raio da borda, e uma substituição de cor de botão compartilhada para o controle de envio.

Exemplos

Subject

New assignment: Chapter 4 reading response

Um lembrete semanal de lição de casa para um curso online combina naturalmente com Marcar como concluída — veja Educação para o padrão mais amplo de conduzir trabalhos de curso e lembretes por e-mail. Uma tarefa de resposta escrita ("resuma o capítulo 3 em duas frases") usa Resposta em texto curto, para que a própria resposta chegue no Diário de notas em vez de exigir um portal de envio separado. Uma tarefa baseada em projeto ("envie o link do seu documento compartilhado") usa Resposta em link, com Links de recursos apontando para a rubrica e qualquer material de referência. Defina uma data de entrega para o prazo real, para que a contagem regressiva dê aos alunos uma sensação real de urgência conforme ela se aproxima.

Como é o fallback estático

<div style="margin:12px 0;background-color:transparent">
  <p style="margin:0 0 4px;font-weight:700;font-size:18px;color:#111827">
    Chapter 3 reading response (10 pts)
  </p>
  <p style="margin:0 0 6px;font-size:13px;font-weight:600;color:#111827">
    Due in 2d 4h 30m
  </p>
  <img src="https://mailinapp.com/api/countdown?t=1737936000000&c=111827&s=..."
       width="220" height="40" alt="Due in 2d 4h 30m"
       style="display:block;max-width:100%;height:auto;margin-bottom:8px" />
  <div style="text-align:center;margin-top:8px">
    <a href="https://mailinapp.com/v/eyJhbGci..."
       style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
              color:#ffffff;border-radius:6px;text-decoration:none;
              font-size:14px;font-weight:600">
      Submit answer
    </a>
  </div>
</div>

Isso mostra o fallback do modo Resposta em texto curto: como a resposta não pode ser pré-preenchida em um link simples, o fallback é um link para a visualização ao vivo hospedada, em vez de uma página de confirmação /act.

Veja também