Insertar el widget

Actualizado el 4 nov 20265 min de lectura

Español

En esta página

Insertar el widget de chat es solo un fragmento de código en tu sitio. Pégalo antes de la etiqueta de cierre </body> (o usa Google Tag Manager) y el widget ya está activo. No necesitas compilar nada ni instalar un paquete NPM. Funciona en cualquier CMS: WordPress, Webflow, Shopify, Wix, HTML simple o cualquier sistema que te deje agregar una etiqueta script.

Agregar el widget de chat de Deskwoot a tu sitio web solo requiere un fragmento corto de código. El widget se carga de forma asíncrona y no afecta la velocidad de carga de tu página.

Código de inserción de JavaScript

Después de crear una bandeja de entrada de chat en vivo, Deskwoot genera un fragmento de JavaScript. Cópialo desde Configuración > Bandejas de entrada > tu bandeja de entrada > pestaña Widget > Instalación del widget. El fragmento es un script corto dentro de la página: define window.deskwootSettings = { widgetToken: "YOUR_WIDGET_TOKEN" } y luego carga https://deskwoot.com/widget/deskwoot-loader.js de forma asíncrona. Pega este código antes de la etiqueta de cierre </body> en cada página donde quieras que aparezca el widget.

El valor widgetToken del código de inserción es el identificador único de tu widget. Conecta el widget con tu bandeja de entrada. Lo encuentras en la configuración de tu bandeja de entrada. Déjalo en el código de tu frontend: puedes mostrarlo públicamente sin riesgo, porque solo permite que los visitantes inicien conversaciones.

React y Next.js

En aplicaciones React, agrega la etiqueta script a tu index.html o usa un hook useEffect para cargarla de forma dinámica. En Next.js, usa el componente Script de next/script con strategy='afterInteractive' para que cargue de la mejor manera. Colócalo en tu layout.tsx o _app.tsx para cargar el widget en todas las páginas.

WordPress

En WordPress, ve a Apariencia > Editor de temas y abre el archivo footer.php. Pega el script del widget antes de la etiqueta de cierre </body>. También puedes usar un plugin como “Insert Headers and Footers” para agregar el código sin editar los archivos del tema. Si usas un constructor de páginas como Elementor, agrega un widget HTML con el código del script.

Aplicaciones de una sola página

El widget de Deskwoot funciona con todos los frameworks de SPA, como React, Vue, Angular y Svelte. Carga el script una sola vez en la estructura base de tu app y se mantiene al cambiar de ruta. Usa el objeto global window.deskwootSettings para opciones como una identidad de usuario firmada, y window.deskwoot para abrir, cerrar o mostrar y ocultar el widget desde tu código.

Preguntas frecuentes

¿Dónde encuentro mi fragmento de inserción?

Configuración → Bandejas de entrada → tu bandeja de entrada de chat en vivo → pestaña Widget → Instalación del widget. El fragmento ya trae tu token del widget; solo cópialo y pégalo.

¿En qué parte de la página va el fragmento?

En cualquier lugar antes de </body>. El widget se carga de forma asíncrona, así que su posición no retrasa la primera visualización de tu página. Muchos sitios usan Google Tag Manager y no tocan el HTML directamente.

¿Cómo lo instalo en WordPress?

Usa un plugin para agregar código en el encabezado y el pie de página (por ejemplo, WPCode), pega el fragmento en el espacio “Body” o “Footer” y guarda. ¿No tienes plugin? Edita el footer.php de tu tema y pega el fragmento antes de </body>.

¿Cómo lo instalo en Shopify?

Tienda online → Temas → Editar código → theme.liquid → pégalo antes de </body>. El widget aparece automáticamente en cada página de tu tienda.

¿Cómo lo instalo en Webflow?

Project Settings → Custom Code → Footer Code → pega el fragmento. Publica para aplicar los cambios.

¿Puedo instalarlo con Google Tag Manager?

Sí, y es lo recomendado para equipos de marketing. Crea una etiqueta de HTML personalizado con el fragmento, haz que se active en todas las páginas y publica. No necesitas ayuda de desarrolladores.

¿El widget choca con otros scripts de chat?

Por lo general, no. El widget funciona dentro de sus propios iframes, así que sus estilos no se mezclan con el CSS de tu sitio, y usa un z-index alto (alrededor de 2 mil millones) para quedar por encima de los elementos de tu sitio. Si ves que se superpone con otro script que usa un z-index parecido, la solución más limpia es quitar el otro script de chat: no necesitas dos.

¿Puedo instalar el widget en varios dominios?

Sí, el mismo fragmento funciona en todos los dominios que quieras. Si quieres colores o mensajes de bienvenida distintos para cada marca, crea bandejas de entrada separadas y usa en cada sitio el fragmento que le corresponde.

¿Cómo le indico al widget qué usuario inició sesión?

Usa la verificación de identidad: agrega un objeto `user` a `window.deskwootSettings` en el fragmento (o llama a `window.deskwoot.identify(user)` después del inicio de sesión) con `identifier` (el ID del usuario en tu sistema), `identifierHash` (un HMAC SHA256 del identificador que tu servidor firma con el secreto de la bandeja de entrada, que está en la pestaña Formulario previo al chat) y, si quieres, `email` y `name`. Los visitantes verificados chatean con su nombre y correo reales y no tienen que llenar el formulario antes del chat. También puedes enviar `attributes`, como el plan del usuario. Para que Fynn use esos datos al responder al visitante en el chat en vivo, fírmalos en tu servidor con `attributesHash`; los atributos sin firma solo los ve tu equipo. El formato está en la documentación para desarrolladores del widget.

¿El widget funciona con aplicaciones de una sola página (React, Vue, Next.js)?

Sí. Inserta el script de carga una sola vez en el layout raíz. Los cambios de ruta no reinician el widget: el estado de la conversación se mantiene al navegar dentro de la SPA.

¿Puedo ver una vista previa del widget sin publicar el fragmento?

Sí. En una pantalla ancha, la pestaña Widget de tu bandeja de entrada de chat en vivo muestra una vista previa en vivo del widget junto a la configuración de apariencia. Te sirve para revisar los cambios de diseño antes de guardarlos.

¿Te resultó útil esta guía?

Preguntar a Fynn sobre esta guía

Recibe una respuesta corta basada en esta guía y el resto del centro de ayuda.