> For the complete documentation index, see [llms.txt](https://prometheo.gitbook.io/prometheo/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://prometheo.gitbook.io/prometheo/canales-adicionales/webchat.md).

# WebChat

## 💬 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>`**:

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

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

```javascript
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>`

```html
<!-- 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**.

### 5) Integración con GTM

```
<script>
  var s = document.createElement('script');
  s.src = 'https://app.prometheo.ai/widget.min.js';
  s.setAttribute('data-api-key', 'iframe_c00ec780c12be45793e1171a8338b175b9dc02fc88035c89443c7d443a2bdd7c');
  s.setAttribute('data-user-id', '');
  document.head.appendChild(s);
</script>
```

Cómo instalarlo en Google Tag Manager:

1\. En GTM, crea una nueva etiqueta (Tag).

2\. Elige el tipo `HTML personalizado` (Custom HTML).

3\. Pega el script de arriba en el campo HTML.

4\. Configura el activador para que se dispare en Todas las páginas (o en las páginas donde quieras mostrar el widget).

5\. Guarda y publica el contenedor.

También sirve para Tienda Nube: si instalás Google Tag Manager en tu tienda de Tienda Nube y agregás esta etiqueta en GTM, el widget funciona correctamente.

***

## 🧪 ¿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