Widget para web
Integración del widget
6 modos de embed (flotante, inline, ambos, botón, sidebar, modal) con ejemplos para HTML puro, React, Vue y WordPress.
Quick start
El widget se carga con UNA línea de HTML. Pegala antes del </body> de cualquier página donde quieras el chat:
<script src="https://www.sentik.io/widget.js" data-tenant="TU_WIDGET_KEY" async></script>Tu data-tenant está en /admin/widget. Cada workspace tiene la suya — nunca expongas el tenant_id real, solo el widget_key (es público por diseño).
Los 6 modos de embed
Mismo bot, distintas formas de presentarlo. Todos comparten la misma conversación por visitante (vía localStorage), así que un visitante que ve el chat embebido y luego abre el bubble flotante encuentra su historial.
1. Flotante (default)
Bubble en la esquina inferior derecha, panel que sube al click. Es lo que estás acostumbrado a ver en sitios SaaS.
<script src="https://www.sentik.io/widget.js" data-tenant="KEY" async></script>Cuándo usar: landing pages, blogs, e-commerce — cualquier sitio donde el chat es opcional pero querés que esté siempre disponible.
2. Inline embebido
El chat se renderiza dentro de un <div> que vos controlás. Sin bubble flotante.
<div data-sentik-chat style="height: 520px; max-width: 600px;"></div>
<script src="https://www.sentik.io/widget.js" data-tenant="KEY" data-mode="inline-only" async></script>Cuándo usar: página dedicada de Contacto, sección de Ayuda, FAQ donde el chat es el contenido principal de esa zona.
3. Ambos (inline + flotante)
Chat embebido en una sección Y bubble flotante al mismo tiempo. Como comparten visitor_id en localStorage, es la MISMA conversación renderizada en dos superficies.
<div data-sentik-chat style="height: 520px;"></div>
<script src="https://www.sentik.io/widget.js" data-tenant="KEY" async></script>Cuándo usar: tenés una sección de FAQ con chat y querés que el bubble esté disponible mientras el visitante navega el resto del sitio.
4. Botón trigger
Cualquier elemento HTML con el atributo data-sentik-open abre el panel al click. Útil para botones de CTA en tu hero o navbar.
<button data-sentik-open class="tu-clase-de-boton">Chatear con nosotros</button>
<script src="https://www.sentik.io/widget.js" data-tenant="KEY" async></script>Cuándo usar: CTA en el hero (“Hablá con un asesor”), link en el navbar, botón en la footer de Pricing.
5. Sidebar drawer
En lugar del panel flotante, el chat aparece como un drawer vertical que entra desde el costado y ocupa toda la altura del viewport. Estilo Intercom.
<script src="https://www.sentik.io/widget.js" data-tenant="KEY" data-mode="sidebar" async></script>Cuándo usar: sitios donde el soporte es central (SaaS B2B con muchos clientes), o cuando el panel chiquito se siente limitado para conversaciones largas.
6. Modal centrado
Ventana centrada con backdrop oscuro detrás. Se abre desde botones con data-sentik-open o desde el bubble flotante.
<button data-sentik-open>Necesito ayuda</button>
<script src="https://www.sentik.io/widget.js" data-tenant="KEY" data-mode="modal" async></script>Cuándo usar: landings con un solo CTA fuerte (“Empezar”) donde querés que el chat ocupe el foco completo del usuario.
Customización
Todo se configura desde /admin/widget. Cambia, guarda y el widget en producción se actualiza al próximo refresh del visitante.
| Opción | Qué hace |
|---|---|
| Color principal | Botón flotante, header del chat y burbujas del usuario. |
| Tema | Oscuro o claro. Se aplica al panel completo. |
| Posición | bottom-right o bottom-left (afecta floating y sidebar). |
| Avatar emoji | Reemplaza el ícono de chat en el launcher y el header. |
| Subtítulo del header | Texto bajo el nombre del bot. Ej.: "Respondemos en minutos". |
| Mensaje de bienvenida | Markdown — **bold**, *italic*, `code`, listas, links. |
| Placeholder | Texto guía dentro del input. |
| Quick replies | Hasta 5 botones sugeridos al primer turno. |
| Auto-abrir | Abre el panel solo después de X segundos (1 vez por sesión). |
| Show Sentik brand | Mostrar/ocultar "Powered by Sentik" en el footer. |
Ejemplos por framework
React / Next.js
Usa el componente Script de Next con strategy="afterInteractive":
import Script from 'next/script';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<Script
src="https://www.sentik.io/widget.js"
data-tenant="TU_KEY"
strategy="afterInteractive"
/>
</body>
</html>
);
}Para embed inline en una página específica:
export default function ContactoPage() {
return (
<div>
<h1>Contacto</h1>
<div data-sentik-chat style={{ height: 520, maxWidth: 600 }} />
</div>
);
}Vue 3 / Nuxt
Para Nuxt usa el módulo de scripts:
export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://www.sentik.io/widget.js',
async: true,
'data-tenant': 'TU_KEY',
},
],
},
},
});Para Vue puro:
<script src="https://www.sentik.io/widget.js" data-tenant="TU_KEY" async></script>WordPress
Pegá el snippet en Apariencia → Personalizar → CSS/JS adicional, o si usás un plugin tipo “Insert Headers and Footers”, agregalo al footer:
<script src="https://www.sentik.io/widget.js" data-tenant="TU_KEY" async></script>Shopify
Andá a Online Store → Themes → Edit code → theme.liquid, y pegá el snippet justo antes del cierre </body>:
<script src="https://www.sentik.io/widget.js" data-tenant="TU_KEY" async></script>HTML puro / cualquier sitio
<!doctype html>
<html lang="es">
<head><meta charset="utf-8"><title>Mi sitio</title></head>
<body>
<h1>Hola</h1>
<script src="https://www.sentik.io/widget.js" data-tenant="TU_KEY" async></script>
</body>
</html>Atributos del script
| Atributo | Valores | Default |
|---|---|---|
data-tenant | string (widget_key) | — (obligatorio) |
data-mode | floating | sidebar | modal | inline-only | floating |
data-api | URL del backend (avanzado, normalmente no se cambia) | origin del script |
Atributos en el HTML del host
| Atributo | Qué hace |
|---|---|
data-sentik-chat | Cualquier <div> con este atributo recibe un chat inline embebido. |
data-sentik-open | Cualquier elemento con este atributo abre el chat al click. |
Privacidad y datos
- Identidad del visitante: usamos un visitor_id generado y guardado en
localStorage. No cookies de terceros, no fingerprinting. - Conversaciones: persisten asociadas a ese visitor_id. Si el visitante limpia su localStorage pierde el historial (por diseño).
- CORS: el widget llama a
sentik.io/api/widget/*desde cualquier origen. Elwidget_keyes público; lo único sensible (el tenant_id real, el service-role key) nunca se expone al browser. - Rotar la clave: si la expusiste por error, usá el botón “Rotar clave” en
/admin/widget. La anterior queda inválida al instante.
FAQ
¿Puedo cambiar el color desde código?
No — todo se configura desde /admin/widget y el widget lo pulla cuando carga. Esto deja el snippet en tu sitio idéntico aunque cambies todo el estilo desde el panel.
¿Carga JS en mi sitio? ¿Es seguro?
Sí, pero el widget vive en su propio IIFE con namespace __sentikWidgetLoaded. No expone globals ni modifica objetos del host. Las llamadas son a un solo origin (sentik.io). Pesa ~12KB gzip.
¿Funciona en mobile?
Sí. En pantallas <600px el panel pasa a modo “sheet” full screen con safe-area insets para notches. La sidebar y el modal también se ajustan a la pantalla completa.
¿Puedo tener más de un widget en un mismo sitio?
Un solo script por página por tenant. Podés tener N divs data-sentik-chat y N elementos data-sentik-open — todos comparten la misma conversación del visitante.
¿Y si el visitante escala a humano?
Cuando el bot detecta que necesita un agente, la conversación pasa a la bandeja de Sentik (visible en /agent) con el canal web. El visitante ve la respuesta del agente humano en el widget igual que las del bot, con un borde verde para diferenciar.