Chat con Login y Contraseña

Qué es

El Chat con Login y Contraseña es una forma de publicar el agente en la que todos los visitantes usan el mismo login y la misma contraseña para abrir el chat. Funciona como una portería: quien tiene la contraseña entra y conversa, quien no la tiene solo ve la pantalla de acceso.

1. Cuándo usar

Usa el modo Login y Contraseña cuando quieres que:

• Solo un grupo cerrado use el chat, como el equipo, clientes VIP, beta testers o el público de un evento;
• La distribución sea simple: un enlace y una contraseña, sin desarrollo;
• El chat esté en tu sitio, pero pida la contraseña antes de la conversación.

⚠️ Importante: la contraseña es compartida, todos usan la misma. Controla el acceso, pero no identifica a cada visitante. Si necesitas saber quién es cada usuario, el modo correcto es Intranet (acceso autenticado). Mira la guía específica.

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 Web protegida por contraseña y haz clic en Seleccionar.
5. En Destino y acceso, comprueba que el Modo de acceso esté en Login y contraseña compartidos y haz clic en Continuar.
6. En Configuración, completa:
   • Nombre de la conexión: un nombre interno, como “Área de soporte restringida”;
   • Login compartido: el usuario que las personas van a escribir en la pantalla de acceso del chat;
   • Contraseña compartida: como mínimo 6 caracteres;
   • Dominios permitidos (opcional): los sitios en los que el chat puede funcionar, uno por línea.
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.

🔒 Anota la contraseña en un lugar seguro. Se guarda de forma protegida y no se puede ver después. Si la pierdes, puedes definir una nueva (ver la sección 3.2).

⚠️ 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. Distribuyendo el acceso

Para ver el enlace y los códigos después, abre la pestaña Canales, busca la conexión en Tus conexiones y haz clic en Gestionar.

3.1 Enlace o código en el sitio

En Instalación, elige qué copiar:

• Enlace del bot: la forma más rápida de distribuir. Envía el enlace, el login y la contraseña a quienes deben tener acceso. Al abrirlo, la persona ve la pantalla de acceso del chat;
• Código del sitio: el mismo código del Chat Público, para poner el chat en tu sitio. La diferencia es que el chat se abre en la pantalla de acceso y no directamente en la conversación.

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

3.2 Restableciendo la contraseña

En la misma página, en Credenciales y acciones, está el bloque Restablecer contraseña compartida. Muestra el Login actual y un campo para la Nueva contraseña (mínimo de 6 caracteres). Haz clic en Restablecer contraseña: la nueva contraseña vale al instante para todas las personas, y la anterior deja de funcionar.

Restablecer la contraseña es independiente del botón Guardar y no envía otros cambios de la página.

4. Cómo se conecta todo

┌─────────────────────┐                        ┌──────────────────────┐
│  Visitante abre el  │   1. accede al enlace  │  Página del chat     │
│  enlace o el sitio  │ ─────────────────────▶ │  (pantalla de login  │
└─────────────────────┘                        │  con el aspecto de   │
                                               │  tu bot)             │
                                               └──────────┬───────────┘
                                                          │ 2. escribe login + contraseña
                                                          ▼
                                               ┌──────────────────────┐
                                               │  API Caramelo        │
                                               │  → verifica la       │
                                               │    contraseña        │
                                               │    (hash seguro)     │
                                               │  → aplica límite de  │
                                               │    intentos          │
                                               └──────────┬───────────┘
                                                          │ 3. acceso concedido
                                                          ▼
                                               ┌──────────────────────┐
                                               │  Conversación        │
                                               │  abierta, con el     │
                                               │  historial de ese    │
                                               │  navegador           │
                                               └──────────────────────┘

En resumen:

1. El visitante abre el enlace (o la página del sitio con el código);
2. En lugar de la conversación, aparece una pantalla de acceso con los colores y el avatar de tu agente;
3. Escribe el login y la contraseña compartidos;
4. La plataforma verifica los datos y habilita la conversación.

5. Cómo funciona el acceso del visitante

💡 Buenas prácticas: cambia la contraseña de vez en cuando, evita contraseñas obvias y, si alguien sale del grupo, restablece la contraseña y distribuye la nueva.

6. Ajustando la apariencia

En Gestionar, las secciones Configuraciones y Avanzado tienen las mismas opciones del Chat Público: posición del globo, modo compacto, mantener chat abierto, contenedor fijo, temporización y dominios permitidos. Mira qué hace cada una en la guía del Chat Público.

Estas opciones valen para el chat instalado en el sitio. La pantalla de acceso siempre usa los colores y el avatar configurados en la pestaña Visual del agente.

7. Preguntas frecuentes