Files
soft_usite/UMIND_GUIA_ONBOARDING.html

244 lines
8.6 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>uMind — Guía de onboarding de cliente</title>
<style>
:root {
--verde: #8eb02f;
--verde-oscuro: #5a7a1e;
--texto: #2b2b2b;
--gris: #6b7280;
--borde: #e5e7eb;
--fondo-suave: #f7f8f5;
}
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--texto);
line-height: 1.6;
max-width: 860px;
margin: 0 auto;
padding: 40px 24px 80px;
background: #fff;
}
header {
border-bottom: 3px solid var(--verde);
padding-bottom: 20px;
margin-bottom: 32px;
}
header .badge {
display: inline-block;
background: var(--verde);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
h1 { font-size: 32px; margin: 0 0 6px; color: #1f2937; }
header p.subtitulo { color: var(--gris); font-size: 14px; margin: 0; }
h2 {
font-size: 20px;
color: var(--verde-oscuro);
margin-top: 44px;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--borde);
}
h3 { font-size: 15px; margin: 20px 0 6px; color: #1f2937; }
p { margin: 10px 0; }
code {
background: var(--fondo-suave);
border: 1px solid var(--borde);
border-radius: 4px;
padding: 2px 6px;
font-size: 13px;
font-family: "SF Mono", Menlo, Consolas, monospace;
color: #b0530f;
}
pre {
background: #1f2937;
color: #d1fae5;
padding: 16px 18px;
border-radius: 8px;
overflow-x: auto;
font-size: 13px;
font-family: "SF Mono", Menlo, Consolas, monospace;
}
pre code { background: none; border: none; color: inherit; padding: 0; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
.paso {
display: flex;
gap: 14px;
margin: 14px 0;
align-items: flex-start;
}
.paso .num {
flex: 0 0 28px;
height: 28px;
border-radius: 50%;
background: var(--verde);
color: #fff;
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.paso .contenido { flex: 1; padding-top: 2px; }
.paso .contenido strong { display: block; margin-bottom: 2px; }
.paso .contenido p { margin: 2px 0 0; font-size: 14px; color: #374151; }
.callout {
border-radius: 8px;
padding: 16px 18px;
margin: 18px 0;
font-size: 14px;
}
.callout.info { background: #eef6e3; border: 1px solid #c9e0a3; }
.callout.alerta { background: #fdf3e7; border: 1px solid #f0d3a3; }
.callout strong { display: block; margin-bottom: 6px; }
.lista-check { list-style: none; padding-left: 0; }
.lista-check li { padding-left: 26px; position: relative; }
.lista-check li::before {
content: "☐";
color: var(--verde-oscuro);
font-weight: 700;
position: absolute;
left: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: 14px 0;
font-size: 13px;
}
th, td {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid var(--borde);
}
th { color: var(--gris); font-weight: 600; text-transform: uppercase; font-size: 11px; }
footer {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid var(--borde);
font-size: 12px;
color: var(--gris);
text-align: center;
}
@media print {
body { padding: 0; max-width: 100%; }
}
</style>
</head>
<body>
<header>
<span class="badge">GUÍA INTERNA</span>
<h1>uMind — Guía de onboarding de cliente</h1>
<p class="subtitulo">Qué configurar y qué pasos seguir para llevar uMind a un cliente nuevo · Agosto 2026</p>
</header>
<h2>1. Configuración única del sistema</h2>
<p>Se hace <strong>una sola vez</strong>, no por cada cliente. Si ya está hecha, sáltate esta sección.</p>
<div class="paso">
<div class="num">1</div>
<div class="contenido">
<strong>Config de embeddings (OpenAI)</strong>
<p>En <code>/app/ai-config</code>, crea una config con provider <strong>OpenAI</strong> y activa el módulo <strong>"uMind — embeddings"</strong>. Necesita su propia API key de OpenAI. La usan <em>todos</em> los clientes para generar los vectores de búsqueda de su base de conocimiento.</p>
</div>
</div>
<div class="paso">
<div class="num">2</div>
<div class="contenido">
<strong>Config de chat (Anthropic recomendado)</strong>
<p>Al menos una config activa de chat. Se asigna a cada tenant al crearlo — puedes reutilizar la misma para todos los clientes, o crear una por cliente si más adelante quieres separar costo/uso por cliente.</p>
</div>
</div>
<h2>2. Información a pedirle al cliente antes de empezar</h2>
<table>
<tr><th>Dato</th><th>Por qué</th></tr>
<tr><td>URL exacta de su sitio</td><td>Es lo que se va a "leer" (crawlear) para entrenar el asistente.</td></tr>
<tr><td>Todos los dominios donde corre el sitio</td><td><strong>Crítico:</strong> con y sin <code>www</code>, y staging si aplica. Si falta uno, el widget se bloquea ahí por seguridad.</td></tr>
<tr><td>Tono/personalidad deseado</td><td>Opcional — formal, cercano, con emojis, etc. Si no lo dan, se usa un tono neutro por defecto.</td></tr>
<tr><td>Mensaje de bienvenida</td><td>Opcional — el saludo que ve el visitante al abrir el chat.</td></tr>
<tr><td>Quién instala el script</td><td>Su desarrollador, o alguien de U-Site si administras el sitio.</td></tr>
</table>
<h2>3. Proceso paso a paso en <code>/app/umind</code></h2>
<div class="paso">
<div class="num">1</div>
<div class="contenido">
<strong>Crear el tenant</strong>
<p>Nombre, dominios permitidos, config de IA de chat, tono, mensaje de bienvenida.</p>
</div>
</div>
<div class="paso">
<div class="num">2</div>
<div class="contenido">
<strong>Ingestar el sitio</strong>
<p>Entra al tenant → pestaña "Base de conocimiento" → pega la URL del sitio → clic en Ingestar. Espera a que el estado pase de "procesando" a "listo" (puede tardar varios minutos según el tamaño del sitio).</p>
</div>
</div>
<div class="paso">
<div class="num">3</div>
<div class="contenido">
<strong>Copiar el código de instalación</strong>
<p>Desde la ficha del tenant, copia el snippet:</p>
<pre><code>&lt;script src="https://admin.u-site.app/widget/umind.js" data-site="SITE_KEY" defer&gt;&lt;/script&gt;</code></pre>
</div>
</div>
<div class="paso">
<div class="num">4</div>
<div class="contenido">
<strong>Entregarlo al cliente</strong>
<p>Que lo peguen justo antes de <code>&lt;/body&gt;</code> en su sitio (o lo pega quien administre el sitio si es un proyecto de U-Site).</p>
</div>
</div>
<div class="paso">
<div class="num">5</div>
<div class="contenido">
<strong>Probar en el sitio real</strong>
<p>Entra al sitio del cliente y hazle un par de preguntas al widget para validar que responde bien antes de darlo por "en producción".</p>
</div>
</div>
<h2>4. Antes de vender a un cliente puntual — revisa esto</h2>
<div class="callout alerta">
<strong>Limitaciones a tener en cuenta:</strong>
<ul class="lista-check">
<li><strong>Sitios 100% React/Vue/Angular sin renderizado en servidor (SPA):</strong> el crawler solo lee el HTML que devuelve el servidor, no ejecuta JavaScript. Si el contenido del sitio se carga todo por JS, la ingesta puede salir casi vacía — revisa el sitio (o pide que lo validen) antes de prometer el servicio.</li>
<li><strong>No hay carga de PDF/Word todavía:</strong> solo se ingesta desde una URL pública. Si el cliente quiere que el asistente conozca un PDF de precios que no está publicado como página web, eso no está soportado hoy.</li>
<li><strong>Sitios muy grandes:</strong> ajustar el número máximo de páginas al ingestar (por defecto 30) si el sitio tiene cientos de páginas.</li>
<li><strong>Sin panel de costos por cliente todavía:</strong> si se factura por consumo real en vez de tarifa plana, hoy no hay forma de ver cuánto gastó cada tenant en la plataforma.</li>
</ul>
</div>
<h2>Checklist rápido</h2>
<div class="callout info">
<ul class="lista-check">
<li>Config global de embeddings (OpenAI) creada — una sola vez</li>
<li>Config global de chat (Anthropic) creada — una sola vez</li>
<li>URL y todos los dominios del cliente confirmados</li>
<li>Tenant creado en /app/umind</li>
<li>Sitio ingestado y en estado "listo"</li>
<li>Snippet copiado y entregado</li>
<li>Widget probado en el sitio real</li>
</ul>
</div>
<footer>
U-Site S.A.S BIC · uMind · Guía interna de onboarding
</footer>
</body>
</html>