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

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.

Numa rota do seu site (iframe)

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

<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:

<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.):

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.

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*:

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.