Bajo demanda
Launcher
Muestra un botón flotante y crea el chat solo cuando el visitante lo abre.
Integración pública y segura
Conversaciones útiles, dentro de tu sitio.
Integra Platica Webchat con una sola etiqueta. Elige un launcher flotante, una experiencia inline o una página completa y controla su comportamiento con JavaScript.
Sin dependencias Responsive Accesible por teclado
tu-sitio.mx
Asistente Platica
Disponible
¡Hola! ¿Cómo podemos ayudarte?
Quiero integrar el chat en mi sitio.
Escribe un mensaje…
01 · Instalación
Una etiqueta y listo.
Solicita la clave pública de tu canal, autoriza el dominio donde se mostrará y pega el
loader antes de cerrar </body>.
- 1
Obtén tu clave pública
Identifica el canal sin exponer secretos.
- 2
Autoriza tu dominio
Registra cada origen donde usarás el widget.
- 3
Inserta el loader
Usa defer para no bloquear el contenido de tu sitio.
HTML
<script
src="https://chat.platica.mx/widget.js"
data-webchat="TU_CLAVE_PUBLICA"
defer>
</script>Importante: la clave pública identifica el canal; no es una credencial privada. No agregues secretos ni encabezados de autorización al navegador.
02 · Modos
El chat donde lo necesitas.
Los tres modos usan la misma configuración publicada y se adaptan al viewport.
Dentro del layout
Inline
Monta el chat inmediatamente en un contenedor de tu página.
Superficie dedicada
Página completa
Ocupa todo el viewport para soporte, onboarding o portales privados.
Ejemplos de integración
Launcher flotante, chat inline o una experiencia de página completa.
Botón flotante que crea el iframe al hacer clic.
<script
src="https://chat.platica.mx/widget.js"
data-webchat="TU_CLAVE_PUBLICA"
defer>
</script>03 · Configuración
Tu identidad, sin rehacer el frontend.
La configuración publicada define apariencia, contenido y comportamiento. El loader la aplica dentro de un entorno aislado para evitar conflictos con los estilos del sitio.
Probar configuradorLauncher
Posición, tamaño, forma, offsets, ícono, sombra, pulso y badge.
Ventana
Dimensiones, separación, breakpoint móvil y pantalla completa.
Apariencia
Tema, color primario, radios, tipografía y colores semánticos.
Contenido
Identidad, bienvenida, placeholders y etiquetas de disponibilidad.
Conversación
Mensajes sugeridos, formulario pre-chat y estado por pestaña.
Adjuntos
Activación, formatos permitidos y límites publicados por el canal.
04 · Capacidades
Listo para una conversación real.
El widget cubre el recorrido completo desde la primera interacción hasta la continuidad con tu equipo.
- Launcher con posición, forma, tamaño, ícono, pulso y badge
- Ventana responsive con modo móvil y pantalla completa
- Tema claro u oscuro, colores semánticos y tipografía
- Bienvenida, mensajes sugeridos y formulario pre-chat
- Disponibilidad, persistencia por pestaña y estados de conexión
- Adjuntos de imagen y continuidad con atención humana
05 · API JavaScript
Control cuando lo necesites.
Al cargar el script se expone window.PlaticaWebchat. Si omites la clave en
una acción, se usa la primera instancia disponible.
JavaScript
await window.PlaticaWebchat.init({
publicKey: 'TU_CLAVE_PUBLICA'
})
await window.PlaticaWebchat.mount({
publicKey: 'TU_CLAVE_PUBLICA',
target: '#mi-chat',
instanceId: 'soporte'
})
await window.PlaticaWebchat.open('TU_CLAVE_PUBLICA')
window.PlaticaWebchat.close('TU_CLAVE_PUBLICA')
window.PlaticaWebchat.expand('TU_CLAVE_PUBLICA')
window.PlaticaWebchat.collapse('TU_CLAVE_PUBLICA')
await window.PlaticaWebchat.refresh('TU_CLAVE_PUBLICA')
window.PlaticaWebchat.destroy('TU_CLAVE_PUBLICA')init(options)
Crea una instancia launcher. Acepta publicKey y, opcionalmente, instanceId.
mount(options)
Monta una instancia inline en un selector CSS o HTMLElement.
open(publicKey?)
Abre el panel de una instancia launcher.
close(publicKey?)
Cierra el panel y devuelve el foco al launcher.
expand(publicKey?)
Expande el panel cuando la configuración permite pantalla completa.
collapse(publicKey?)
Restaura el panel a su tamaño configurado.
refresh(publicKey?)
Vuelve a consultar la configuración publicada y redibuja la instancia.
destroy(publicKey?)
Elimina la instancia y libera listeners y cambios de scroll.
06 · Eventos
Observa el ciclo de vida.
El widget emite eventos en window. Todos incluyen la clave pública en event.detail.publicKey; el evento de error añade un mensaje diagnóstico.
platica:webchat:opened
El panel terminó de abrirse.
platica:webchat:closed
El panel fue cerrado.
platica:webchat:error
No fue posible abrir el chat.
Eventos del navegador
window.addEventListener('platica:webchat:opened', (event) => {
console.log('Chat abierto', event.detail.publicKey)
})
window.addEventListener('platica:webchat:closed', (event) => {
console.log('Chat cerrado', event.detail.publicKey)
})
window.addEventListener('platica:webchat:error', (event) => {
console.error('No se pudo abrir el chat', event.detail.message)
})07 · Adjuntos
Imágenes, con límites claros.
Cuando el canal habilita adjuntos, el visitante puede enviar JPG, PNG o WebP desde el composer. Los archivos se validan antes de incorporarse a la conversación.
3 máximo
5 MiB por imagen
15 MiB por mensaje
08 · Handover humano
La conversación continúa con tu equipo.
Cuando una persona se incorpora, el chat muestra el cambio dentro del historial y conserva el contexto. Los mensajes humanos usan la identidad configurada para el operador o, si no existe, la identidad del asistente.
Sistema
Un miembro del equipo se unió a la conversación.
09 · Seguridad
Público no significa sin control.
La integración del navegador usa únicamente una clave pública. Las decisiones sensibles permanecen fuera del código de tu sitio.
Dominios autorizados
Cada canal limita los orígenes desde donde puede iniciarse una conversación.
Iframe aislado
La UI vive separada de los estilos del host y valida el origen de sus mensajes.
Sin secretos en el cliente
Usa solo TU_CLAVE_PUBLICA. Nunca insertes credenciales privadas en HTML o JavaScript.
Transporte seguro
Sirve tu sitio por HTTPS y conserva la URL oficial de widget.js sin copiar su bundle.
Configuración publicada
El navegador recibe únicamente opciones necesarias para representar el chat.
Archivos validados
Los formatos, cantidades y tamaños se comprueban antes de mostrar un adjunto.
10 · Troubleshooting
Resuelve lo más común.
Empieza por la carga del script, la clave pública y la autorización del dominio.
El launcher no aparece
Confirma que widget.js cargó, que data-webchat usa tu clave pública, que el canal está habilitado y que el dominio actual está autorizado.
El modo inline queda vacío
Crea el elemento target antes de ejecutar el script y verifica que el selector de data-target coincida exactamente.
PlaticaWebchat no está definido
Espera a que termine de cargar widget.js. Usa defer, el evento load del script o llama la API después de insertar el loader.
Los cambios no se reflejan
Publica la configuración y ejecuta refresh('TU_CLAVE_PUBLICA') para volver a cargarla sin recargar la página.
open() emite un error
Escucha platica:webchat:error y revisa la clave pública, la conectividad y la autorización del dominio. No expongas credenciales privadas para resolverlo.
Siguiente paso
Diseña tu experiencia de chat.
Explora visualmente las opciones y exporta una configuración para tu canal.