WebChat

Incorporá Prometheo directamente en tu sitio web y sumá un canal adicional de atención, con todas las funcionalidades de Prometheo pero sin depender de sistemas de mensajería.

💬 Canal Webchat en Prometheo

---

✅ 1) ¿Qué es el Webchat?

Imaginá el típico globito de chat abajo a la derecha de una web 👇

➡️ Eso es Webchat: Un widget que se instala en tu sitio web para que los visitantes puedan chatear directo con tu asistente de Prometheo.

✔️ Funciona igual que WhatsApp / Instagram / Facebook ✔️ Los chats entran a Chats en Prometheo ✔️ Podés apagar / prender asistente ✔️ Podés intervenir manualmente

Para vos → es simplemente otro canal de entrada de conversaciones.

---

🌐 2) Disponibilidad

• Webchat está disponible en Prometheo, en todos los planes.

• Si no lo ves en Conexiones, hay que pedir que lo habiliten.

Cuando esté habilitado lo vas a ver como:

👉 Conexiones → Web

---

⚙️ 3) Configuración desde Prometheo (paso a paso)

🔧 Dentro de Prometheo:

1️⃣ Entrá a Conexiones 2️⃣ Ingresá a Webchat / Conectar 3️⃣ Cargá el dominio de tu web, por ejemplo:

https://tusitioweb.com

🔔 Debe ser el dominio real donde estará el chat.

4️⃣ Prometheo te mostrará una API KEY 5️⃣ Esa API Key se usa en el script del chat que va en tu web

👉 Prometheo te da los datos → Vos (o tu desarrollador) pegan el script.

📌 Recomendación oficial:

Lo ideal es que esta parte la haga la persona que administra el sitio web.

---

🖥️ 4) Qué hay que hacer en tu sitio web

Del lado de tu página web:

✔️ Pegar un script ✔️ Ese script incluye la API Key de Webchat

📌 No detallamos el código acá porque:

• Depende del tipo de web

• El script lo brinda Prometheo

• Quien administra la web sabrá dónde insertarlo

Ejemplos:

• WordPress → suele ir en header/footer

• Sitio propio → en el HTML o layout principal

• Tienda online → según plataforma

---

💬 5) ¿Cómo funciona para el usuario final?

Cuando todo está listo:

👀 El visitante ve el widget 🗨️ Escribe su mensaje 🤖 El asistente responde automáticamente 📥 El chat aparece en Prometheo como cualquier otro

En tu consola vas a ver:

• Canal: Webchat

• Podés:

  • Apagar / prender asistente

  • Responder manualmente

  • Etiquetar

  • Aplicar smart tags

  • Seguimientos

➡️ Para vos: simplemente un chat más.

---

🔁 6) Cómo funciona la sesión y el contexto

Mientras el usuario siga con la misma sesión del navegador:

✔️ El chat mantiene el historial ✔️ Recuerda lo que ya habló ✔️ Mantiene contexto

Pero si el usuario: ❌ Cambia de navegador ❌ Entra en incógnito ❌ Borra caché

👉 Se considera una conversación nueva.

📌 Esto explica por qué: Un mismo visitante puede aparecer varias veces como “chats nuevos”.

---

🤖 7) Relación con tu asistente

Muy importante:

🧠 El asistente es uno solo Para:

• WhatsApp

• Instagram

• Facebook

• TikTok

• Webchat

No existe hoy “un asistente distinto solo para Webchat”.

➡️ Entonces:

• El mismo prompt que usás para WhatsApp → responde Webchat.

• Si cambiás el asistente → impacta en todos los canales.

✨ Por eso conviene que el asistente esté preparado tanto para gente de redes como para gente que llega desde la web.

---

👀 8) Qué vas a ver en Prometheo cuando Webchat esté activo

🔌 En Conexiones

• Webchat habilitado

• Dominio configurado

• API Key vinculada

💬 En Chats

• Conversaciones nuevas

• Canal: Webchat

• Podés usar:

  • Smart tags

  • Seguimientos

  • Intervención manual

  • Filtrar por canal

📇 En CRM

• Contactos guardados

• Canal de origen: Webchat

---

⚠️ 9) Cosas a tener en cuenta / limitaciones actuales

⛔ Contexto depende del navegador (borra caché → conversa desde cero)

⛔ No se puede tener un asistente distinto solo para Webchat

---

10) Guía general de aplicación

Esta es una guía general orientada a explicar cómo integrar el Webchat en distintos tipos de sitios (HTML, React, Next.js, WordPress). La implementación real puede variar según:

• cómo esté construido tu sitio,

• el framework o CMS que uses,

• la forma en que gestiones plantillas, layout o scripts,

• configuraciones de seguridad, caché o CDN.

👉 Recomendación oficial: Siempre sugerimos que esta integración la realice un desarrollador web, administrador del sitio o la persona técnica responsable de la plataforma. Así asegurás que el script esté insertado correctamente, no interfiera con otros códigos del sitio y funcione de manera estable.

Si tu web tiene una estructura particular o no sabés dónde colocar el script, lo ideal es que compartas esta guía más la API Key al desarrollador o equipo técnico.

✅ 1) Integración en sitio HTML tradicional

Ideal si tu web es “a mano” o está construida sin frameworks.

📍 Pegá este script justo antes del </body>:

<script
  src="https://app.prometheo.ai/widget.min.js"
  data-api-key="TU_API_KEY_DE_WEBCHAT"
  data-user-id=""
></script>

Eso es todo. Guardás → publicás → el widget aparece en el sitio 👌

---

⚛️ 2) Integración en Next.js

Abrí tu layout principal o _app.js (o _app.tsx) y agregá esto:

import Script from 'next/script';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://app.prometheo.ai/widget.min.js"
        data-api-key="TU_API_KEY_DE_WEBCHAT"
        data-user-id=""
        strategy="afterInteractive"
      />
    </>
  );
}

👉 strategy="afterInteractive" asegura que cargue cuando la app está lista.

---

⚛️ 3) Integración en React

Si tu sitio usa React (CRA, Vite, etc.), colocá esto en tu App.jsx o componente raíz:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.prometheo.ai/widget.min.js';
    script.setAttribute('data-api-key', 'TU_API_KEY_DE_WEBCHAT');
    script.setAttribute('data-user-id', '');
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="App">
      {/* Tu contenido */}
    </div>
  );
}

export default App;

🎯 Con esto, el widget aparece automáticamente en todas las páginas.

---

🟦 4) Integración en WordPress

📍 Opción recomendada: pegar el script en footer.php del tema activo, antes del </body>

<!-- Antes del cierre </body> -->
<script
  src="https://app.prometheo.ai/widget.min.js"
  data-api-key="TU_API_KEY_DE_WEBCHAT"
  data-user-id=""
></script>

Alternativas:

✔️ Usar plugins tipo:

• Insert Headers and Footers

• Code Snippets

Pegás el script en la sección Footer Scripts.

---

🧪 ¿Cómo probar si quedó bien?

1️⃣ Entrás al sitio desde navegador común (no logueado como admin si es WordPress). 2️⃣ Refrescás la página. 3️⃣ 🔍 Abajo a la derecha debería aparecer el widget. 4️⃣ Mandás un mensaje → debería entrar a Chats → Canal Webchat en Prometheo.

---

⚠️ Errores comunes a evitar

❌ Pegar el script sin haber configurado el dominio en Conexiones → Webchat ❌ Usar una API Key incorrecta ❌ Colocarlo en <head> y bloquear carga (si pasa, moverlo a footer) ❌ Pegar el script en modo “vista” de WordPress en lugar de editor de código