Ir al contenido

Construir

Obtener el snippet e insertarlo en tu web

Ver como Markdown

El snippet se copia desde la propia plataforma, en Canales → Widget Web. Cada agencia tiene su propio snippet, con un identificador único ya incluido — no hace falta escribir ni editar nada, solo copiar y pegar el bloque completo.

El bloque tiene esta forma (los valores de data-widget y data-token vienen ya rellenos, identificando a tu agencia y a esta instancia concreta de Widget Web):

<script>
(function(w,d,t){
w.Widget=w.Widget||function(){(w.Widget.q=w.Widget.q||[]).push(arguments)};
var s=d.createElement(t);s.async=1;
s.src='https://widget.example.com/v1/embed.js';
s.setAttribute('data-widget','xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
s.setAttribute('data-locale','es');
s.setAttribute('data-token','xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
d.head.appendChild(s);
})(window,document,'script');
</script>

Nota — El dominio del script (s.src) no cambia con la marca de tu proveedor

A diferencia del resto de la interfaz, el pequeño script que carga el widget se sirve siempre desde la infraestructura del proveedor de la plataforma, tal cual aparece en el snippet que copias — no se personaliza por marca blanca en esta versión del producto. Puedes ver ese dominio en el código fuente de tu web si inspeccionas la etiqueta <script>; no afecta a lo que ve tu visitante, que en ningún momento llega a esa dirección con el navegador.

  • data-widget identifica a tu agencia. No lo compartas entre webs de clientes distintos ni lo copies a mano: usa siempre el botón «Copiar» para no cortar el valor por error.
  • data-locale fija el idioma de la interfaz del chat. El snippet que copias siempre trae ya escrito el idioma por defecto que hayas elegido para esa instancia en Canales → (tu Widget Web) → Idioma por defecto del widget (Manual del administrador, capítulo «Canales») — no hace falta que lo edites a mano en el caso normal.
  • data-token identifica esta instancia concreta de Widget Web. Solo importa si tienes más de un canal de tipo Widget Web en tu cuenta (por ejemplo, una web distinta por marca o por idioma): cada instancia tiene su propio snippet con su propio data-token, así que copia siempre el snippet de la instancia correcta desde su propia tarjeta en Canales — no mezcles el data-token de una instancia con el data-widget de otra.

Nota — Idiomas soportados y qué pasa si pides otro

Los valores soportados son es (español), en (inglés) e it (italiano). Si data-locale llega con cualquier otro valor, está vacío, o no llega, el widget se muestra en inglés — nunca falla ni deja de cargar por un idioma no reconocido.

Aviso — Forzar un idioma distinto en una página concreta

Si tu web es multiidioma (por ejemplo, tienes una versión en inglés en /en/), puedes anular el idioma por defecto solo en esa página: edita a mano el valor de s.setAttribute('data-locale', …) del snippet pegado en esa página concreta, sin tocar el resto de valores. El resto de tu web sigue usando el idioma por defecto configurado en Canales.

Nota — Atributo opcional: data-api

Solo aplica si tu instalación usa un backend propio distinto del compartido de la plataforma. Se añade así: s.setAttribute('data-api','https://api.tudominio.es/api/v1');. En el caso normal no necesitas tocar este atributo — el widget usa el backend de la plataforma por defecto.

Dónde pegarlo: antes de </head> o de </body>

Sección titulada «Dónde pegarlo: antes de </head> o de </body>»

El snippet es HTML estándar y funciona igual en ambos sitios: justo antes del cierre de </head>, o justo antes del cierre de </body>. Como el script se carga de forma asíncrona, la posición exacta no afecta a la velocidad de tu web. Usa el hueco que tu plantilla o plataforma te ofrezca; muchos gestores de contenido solo dejan tocar uno de los dos.

Debe aparecer una única vez, en una plantilla o layout compartido por todas las páginas (footer o cabecera global) — no lo pegues página a página.

Aviso — Ruta rápida (3 pasos)

  1. Copia el snippet desde Canales → Widget Web. 2) Pégalo antes de </head> o </body> en la plantilla global de tu web. Con eso el widget ya funciona. 3) Opcional (recomendado): restringe en qué webs puede cargar añadiendo tu dominio en Ajustes → Personalización widget → Dominios permitidos (capítulo 4).

Bloque «Pega este snippet en tu web» con el código completo del script, incluyendo el dominio de embebido del widget y el data-token de tu instancia, y el botón Copiar arriba
Bloque «Pega este snippet en tu web» con el código completo del script, incluyendo el dominio de embebido del widget y el data-token de tu instancia, y el botón Copiar arriba