Chat Público (Link ou Site)

O que é

O Chat Público é a forma mais simples de colocar o agente para atender. Você pode compartilhar um link que abre o chat em qualquer navegador ou colar um código no seu site para mostrar o balão do chat nas páginas. Qualquer visitante pode conversar, sem login e sem mexer em servidor.

1. Quando usar

Use o modo Público quando você quer que:

• Qualquer pessoa que acesse o site ou o link possa começar uma conversa;
• A instalação seja só copiar e colar um código, sem mexer em servidor;
• O chat apareça como um balão flutuante ou dentro de uma área fixa da página.

2. Criando a conexão

1. Entre no projeto, clique em Robôs Agentes de IA no menu lateral e abra o agente.
2. Clique na aba Canais.
3. Clique em Adicionar canal. Se o agente ainda não tem nenhuma conexão, a lista de canais já aparece direto.
4. No grupo Web, escolha uma das opções e clique em Selecionar:
   • Link público: um link que abre o agente em qualquer navegador;
   • Site embedado: o balão do chat dentro do seu site.
5. Em Destino e acesso, deixe o Modo de acesso em Público e clique em Continuar.
   • Se o projeto já tem uma conexão desse tipo, ela aparece nessa etapa. Escolha Criar outra conexão para fazer uma nova ou selecione a existente para abri-la.
6. Em Configuração, preencha:
   • Nome da conexão: um nome interno para você reconhecer depois, como “Site institucional”;
   • Domínios permitidos (opcional): os sites em que o chat pode rodar, um por linha. Veja a seção 6.
7. Clique em Criar conexão.

A tela “Conexão criada” mostra o Link do bot e o código para instalar no site, os dois prontos para copiar. Link público e Site embedado criam o mesmo tipo de conexão, então você pode usar o link e o código ao mesmo tempo.

⚠️ Atenção: criar a conexão não publica uma versão do agente. Enquanto nenhuma versão for publicada, o chat atende com o rascunho atual. Veja como publicar em Seu Primeiro Agente.

3. Instalando no site

Cole o código de instalação antes do </body> em todas as páginas em que o chat deve aparecer. Depois, recarregue o site e confira o balão no canto da página.

O código tem este formato:

<!-- Caramelo AI chatbot -->
<script src="https://static.carameloai.com/sdk/latest/client.js"></script>
<script>
  window.CarameloChatbot
    .create({
      publicApiKey: 'ct_...',
      project_id: 'SEU_PROJECT_ID'
    })
    .start();
</script>

Para encontrar o código depois, abra a conexão em Gerenciar e vá em Instalação, opção Código do site.

3.1 Entendendo cada campo do código

Se você ligar a retenção de atenção ou o carregamento atrasado, o código ganha os parâmetros correspondentes.

💡 Dica: o código mostrado na plataforma reflete a conexão salva. Faça seus ajustes, clique em Salvar e só depois copie o código.

📌 Já instalou com o código antigo? Se o seu site usa o formato anterior, com var carameloaiChatbot e o script prod/index.js, ele continua funcionando. Não precisa trocar.

3.2 Testando sem instalar nada

Abra o Link do bot no navegador. Ele mostra o agente funcionando, para você validar a conversa antes de colar o código no site.

4. Como tudo se conecta

┌─────────────────────┐                        ┌──────────────────────┐
│  Visitante abre o   │   1. página carrega    │  Seu site            │
│  seu site           │ ─────────────────────▶ │  (script do chat     │
└─────────────────────┘                        │  colado no HTML)     │
                                               └──────────┬───────────┘
                                                          │ 2. script gera um ID
                                                          │    anônimo para o visitante
                                                          ▼
                                               ┌──────────────────────┐
                                               │  API Caramelo        │
                                               │  → valida a chave    │
                                               │    pública           │
                                               │  → cria a conversa   │
                                               └──────────┬───────────┘
                                                          │ 3. chat disponível
                                                          ▼
                                               ┌──────────────────────┐
                                               │  Balão do chat no    │
                                               │  canto da tela,      │
                                               │  pronto para uso     │
                                               └──────────────────────┘

Em resumo:

1. O visitante abre uma página do seu site;
2. O script do chat carrega e cria um identificador anônimo para aquele navegador;
3. A plataforma valida a chave pública e abre a conversa;
4. O balão do chat aparece no canto da tela.

5. Como o visitante é identificado

Diferente do modo Intranet, aqui não existe login. A plataforma gera automaticamente um ID anônimo (por exemplo, user-a1b2c3...) que fica salvo no navegador do visitante.

📌 Precisa saber quem é o visitante? Você pode configurar o agente para pedir dados (nome, e-mail, telefone) durante a conversa. Se o seu site tem área logada e você quer a identidade garantida pelo seu sistema, o modo certo é o Intranet (acesso autenticado). Veja o guia específico.

6. Ajustando a conexão

Para mudar a conexão depois, abra a aba Canais, encontre a conexão em Suas conexões e clique em Gerenciar. A página tem três seções:

O que cada opção do Avançado faz:

• Renderizar em container fixo: em vez de flutuar, o chat aparece dentro de uma área da sua página. Depois de salvar, copie o Elemento do container em Instalação e cole no ponto da página onde o chat deve ficar:

  <div id="chatbox_ID_DA_CONEXAO"></div>
  

• Retenção de atenção: depois de um tempo sem interação (10 segundos por padrão, ajustável em Segundos de retenção), a aba do navegador chama atenção e o chat brilha para o visitante voltar;

• Carregamento atrasado: o chat não aparece logo de cara. Ele só carrega depois do tempo definido em Segundos de atraso;

• Domínios permitidos: um domínio por linha. exemplo.com também libera app.exemplo.com. Com a lista vazia, o chat roda em qualquer site.

⚠️ Atenção: retenção de atenção e carregamento atrasado não funcionam juntos. Ligar um desliga o outro.

Depois de mudar, clique em Salvar, no rodapé. Salvar muda só a conexão e não publica uma versão do agente.

7. Removendo o chat de um site

Abra a conexão em Gerenciar. No fim das seções Configurações e Avançado fica a Zona de risco: clique em Excluir conexão. A exclusão é permanente, e o link e os códigos já instalados param de funcionar na hora. Depois, tire o código do site.

8. Perguntas frequentes