# Editor visual e modelos prontos

> O editor de templates do Couryo por blocos, com variáveis {{nome}}, valor padrão {{nome|cliente}} e valores de exemplo, pré-visualização no celular e no modo escuro, marca do projeto e a biblioteca de modelos brasileiros (Pix, boleto, nota fiscal) em PT e EN.

Fonte: https://couryo.com/docs/template-editor

O editor visual monta o e-mail com blocos e gera um HTML que funciona nos provedores de verdade: tabelas, estilos inline, largura máxima de 600 px, botões que aparecem até no Outlook e a parte em texto puro. Ele fica no painel, em **Templates**, e está em **todos os planos**, inclusive o Grátis. O que ele salva é um [template](https://couryo.com/docs/templates.md) normal: você envia com `template` + `variables`, como sempre.

## Blocos

| Bloco | Para que serve |
|---|---|
| Título | três tamanhos, com alinhamento |
| Texto | texto rico simples: `**negrito**`, `*itálico*`, `[link](https://...)`, `` `código` `` e listas com `- ` |
| Botão | link em destaque, na cor da marca ou numa cor própria |
| Imagem | por URL (`https://`), com texto alternativo, largura e link |
| Divisor e espaçador | respiro entre as partes |
| 2 colunas | dois lados com títulos, textos, botões ou imagens; no celular, uma coluna embaixo da outra |
| Rodapé | texto menor e centralizado, com o link de descadastro |
| HTML | um trecho seu, que entra como está |

Cada bloco sobe, desce, duplica e sai com um clique. O **modo código** troca para HTML ou MJML: o editor gera o HTML dos blocos e você continua dali. Um template feito em código pode voltar para o visual como um bloco de HTML.

## Variáveis e valores de exemplo

- Escreva `{{nome}}` em qualquer texto, no assunto, nos links (`{{link_rastreio}}`) e até no endereço de uma imagem (`{{pix.qr_code_url}}`).
- Para o que pode faltar, dê um **valor padrão** depois de `|`: `Oi, {{nome|tudo bem}}!` sai "Oi, tudo bem!" quando o contato não tem nome. O padrão pode ser vazio (`{{apelido|}}`) e é texto puro, sem chaves. Detalhes em [Templates salvos](https://couryo.com/docs/templates.md#valor-padrao-variavelpadrao).
- Cada variável ganha um **valor de exemplo**, usado na pré-visualização e no envio de teste. A aba **Variáveis** mostra quais têm padrão e avisa quando alguma está sem valor de exemplo e sem padrão, porque no envio pela API **toda variável sem padrão precisa de valor** (numa sequência, ela sai vazia).
- O texto que vem nos blocos novos já usa um padrão: `Oi, {{nome|tudo bem}}!` em português e `Hi {{name|there}}!` em inglês.
- `{{unsubscribe_url}}` é preenchida pelo Couryo com o link de descadastro em um clique do primeiro destinatário. Não precisa mandar.

## Pré-visualização, teste e versões

- **Computador, celular e modo escuro.** Os blocos já trazem as cores do modo escuro (`prefers-color-scheme`); um HTML seu aparece invertido, como faz o app do Gmail.
- **Envio de teste** para os e-mails das pessoas da sua conta, pelo mesmo caminho de um envio normal (limites, níveis e checagem de conteúdo valem). O assunto chega com `[Teste]`.
- **Histórico de versões com "restaurar":** cada mudança de conteúdo vira uma versão; restaurar salva o conteúdo antigo como uma versão nova, com os blocos de volta.

## Marca do projeto

Em **Marca**, defina o nome, o logo (URL `https://`), a cor principal e a fonte. A marca vale para todos os templates em blocos do projeto: o logo vai no topo, a cor nos botões e links. Se o app de e-mail não tiver a fonte escolhida, ele usa uma parecida (toda fonte tem alternativas seguras, terminando em Arial ou Georgia).

## Modelos prontos

Em **Templates > Começar de um modelo**, escolha um modelo em português ou em inglês, veja com a sua marca e crie o template no projeto. Todos são feitos com o editor de blocos e trazem valores de exemplo.

| Grupo | Modelos |
|---|---|
| Conta | boas-vindas, confirmação de e-mail, recuperação de senha, código de login (OTP), convite de equipe |
| Cobrança | recibo, **cobrança Pix**, **boleto**, **nota fiscal emitida**, pagamento recusado, assinatura renovada, assinatura cancelada |
| Loja | carrinho abandonado (marketing, com descadastro), pedido enviado |

O que os modelos brasileiros trazem:

- **Cobrança Pix:** o QR Code como imagem por URL (`{{pix.qr_code_url}}`) e o código copia e cola em destaque (`{{pix.copia_e_cola}}`), com valor, vencimento e link de pagamento.
- **Boleto:** a linha digitável (`{{boleto.linha_digitavel}}`) e o link do boleto (`{{boleto.link}}`). Por link, nunca como anexo: anexo de boleto cai no spam por causa dos golpes.
- **Nota fiscal emitida:** número, valor e os links do PDF (`{{nota.link_pdf}}`) e do XML (`{{nota.link_xml}}`).

Depois de verificar um domínio, o início do painel sugere a biblioteca.

## Pela API

O template continua sendo HTML: o editor manda o HTML gerado em `html`, a parte em texto em `text` e os blocos em `editor`, que fica guardado em cada versão.

```bash title="Enviar com um modelo de Pix"
curl https://api.couryo.com/v1/emails \
  -H "Authorization: Bearer $COURYO_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "from": "Loja <cobranca@exemplo.com.br>",
    "to": "ana@exemplo.com.br",
    "template": "cobranca-pix",
    "variables": {
      "nome": "Ana",
      "cobranca": { "valor": "R$ 129,90", "vencimento": "10/10/2026" },
      "pix": { "qr_code_url": "https://exemplo.com.br/pix/1042.png", "copia_e_cola": "00020126580014br.gov.bcb.pix..." },
      "link_pagamento": "https://exemplo.com.br/pagar/1042"
    }
  }'
```

- `GET /v1/templates/{id}` e as versões trazem `editor` (os blocos) ou `null` quando o template foi feito em código.
- Mandar `"editor": null` num `PATCH` passa o template para o modo código.