> ## Documentation Index
> Fetch the complete documentation index at: https://pingback.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Como usar o Blaster: editor de emails
> Guia completo do Blaster, o novo editor de emails da Pingback. Aprenda a criar campanhas com o editor fluido, usar atalhos rápidos, adicionar formatações, variáveis, botões, imagens e todos os recursos disponíveis.
### O que é o Blaster
O Blaster é o novo editor de emails da Pingback. Reconstruído do zero para ser mais fluido, rápido e intuitivo.
Diferente do editor antigo, o Blaster oferece:
* **Digitação instantânea** sem travamentos
* **Modo foco** em tela cheia para escrever sem distrações
* **Atalho "/" para comandos rápidos** (adicionar elementos via teclado)
* **Menu flutuante** ao selecionar texto
* **Preview em tempo real** enquanto você edita
### Como acessar o Blaster
1. No menu lateral esquerdo, clique em **"Blast"**
2. Você verá a tela com todos os seus emails: enviados, rascunhos, agendados
3. Para criar um novo email, clique no card no topo da página
### Criando um novo email
#### Visão inicial
Quando você abre um novo email, o editor começa compacto e minimalista:
* **Campo de assunto** no topo
* **Área de texto** com placeholder "Escreva uma mensagem para seus contatos"
* **Barra de formatação** na parte inferior
* **Botão "Revisar e Enviar"** no canto superior direito
O foco está em começar rápido. Sem menus complexos, sem distrações.
#### Modo foco em tela cheia
Assim que você:
* Digita algo no assunto e pressiona Enter, ou
* Clica na área de texto e começa a escrever
O editor **expande automaticamente para tela cheia**. Isso coloca você no modo foco:
* Mais espaço para escrever
* Menos distrações visuais
* Preview do email fica mais visível
* Experiência concentrada na criação
Para sair do modo foco, clique no ícone de **fechar** (X) no canto superior direito ou pressione **Esc**.
### Preview do email
Logo abaixo do assunto, você vê um accordion (seção expansível). Clique para abrir.
**O que é o preview:**
O preview é a **descrição curta do email** que aparece na caixa de entrada do destinatário, logo abaixo do assunto.
**Exemplo:**
* **Assunto:** Novidades de Janeiro
* **Preview:** Confira as 5 principais atualizações que lançamos este mês
No inbox, seu contato vê:
```
Novidades de Janeiro
Confira as 5 principais atualizações que lançamos este mês
```
**Por que usar preview:**
Assunto + preview bem escritos **aumentam significativamente as taxas de abertura**. O preview complementa o assunto e dá contexto adicional antes do contato abrir o email.
**Como usar:**
1. Clique no accordion para expandir
2. Digite a descrição do preview (recomendado: 40-100 caracteres)
3. Seja direto e desperte curiosidade
### Atalho "/" para comandos rápidos
Uma das funcionalidades mais poderosas do Blaster é o **atalho "/"**.
**Como funciona:**
1. Posicione o cursor onde quer adicionar um elemento
2. Digite **"/"** (barra)
3. Um menu aparece com todos os comandos disponíveis
**Comandos disponíveis:**
**HEADINGS (Cabeçalhos):**
* **H1** - Título 1 (maior)
* **H2** - Título 2
* **H3** - Título 3
* **H4** - Título 4
* **H5** - Título 5
* **H6** - Título 6 (menor)
**LISTAS:**
* **Lista desordenada** - Marcadores (bullet points)
* **Lista ordenada** - Numerada (1, 2, 3...)
**ELEMENTOS:**
* **Citação** - Bloco de citação destacado
* **Divisor** - Linha horizontal para separar seções
* **Botão** - Call-to-action clicável
* **Variáveis** - Campos personalizados dos contatos
* **Media Embed** - Incorporar vídeos (YouTube, Vimeo, etc)
* **Imagem** - Upload ou URL de imagem
* **Link** - Adicionar hyperlink
* **Bloco de código** - Código formatado (para exemplos técnicos)
**Dica:** Digite "/" e comece a escrever o nome do elemento para filtrar. Exemplo: "/botao" mostra apenas o botão.
### Barra de formatação
Na parte inferior do editor, você tem acesso permanente à barra de ferramentas:
**Botões disponíveis (da esquerda para direita):**
1. **+ Comandos** - Abre o mesmo menu do "/" (todos os elementos)
2. **Arial** - Seletor de fonte
3. **Regular** - Seletor de tamanho/peso da fonte
4. **B** - Negrito
5. **I** - Itálico
6. **U** - Sublinhado
7. **S** - Tachado
8. **\** - Código inline
9. **🎨** - Cor do texto
10. **🔗** - Inserir link
### Menu flutuante de formatação
Quando você **seleciona qualquer texto** no editor, um menu flutuante aparece automaticamente acima da seleção.
Esse menu mostra as **formatações mais usadas**:
* Negrito (B)
* Itálico (I)
* Sublinhado (U)
* Tachado (S)
* Código inline (\)
* Cor do texto (🎨)
* Link (🔗)
**Vantagem:**
Você não precisa mover o mouse até a barra inferior. Seleciona o texto e formata na hora.
### Elementos do editor
#### Cabeçalhos (H1 a H6)
Use cabeçalhos para estruturar seu email e criar hierarquia visual.
**Quando usar cada um:**
* **H1** - Título principal do email (use apenas um)
* **H2** - Seções principais
* **H3** - Subseções
* **H4 a H6** - Hierarquias mais específicas (use com moderação)
**Como adicionar:**
* Digite "/" → selecione o cabeçalho desejado
* Ou selecione o texto → use o menu flutuante → escolha o heading
#### Listas
**Lista desordenada** (bullet points):
* Item 1
* Item 2
* Item 3
**Lista ordenada** (numerada):
1. Primeiro item
2. Segundo item
3. Terceiro item
**Como adicionar:**
* Digite "/" → "Lista desordenada" ou "Lista ordenada"
* Ou use o botão "+ Comandos" → escolha o tipo de lista
* Pressione **Enter** para criar novo item
* Pressione **Enter duas vezes** para sair da lista
#### Botão
Botões são fundamentais para call-to-action (CTA).
**Como adicionar:**
1. Digite "/" → selecione "Botão"
2. Um botão padrão aparece no email
3. Clique no botão para editar:
* **Texto do botão**: O que aparece escrito
* **URL**: Para onde o botão leva quando clicado
* **Cor**: Personalize a cor do botão
* **Alinhamento**: Esquerda, centro ou direita
**Exemplo de uso:**
```
Quer saber mais sobre o produto?
[Ver demonstração gratuita]
```
**Dicas:**
* Use verbos de ação: "Baixar grátis", "Agendar demo", "Ver oferta"
* Mantenha o texto curto (máximo 3-4 palavras)
* Um botão principal por email (evite múltiplos CTAs competindo)
#### Imagem
Adicione imagens para ilustrar conteúdo, produtos ou criar impacto visual.
**Como adicionar:**
1. Digite "/" → selecione "Imagem"
2. Escolha uma das opções:
* **Upload**: Envie imagem do seu computador
* **Unsplash**: Selecione uma imagem de um banco de imagens gratuito
* **Giphy**: Selecione uma imagem de um banco de imagens gratuito
**Após inserir:**
* Clique na imagem para redimensionar
* Arraste as bordas para ajustar tamanho
* Clique para editar:
* **Alt text**: Descrição da imagem (importante para acessibilidade)
* **Link**: Tornar a imagem clicável
* **Alinhamento**: Esquerda, centro, direita
**Boas práticas:**
* Use imagens otimizadas (máximo 500kb cada)
* Sempre adicione alt text descritivo
* Teste o email em mobile - imagens se adaptam automaticamente
#### Link
Transforme qualquer texto em hyperlink clicável.
**Como adicionar:**
1. **Selecione o texto** que quer transformar em link
2. No menu flutuante, clique no ícone de **link** (🔗)
3. Cole a URL de destino
4. Pressione Enter
**Ou:**
1. Digite "/" → "Link"
2. Digite o texto do link
3. Adicione a URL
**Dica:** Use textos descritivos ao invés de "clique aqui". Exemplo:
* ❌ "Para ver a documentação, clique aqui"
* ✅ "Veja a documentação completa"
#### Bloco de código
Use blocos de código quando precisar mostrar exemplos técnicos, snippets ou comandos.
**Como adicionar:**
1. Digite "/" → "Bloco de código"
2. Um bloco cinza formatado aparece
3. Digite ou cole seu código dentro
**Exemplo de uso:**
```python theme={null}
def enviar_email(destinatario):
return pingback.send(destinatario)
```
**Quando usar:**
* Tutoriais técnicos
* Exemplos de API
* Comandos de terminal
* Snippets de código
#### Divisor
Divisores são linhas horizontais para separar visualmente seções do email.
**Como adicionar:**
1. Digite "/" → "Divisor"
2. Uma linha horizontal aparece
**Quando usar:**
* Separar seções temáticas diferentes
* Criar pausas visuais em emails longos
* Destacar mudança de assunto
**Dica:** Não abuse. Máximo 2-3 divisores por email.
#### Citação
Use citações para destacar depoimentos, trechos importantes ou mensagens especiais.
**Como adicionar:**
1. Digite "/" → "Citação"
2. Um bloco destacado aparece
3. Digite o texto da citação
**Exemplo de uso:**
> "Depois da Pingback, nossas conversões de email aumentaram 40%. Melhor decisão que tomamos."
> — João Silva, CEO da Empresa X
**Quando usar:**
* Depoimentos de clientes
* Destacar estatísticas importantes
* Enfatizar uma mensagem-chave
#### Media Embed
Incorpore vídeos diretamente no email (YouTube, Vimeo, etc).
**Como adicionar:**
1. Digite "/" → "Media Embed"
2. Cole a URL do vídeo
3. O player aparece no email
**Plataformas suportadas:**
* YouTube
* Vimeo
* Loom
**Importante:** Nem todos os clientes de email suportam vídeos embarcados. Sempre inclua:
* Thumbnail atrativa
* Link alternativo ("Assistir no YouTube")
* Texto descritivo do conteúdo
### Variáveis personalizadas
Personalize emails em massa usando dados dos seus contatos.
**Como adicionar:**
1. Digite "/" → "Variáveis"
2. Ou use o botão "+Comandos" → Variáveis
3. Selecione a variável desejada
**Variáveis disponíveis:**
**Campos padrão:**
* `{{ subscriberName }}` - Nome do contato
* `{{ subscriberEmail }}` - Email do contato
* `{{ subscriberPhone }}` - Telefone do contato
**Campos customizados:**
Todos os custom fields que você criou aparecem na lista:
* `{{ fieldName:empresa }}`
* `{{ fieldName:cargo }}`
* `{{ fieldName:segmento }}`
* E qualquer outro campo personalizado
**Exemplo de uso:**
```
Olá {{ subscriberName }}!
Vi que você é {{ fieldName:cargo }} na {{ fieldName:empresa }}.
Preparei um material específico sobre {{ fieldName:interesse }}.
Quer receber?
```
**Resultado para cada contato:**
Para Maria (cargo: CEO, empresa: Acme):
```
Olá Maria!
Vi que você é CEO na Acme.
Preparei um material específico sobre automação de marketing.
Quer receber?
```
**Fallback (valor padrão):**
Configure o que aparece se o campo estiver vazio:
1. Clique na variável inserida
2. Digite um fallback
3. Exemplo: `{{ subscriberName [fallback: "você"] }}`
Se o contato não tem nome cadastrado, aparece "você".
**Saiba mais:** Consulte nosso [guia completo sobre variáveis personalizadas](#).
### Formatação de texto
**Formatações disponíveis:**
**Negrito**: Destaque palavras importantes
* Atalho: **Ctrl/Cmd + B**
**Itálico**: Ênfase ou termos técnicos
* Atalho: **Ctrl/Cmd + I**
**Sublinhado**: Use com moderação (pode confundir com links)
* Atalho: **Ctrl/Cmd + U**
**Tachado**: Mostrar preço antigo vs novo
* Exemplo: \~\~R$ 199~~ **R$ 99\*\*
**Código inline**: Comandos ou termos técnicos curtos
* Exemplo: Use o comando `npm install` para instalar
**Cor do texto**: Mude a cor do texto em si
* Use cores da sua marca
* Evite cores muito claras (dificulta leitura)
* Use cores da sua marca
* Evite cores muito claras (dificulta leitura)
### Fontes e tamanhos
**Fontes disponíveis:**
* Arial (padrão)
* Georgia
* Verdana
* Times New Roman
* Courier
**Tamanhos/pesos:**
* Regular (padrão)
* Bold (negrito)
* Light (leve)
* Diferentes tamanhos de fonte
**Como alterar:**
1. Selecione o texto
2. Clique em "Arial" ou "Regular" na barra inferior
3. Escolha a fonte ou tamanho desejado
**Dica:** Mantenha consistência. Use no máximo 2 fontes diferentes por email.
### Revisão e envio
Quando terminar de escrever:
1. Clique em **"Revisar e Enviar"** no canto superior direito
2. Você verá a tela de revisão com:
* Preview do email
* Opções de destinatários (listas, contatos, segmentos)
* Agendar envio ou enviar imediatamente
* Enviar teste
**Sempre envie um teste antes:**
1. Na tela de revisão, clique em "Enviar teste"
2. Digite seu email
3. Confira como o email chega na sua caixa de entrada
4. Verifique formatação, links, variáveis
### Dicas práticas
**Mantenha emails escaneáveis:**
* Use cabeçalhos para estruturar
* Parágrafos curtos (2-3 linhas)
* Listas em vez de blocos de texto
* Destaque palavras-chave em negrito
**Um CTA principal:**
Cada email deve ter um objetivo claro. Um botão principal, uma ação prioritária.
**Teste em mobile:**
Mais de 50% dos emails são abertos em celular. O Blaster otimiza automaticamente, mas sempre envie um teste para seu celular.
**Use preview estrategicamente:**
Assunto + preview = primeiras impressões. Invista tempo neles.
**Personalize com variáveis:**
Emails personalizados têm taxas de abertura e clique significativamente maiores.
**Evite spam:**
* Não use CAIXA ALTA excessivamente
* Evite palavras como "grátis", "urgente", "clique aqui"
* Sempre inclua opção de descadastro (automático na Pingback)
### Atalhos de teclado
Acelere seu fluxo de trabalho com atalhos:
**Formatação:**
* **Ctrl/Cmd + B** - Negrito
* **Ctrl/Cmd + I** - Itálico
* **Ctrl/Cmd + U** - Sublinhado
* **Ctrl/Cmd + K** - Adicionar link
**Navegação:**
* **/** - Abrir menu de comandos
* **Esc** - Sair do modo foco
* **Ctrl/Cmd + Enter** - Ir para revisão/envio
**Desfazer/Refazer:**
* **Ctrl/Cmd + Z** - Desfazer
* **Ctrl/Cmd + Shift + Z** - Refazer
### Diferenças do editor antigo
Se você usava o editor anterior:
**Melhorias no Blaster:**
* ✅ Performance muito mais rápida (sem travamentos)
* ✅ Modo foco em tela cheia
* ✅ Atalho "/" para todos os comandos
* ✅ Menu flutuante ao selecionar texto
* ✅ Preview do email integrado
* ✅ Interface mais limpa e moderna
**Funcionalidades mantidas:**
* Todas as formatações anteriores
* Variáveis personalizadas
* Botões e imagens
* Tudo que você já conhecia
***
**Precisa de ajuda?** Entre em contato pelo chat ou email em [suporte@getpingback.com](mailto:suporte@getpingback.com)