Chat Público (Enlace o Sitio)

Qué es

El Chat Público es la forma más simple de poner al agente a atender. Puedes compartir un enlace que abre el chat en cualquier navegador o pegar un código en tu sitio para mostrar el globo del chat en las páginas. Cualquier visitante puede conversar, sin login y sin tocar el servidor.

1. Cuándo usar

Usa el modo Público cuando quieres que:

• Cualquier persona que entre al sitio o al enlace pueda empezar una conversación;
• La instalación sea solo copiar y pegar un código, sin tocar el servidor;
• El chat aparezca como un globo flotante o dentro de un área fija de la página.

2. Creando la conexión

1. Entra en el proyecto, haz clic en Robots Agentes de IA en el menú lateral y abre el agente.
2. Haz clic en la pestaña Canales.
3. Haz clic en Agregar canal. Si el agente todavía no tiene ninguna conexión, la lista de canales aparece directamente.
4. En el grupo Web, elige una de las opciones y haz clic en Seleccionar:
   • Enlace público: un enlace que abre el agente en cualquier navegador;
   • Sitio embebido: el globo del chat dentro de tu sitio.
5. En Destino y acceso, deja el Modo de acceso en Público y haz clic en Continuar.
   • Si el proyecto ya tiene una conexión de este tipo, aparece en este paso. Elige Crear otra conexión para hacer una nueva o selecciona la existente para abrirla.
6. En Configuración, completa:
   • Nombre de la conexión: un nombre interno para reconocerla después, como “Sitio institucional”;
   • Dominios permitidos (opcional): los sitios en los que el chat puede funcionar, uno por línea. Ver la sección 6.
7. Haz clic en Crear conexión.

La pantalla “Conexión creada” muestra el Enlace del bot y el código para instalar en el sitio, los dos listos para copiar. Enlace público y Sitio embebido crean el mismo tipo de conexión, así que puedes usar el enlace y el código al mismo tiempo.

⚠️ Atención: crear la conexión no publica una versión del agente. Mientras no se publique ninguna versión, el chat atiende con el borrador actual. Mira cómo publicar en Tu Primer Agente.

3. Instalando en el sitio

Pega el código de instalación antes del </body> en todas las páginas en las que debe aparecer el chat. Después, recarga el sitio y comprueba que el globo aparece en la esquina de la página.

El código tiene 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 el código después, abre la conexión en Gestionar y ve a Instalación, opción Código del sitio.

3.1 Entendiendo cada campo del código

Si activas la retención de atención o la carga retrasada, el código incluye los parámetros correspondientes.

💡 Consejo: el código que muestra la plataforma refleja la conexión guardada. Haz tus ajustes, haz clic en Guardar y solo después copia el código.

📌 ¿Ya lo instalaste con el código antiguo? Si tu sitio usa el formato anterior, con var carameloaiChatbot y el script prod/index.js, sigue funcionando. No hace falta cambiarlo.

3.2 Probando sin instalar nada

Abre el Enlace del bot en el navegador. Muestra el agente funcionando, para que valides la conversación antes de pegar el código en el sitio.

4. Cómo se conecta todo

┌─────────────────────┐                        ┌──────────────────────┐
│  Visitante abre tu  │   1. la página carga   │  Tu sitio            │
│  sitio              │ ─────────────────────▶ │  (script del chat    │
└─────────────────────┘                        │  pegado en el HTML)  │
                                               └──────────┬───────────┘
                                                          │ 2. el script genera un ID
                                                          │    anónimo para el visitante
                                                          ▼
                                               ┌──────────────────────┐
                                               │  API Caramelo        │
                                               │  → valida la clave   │
                                               │    pública           │
                                               │  → crea la           │
                                               │    conversación      │
                                               └──────────┬───────────┘
                                                          │ 3. chat disponible
                                                          ▼
                                               ┌──────────────────────┐
                                               │  Globo del chat en   │
                                               │  la esquina de la    │
                                               │  pantalla, listo     │
                                               │  para usar           │
                                               └──────────────────────┘

En resumen:

1. El visitante abre una página de tu sitio;
2. El script del chat se carga y crea un identificador anónimo para ese navegador;
3. La plataforma valida la clave pública y abre la conversación;
4. El globo del chat aparece en la esquina de la pantalla.

5. Cómo se identifica al visitante

A diferencia del modo Intranet, aquí no hay login. La plataforma genera automáticamente un ID anónimo (por ejemplo, user-a1b2c3...) que queda guardado en el navegador del visitante.

📌 ¿Necesitas saber quién es el visitante? Puedes configurar el agente para que pida datos (nombre, correo, teléfono) durante la conversación. Si tu sitio tiene un área con login y quieres que tu sistema garantice la identidad, el modo correcto es Intranet (acceso autenticado). Mira la guía específica.

6. Ajustando la conexión

Para cambiar la conexión después, abre la pestaña Canales, busca la conexión en Tus conexiones y haz clic en Gestionar. La página tiene tres secciones:

Lo que hace cada opción de Avanzado:

• Renderizar en contenedor fijo: en lugar de flotar, el chat aparece dentro de un área de tu página. Después de guardar, copia el Elemento del contenedor en Instalación y pégalo en el punto de la página donde debe quedar el chat:

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

• Retención de atención: después de un tiempo sin interacción (10 segundos por defecto, ajustable en Segundos de retención), la pestaña del navegador llama la atención y el chat brilla para que el visitante vuelva;

• Carga retrasada: el chat no aparece de entrada. Solo se carga después del tiempo definido en Segundos de retraso;

• Dominios permitidos: un dominio por línea. ejemplo.com también habilita app.ejemplo.com. Con la lista vacía, el chat funciona en cualquier sitio.

⚠️ Atención: la retención de atención y la carga retrasada no funcionan juntas. Activar una desactiva la otra.

Después de cambiar algo, haz clic en Guardar, al pie de la página. Guardar solo cambia la conexión y no publica una versión del agente.

7. Quitando el chat de un sitio

Abre la conexión en Gestionar. Al final de las secciones Configuraciones y Avanzado está la Zona de riesgo: haz clic en Eliminar conexión. La eliminación es permanente, y el enlace y los códigos ya instalados dejan de funcionar al instante. Después, quita el código del sitio.

8. Preguntas frecuentes