Instala el fragmento de código

Las dos líneas para pegar, y dónde van en WordPress, Shopify, Squarespace, Wix, Webflow, Odoo, Lovable y HTML plano.

El fragmento es una etiqueta script y una div. El div lleva tu ID de widget (empieza por w_) y es donde aparece el widget:

Un ejemplo: reemplaza w_YOUR_WIDGET_ID con el id de tu widget del panel, o copia todo el fragmento de la pestaña “Install” (Instalar) del widget.

<script src="https://app.tileset.com/v1/tileset.js" async></script>
<div data-tileset="w_YOUR_WIDGET_ID"></div>

Copia el real de la pestaña “Install” del widget, nunca escribas el id a mano. Su lista “Where do I paste this?” (¿Dónde pego esto?) tiene los pasos cortos para cada creador de sitios a continuación. El script se carga una vez por página; agrega un div por widget. El propio código de tu sitio nunca llama a la API TileSet y nunca contiene una clave.

Los fragmentos antiguos con data-sbe-widget en lugar de data-tileset siguen funcionando: no hay nada que cambiar.

Dónde va

Comprueba que funciona

1. Abra la página en vivo, no una vista previa del editor, ya que la mayoría de los editores no ejecutan scripts. Un widget se carga cuando se acerca a unos 600 px de la pantalla, por lo que uno que esté al final de una página larga, o en una pestaña oculta, no hace ninguna solicitud hasta que un visitante está casi allí (los navegadores sin esa función lo cargan de inmediato). Sus vistas se cuentan cuando se carga, por lo que un widget al que nadie se desplaza no se cuenta. Una vez que se carga, sus mosaicos mantienen su forma mientras llegan las imágenes. Un widget más abajo se carga antes de que aparezca en la vista, por lo que la página no se mueve debajo del visitante. Para uno cerca de la parte superior de una página, que puede aparecer un momento después de la página, un min-height en su div mantiene su lugar.
2. Deja que TileSet te busque. La pestaña “Install” del widget tiene un campo “Check my page” (Comprobar mi página). Pega la dirección de la página y pulsa “Check” (Comprobar): TileSet lee la página como lo haría un visitante. La misma comprobación aparece debajo del fragmento cuando lo configuras por primera vez, y la pantalla “Widgets” enlaza con ella para un widget que aún no se ha cargado en una página. Una comprobación superada marca el widget como “Installed” (Instalado) en la pantalla “Widgets”, con el sitio en el que superó la prueba, hasta que la carga de la página de un visitante lo muestre “Live” (En vivo). En Wix, el fragmento se encuentra en un cuadro que nuestro servidor no puede leer: abre la página publicada una vez, luego comprueba, y la comprobación se supera en el propio informe del widget de esa página (guía de Wix). La página debe ser accesible sin iniciar sesión. La dirección que comprobaste se recuerda para ese widget en este navegador, y puedes realizar hasta 30 comprobaciones por hora. Si tu agente de IA lo instaló, puede realizar la misma comprobación en la URL de la página.
3. Lee el resultado. Indica si el script está allí, si el div de este widget está allí y si el widget sirve elementos. Cuando falta el script o el div, un botón “Copy the missing line” (Copia la línea faltante) copia exactamente la línea a agregar (con dos faltantes, un botón para el script y uno para el widget), así que la pegas tal cual.

Lo que una comprobación puede decirte

Cada problema viene con una solución:

• Un marcador de posición o un id inventado. El div tiene YOUR_WIDGET_ID o un id que no es un widget tuyo. Copia el fragmento de la pestaña “Install” del widget.
• El script no está presente. Agrega la etiqueta del script una vez en la página. Si el div está ahí pero el script no, es probable que tu creador de páginas elimine las etiquetas de script de un bloque de contenido: pon el script en el área de código del encabezado o pie de página del sitio y deja el div donde debería aparecer el feed.
• El id pertenece a otro widget. La página tiene un widget div, pero no el de este widget. Reemplaza su id.
• Un inicio de sesión, una verificación de bot o un firewall. La página rechaza a los visitantes sin navegador, por lo que no se puede leer. Comprueba la página en una ventana privada o comprueba una página pública del sitio.
• Una dirección local o privada. “Check my page” lee solo páginas públicas en el puerto estándar: no localhost, una dirección IP, un nombre como nas.local o intranet.corp, o una dirección con un puerto como :8080. Publica la página y comprueba su dirección pública.
• Una página antigua y en caché. Si acabas de agregar el fragmento, borra la caché de la página (un plugin de caché, tu host o una CDN) y vuelve a comprobar.
• Una página creada en el navegador. Las páginas de Lovable, React, Next y Vite agregan el widget después de cargarse, por lo que nuestro servidor no puede leerlo en el HTML de la página. Si el widget se ha cargado en ese sitio en la última semana, la comprobación pasa y dice cuándo se vio. Si no, te pide que abras la página una vez en tu navegador y compruebes de nuevo: esa carga es lo que nos dice que el widget está ahí.

Si no aparece nada

• El div necesita un id de widget real de tu panel. Un marcador de posición no muestra nada.
• Un widget eliminado no muestra nada, a propósito. Nunca muestra un cuadro de error a tus visitantes.
• Los plugins de optimización que combinan o retrasan scripts pueden impedir la carga del widget, porque el script encuentra su propia dirección desde su URL. Excluye tileset.js de ellos (embed.js en un fragmento más antiguo).
• Si su sitio establece una política de seguridad de contenido, debe permitir https://app.tileset.com para scripts, conexiones e imágenes, permitir estilos en línea y permitir imágenes de las plataformas que muestra. Para YouTube en la lightbox, también debe permitir marcos de www.youtube-nocookie.com, para Twitch en la lightbox de player.twitch.tv y clips.twitch.tv, y para Kick en la lightbox de player.kick.com.
• Los widgets gratuitos muestran un pequeño enlace “Mostrado con TileSet” debajo de ellos. Consulta Planes y créditos.

Cómo TileSet mantiene seguro tileset.js

El script se ejecuta en tus páginas, así que aquí tienes lo que lo protege y lo que puedes comprobar tú mismo.

• Proviene del propio TileSet. tileset.js y las partes que carga más tarde (la lightbox, el diseño “Bento”, los estilos de la lightbox) se sirven desde https://app.tileset.com, el mismo lugar que su panel. No hay una CDN de terceros intermedia ni código de terceros dentro de él.
• Una versión en la dirección. /v1/ es una promesa: las actualizaciones dentro de la versión 1 nunca rompen un fragmento que hayas pegado. Un cambio que lo rompería necesita una nueva dirección (/v2/), así que nunca puede llegar a tu página por sí solo. Los fragmentos más antiguos que cargan embed.js (https://app.tileset.com/embed.js o https://app.tileset.com/v1/embed.js) obtienen exactamente el mismo archivo y siguen funcionando: no hay nada que cambiar.
• Hashes publicados. El hash SHA-384 de cada archivo es público en https://app.tileset.com/v1/tileset-manifest.json, con un comando para verificar lo que reciben tu navegador o servidor. Cada día TileSet comprueba que los archivos que sirve todavía coinciden con los hashes de la versión que desplegó, y una discrepancia se trata como un incidente.
• Comprobado antes de publicarse. Una versión solo se publica desde la rama principal, después de superar el conjunto completo de pruebas, una revisión de seguridad y un límite de tamaño.
• Tu política de seguridad de contenido solo necesita permitir https://app.tileset.com: script-src https://app.tileset.com, más connect-src https://app.tileset.com y img-src para https://app.tileset.com y las plataformas que muestres (ver Si nada se muestra).

¿Por qué no hay atributo integrity en el fragmento? Un hash de integridad fija bytes exactos. En nuestra próxima actualización, cada fragmento pegado dejaría de cargarse, y hasta que pegaras uno nuevo, tu página se perdería cada corrección, incluidas las de seguridad. Es por eso que los servicios en vivo como Stripe.js tampoco ofrecen uno en su cargador. Los hashes publicados y la comprobación diaria permiten a tu equipo de seguridad verificar lo que se ejecuta, sin congelar tu sitio en una versión antigua.