# Página de Chat: ofereça o seu bot como um chat no navegador

> Publique uma página de chat (estilo WhatsApp) onde seus usuários colam um link e recebem a versão com os seus afiliados — hospedada, embed, numa rota do site ou em domínio próprio.

- URL: https://botdoafiliado.com/docs/comecando/pagina-de-chat/
- Publicado em: 2026-06-14
- Atualizado em: 2026-10-21
- Índice da documentação para IA: https://botdoafiliado.com/llms.txt

A **Página de Chat** é uma página pronta, no estilo WhatsApp, onde qualquer pessoa cola um link de produto (AliExpress, Amazon, Shopee, Mercado Livre…) ou usa comandos como `/moedas`, `/oferta` e `/cupom` — e recebe o link já com **os seus afiliados**. É o mesmo cérebro do seu bot do Telegram, agora no **navegador**, sem a pessoa precisar abrir o Telegram.

É **grátis** para todos os bots e cada bot tem a sua. A página nasce **desativada** — nada fica público até você ligar.

## Ativar e personalizar

No painel, vá em Menu → **Operação** → **Página de chat**:

1. No card **Endereço**, marque **Página de chat ativa (pública)**.
2. Defina o **Endereço (slug)**, de 2 a 40 caracteres (a–z, 0–9 e hífen). Ex.: `seubot` → a página fica em `https://botdoafiliado.com/c/seubot`. O painel checa na hora e mostra **disponível**, **em uso** ou **inválido**.
3. No card **Aparência**, ajuste:
   - **Título (cabeçalho do chat)**, até 60 caracteres. Aparece no topo do chat e como título da página (usado no SEO).
   - **Mensagem de boas-vindas**, até 600 caracteres, com formatação e emojis. Se deixar vazia, usa a **mensagem de start do bot**.
   - **Foto / logo**: **Enviar foto** (JPG, PNG, WebP ou GIF, até 5 MB). Vira o avatar do cabeçalho e o ícone (favicon) da aba. Se vazia, usa a **foto de start do bot**.
   - **Tema (duas cores)**: **Principal (cabeçalho/botão)** e **Secundária (balão enviado)**. O botão **Padrão WhatsApp** volta ao verde clássico.
   - **Link "Voltar" (URL https, opcional)**: para onde o visitante volta.
   - **Idioma da página**: **Português (Brasil)**, **English** ou **Español**. Muda os textos da interface (placeholder, botões, erros); a mensagem de boas-vindas continua sendo a que você escreveu.
4. Clique em **Salvar**.

Pronto: use **Abrir** ou **Copiar**, ao lado do endereço, e mande um link para testar. Com a página publicada, aparece também a **Pré-visualização (ao vivo)**, que atualiza quando você salva.

### Prévia do produto (estilo rede social)

Quando o bot gera o link de um produto do AliExpress, a resposta no chat aparece como um **card de prévia** — com **imagem, título e preço** e um botão **Abrir oferta**, igual ao preview que as redes sociais mostram.

## Formas de colocar o chat no seu site

São quatro formas (todas usam os seus afiliados). Os cards **Botão flutuante no seu site (embed)**, **Numa rota do seu site (página inteira)** e **Domínio próprio** aparecem depois que a página está ativa e salva com um endereço.

| Forma | Onde aparece | O que precisa |
| --- | --- | --- |
| **Página hospedada** | `botdoafiliado.com/c/<slug>` | nada — é só compartilhar o link |
| **Numa rota do seu site (iframe)** | `seu-site.com/chat` | colar **1 iframe** na sua página |
| **Bolha flutuante (embed)** | qualquer página | colar **1 `<script>`** |
| **Domínio próprio** | `chat.seu-site.com` | um **CNAME** (provisionamento automático) |

### Numa rota do seu site (iframe)

Crie uma página na rota que quiser (ex.: `/chat`) e cole o iframe que o painel mostra:

```html
<iframe src="https://botdoafiliado.com/c/SEU-SLUG?embed=1&header=1"
        style="width:100%;height:100vh;border:0" title="Chat" allow="clipboard-write"></iframe>
```

Funciona em **qualquer hospedagem**, sem DNS nem configuração extra. Ajuste a `height` se a página tiver cabeçalho próprio.

### Bolha flutuante (embed)

Cole antes de `</body>` em qualquer página:

```html
<script src="https://botdoafiliado.com/c/embed.js" data-slug="SEU-SLUG" defer></script>
```

Aparece um botão flutuante que abre o chat. Você personaliza pelos atributos:

- `data-color` — cor do botão
- `data-label` — texto do botão (vazio = **só ícone**)
- `data-icon` — emoji **ou URL de imagem** (logo própria)
- `data-position` — `left` / `right`
- `data-size`, `data-offset` — tamanho do botão e distância das bordas
- `data-width`, `data-height` — tamanho do painel
- `data-greeting` — um balãozinho de chamada que aparece sozinho
- `data-open="auto"` — abre sozinho após alguns segundos
- `data-button="false"` + `data-trigger="#meuBotao"` — abrir a partir do **seu próprio botão**

**Para quem mexe com frontend:** os estilos ficam num `@layer bda-chat`, então é só escrever CSS próprio em `.bda-chat-btn` / `.bda-chat-panel` para sobrepor tudo. E há a API JS: `BdaChat.open()`, `BdaChat.close()`, `BdaChat.toggle()` (ou `BdaChat["seu-slug"].open()`).

### Domínio próprio (`chat.seu-site.com`)

No card **Domínio próprio**, digite o **subdomínio** (ex.: `chat.seu-site.com`) e clique em **Adicionar domínio**. Use sempre um subdomínio — o domínio raiz (`seu-site.com`) não funciona, porque não aceita CNAME.

Em seguida, o painel mostra o **registro CNAME** que você cria no painel de DNS do seu domínio (no provedor onde você gerencia o DNS — Registro.br, GoDaddy, Hostinger, Cloudflare, etc.):

| Campo | Valor |
| --- | --- |
| **Tipo** | `CNAME` |
| **Nome / Host** | o subdomínio (ex.: `chat`) — ou o nome completo `chat.seu-site.com`, se o provedor pedir |
| **Valor / Destino** | o destino mostrado no painel (botão **Copiar**) |

Criamos o *custom hostname* na Cloudflare **automaticamente**; assim que o CNAME propagar (de alguns minutos a algumas horas), o **SSL é emitido sozinho** e a página fica no ar em `https://chat.seu-site.com`. O painel **verifica o status sozinho** e mostra cada etapa: aguardando DNS → emitindo SSL → no ar.

**Não funcionou ou demorou?**

- A propagação de DNS leva de minutos a horas; o painel reverifica automaticamente.
- Se o seu domínio está na **Cloudflare**, deixe o registro como **"DNS only"** (nuvem cinza), não "Proxied" (nuvem laranja). Se você não usa Cloudflare, ignore este item.
- Confira se não há outro registro (A, AAAA ou CNAME) com o mesmo nome. Você pode checar a propagação em [whatsmydns.net](https://www.whatsmydns.net/).

### Rota nativa na Cloudflare (avançado)

Se o seu domínio está na **Cloudflare**, dá para servir o chat numa rota com a **mesma URL** (sem iframe) usando um **Worker/Snippet** de reverse-proxy na rota `seu-site.com/chat*`:

```js
export default {
  async fetch(request) {
    return fetch("https://botdoafiliado.com/c/SEU-SLUG", request);
  }
};
```

O envio de mensagens vai para o nosso domínio automaticamente (CORS já liberado). Alternativa mais simples: uma **Redirect Rule** de `/chat` para a página hospedada (porém a URL muda no navegador).

## SEO

A página hospedada é **indexável** e já vem com `title`, `description`, **canonical**, **Open Graph** e **Twitter Card** (usando a sua logo como imagem) e dados estruturados **JSON-LD**. Como o `title` vem do **título** e a `description` das **boas-vindas**, você ajusta o SEO direto no painel — quanto mais as boas-vindas tiverem as suas palavras-chave (ex.: "cupom AliExpress", "desconto Shopee"), melhor. O modo embed/bolha fica `noindex` para não duplicar conteúdo.

## Segurança

A sua chave de API **nunca** vai para o navegador: a página resolve o `slug` no servidor e roda a conversão internamente. O endpoint público tem **limite por IP** (anti-abuso) e o conteúdo do chat é **sanitizado**.

## Perguntas frequentes

### A página de chat fica pública assim que eu salvo?

Só se a opção Página de chat ativa (pública) estiver marcada. A página nasce desativada e nada fica público até você ligar e salvar.

### Que endereço posso usar na página de chat?

Um slug de 2 a 40 caracteres, só com letras minúsculas sem acento, números e hífen. Ele é único: dois bots não podem ter o mesmo.

### Por que não aparecem os códigos de embed nem o domínio próprio?

Eles só aparecem depois que a página tem endereço, está marcada como ativa e foi salva.

### A página de chat expõe a minha chave de API?

Não. A página resolve o slug no servidor e roda a conversão internamente; a chave nunca vai para o navegador.