Installer le snippet

Les deux lignes à coller, et où les placer sur WordPress, Shopify, Squarespace, Wix, Webflow, Odoo, Lovable et HTML simple.

Le snippet est une balise script et une balise div. La balise div contient votre ID de widget (il commence par w_) et c'est là que le widget apparaît :

Un exemple : remplacez w_YOUR_WIDGET_ID par votre ID de widget depuis le tableau de bord, ou copiez l'intégralité du snippet depuis l'onglet « Install » (Installer) du widget.

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

Copiez le vrai depuis l'onglet « Install » du widget, ne tapez jamais l'ID à la main. Sa liste « Where do I paste this? » (Où dois-je coller ceci ?) contient les étapes courtes pour chaque constructeur de site ci-dessous. Le script est chargé une fois par page ; ajoutez une balise div par widget. Le propre code de votre site n'appelle jamais l'API TileSet et ne détient jamais de clé.

Les anciens snippets avec data-sbe-widget à la place de data-tileset continuent de fonctionner : il n'y a rien à changer.

Où le placer

Vérifiez que ça fonctionne

1. Ouvrez la page en direct, pas un aperçu de l'éditeur, car la plupart des éditeurs n'exécutent pas de scripts. Un widget se charge lorsqu'il s'approche à environ 600 pixels de l'écran, donc un widget situé loin en bas d'une longue page, ou dans un onglet caché, ne fait aucune requête jusqu'à ce qu'un visiteur soit presque arrivé (les navigateurs sans cette fonctionnalité le chargent immédiatement). Ses vues sont comptées lorsqu'il se charge, donc un widget vers lequel personne ne fait défiler n'est pas compté. Une fois qu'il se charge, ses vignettes conservent leur forme pendant que les images arrivent. Un widget situé plus bas se charge avant d'entrer dans la vue, donc la page ne bouge pas sous le visiteur. Pour un widget près du haut d'une page, qui peut s'afficher un instant après la page, un min-height sur son div réserve sa place.
2. Laissez TileSet chercher pour vous. L'onglet « Install » du widget contient un champ « Check my page » (Vérifier ma page). Collez l'adresse de la page et appuyez sur « Check » (Vérifier) : TileSet lit la page comme le ferait un visiteur. La même vérification apparaît sous l'extrait lorsque vous configurez pour la première fois, et l'écran « Widgets » y renvoie pour un widget qui ne s'est pas encore chargé sur une page. Une vérification réussie marque le widget comme « Installed » (Installé) sur l'écran « Widgets », avec le site sur lequel il a réussi, jusqu'à ce que le chargement de la page d'un visiteur le montre « Live » (En direct). Sur Wix, l'extrait se trouve dans une boîte que notre serveur ne peut pas lire : ouvrez la page publiée une fois, puis vérifiez, et la vérification réussit grâce au rapport du widget sur cette page (Guide Wix). La page doit être accessible sans connexion. L'adresse que vous avez vérifiée est mémorisée pour ce widget dans ce navigateur, et vous pouvez effectuer jusqu'à 30 vérifications par heure. Si votre agent IA l'a installé, il peut effectuer la même vérification sur l'URL de la page.
3. Lisez le résultat. Il indique si le script est présent, si le div de ce widget est présent et si le widget sert des éléments. Lorsque le script ou le div est manquant, un bouton « Copy the missing line » (Copier la ligne manquante) copie exactement la ligne à ajouter (avec deux manquants, un bouton pour le script et un pour le widget), vous la collez donc telle quelle.

Ce qu'une vérification peut vous dire

Chaque problème est accompagné d'une solution :

• Un espace réservé ou un id inventé. Le div contient un YOUR_WIDGET_ID ou un id qui n'est pas un de vos widgets. Copiez l'extrait de l'onglet « Install » du widget.
• Le script est manquant. Ajoutez la balise de script une fois sur la page. Si le div est présent mais pas le script, votre constructeur de page supprime probablement les balises de script d'un bloc de contenu : placez le script dans la zone de code d'en-tête ou de pied de page du site et conservez le div là où le flux doit s'afficher.
• L'id appartient à un autre widget. La page contient un widget div, mais pas celui-ci. Remplacez son id.
• Une connexion, une vérification anti-robot ou un pare-feu. La page repousse les visiteurs sans navigateur, elle ne peut donc pas être lue. Vérifiez la page dans une fenêtre privée, ou vérifiez une page publique du site.
• Une adresse locale ou privée. « Check my page » ne lit que les pages publiques sur le port standard : pas localhost, une adresse IP, un nom comme nas.local ou intranet.corp, ou une adresse avec un port tel que :8080. Publiez la page et vérifiez son adresse publique.
• Une ancienne page mise en cache. Si vous venez d'ajouter le snippet, videz le cache de la page (un plugin de cache, votre hébergeur ou un CDN) et vérifiez à nouveau.
• Une page construite dans le navigateur. Lovable, React, Next et Vite ajoutent le widget après leur chargement, notre serveur ne peut donc pas le lire dans le HTML de la page. Si le widget a été chargé sur ce site au cours de la semaine écoulée, la vérification réussit et indique quand il a été vu. Sinon, il vous demande d'ouvrir la page une fois dans votre navigateur et de vérifier à nouveau : ce chargement est ce qui nous indique que le widget est là.

Si rien ne s'affiche

• Le div a besoin d'un vrai id de widget de votre tableau de bord. Un espace réservé ne rend rien.
• Un widget supprimé ne rend rien, volontairement. Il n'affiche jamais de boîte d'erreur à vos visiteurs.
• Les plugins d'optimisation qui combinent ou retardent les scripts peuvent empêcher le chargement du widget, car le script trouve sa propre adresse à partir de son URL. Excluez tileset.js de ceux-ci (embed.js sur un ancien snippet).
• Si votre site définit une politique de sécurité de contenu, il doit autoriser https://app.tileset.com pour les scripts, les connexions et les images, autoriser les styles en ligne et autoriser les images des plateformes que vous affichez. Pour YouTube dans la lightbox, il doit également autoriser les cadres de www.youtube-nocookie.com, pour Twitch dans la lightbox de player.twitch.tv et clips.twitch.tv, et pour Kick dans la lightbox de player.kick.com.
• Les widgets gratuits affichent un petit lien « Affiché avec TileSet » en dessous. Voir Plans et crédits.

Comment TileSet sécurise tileset.js

Le script s'exécute sur vos pages, voici donc ce qui le protège et ce que vous pouvez vérifier vous-même.

• Il provient de TileSet lui-même. tileset.js et les parties qu'il charge plus tard (la lightbox, la mise en page « Bento », les styles de la lightbox) sont servis depuis https://app.tileset.com, le même endroit que votre tableau de bord. Il n'y a pas de CDN tiers entre les deux et aucun code tiers à l'intérieur.
• Une version dans l'adresse. /v1/ est une promesse : les mises à jour dans la version 1 ne cassent jamais un snippet que vous avez collé. Un changement qui le ferait nécessiterait une nouvelle adresse (/v2/), il ne peut donc jamais atteindre votre page de lui-même. Les anciens snippets qui chargent embed.js (https://app.tileset.com/embed.js ou https://app.tileset.com/v1/embed.js) obtiennent exactement le même fichier et continuent de fonctionner : il n'y a rien à changer.
• Hashes publiés. Le hash SHA-384 de chaque fichier est public sur https://app.tileset.com/v1/tileset-manifest.json, avec une commande pour vérifier ce que votre navigateur ou serveur reçoit. Chaque jour, TileSet vérifie que les fichiers qu'il sert correspondent toujours aux hashes de la version qu'il a déployée, et une non-concordance est traitée comme un incident.
• Vérifié avant expédition. Une version est expédiée uniquement à partir de la branche principale, après la suite de tests complète, une revue de sécurité et le passage d'une limite de taille.
• Votre politique de sécurité de contenu n'a besoin d'autoriser que https://app.tileset.com : script-src https://app.tileset.com, plus connect-src https://app.tileset.com et img-src pour https://app.tileset.com et les plateformes que vous affichez (voir Si rien ne s'affiche).

Pourquoi pas d'attribut integrity sur l'extrait ? Un hash d'intégrité épingle des octets exacts. Lors de notre prochaine mise à jour, chaque extrait collé cesserait de se charger, et jusqu'à ce que vous colliez un nouveau, votre page manquerait toutes les corrections, y compris les corrections de sécurité. C'est pourquoi les services en direct tels que Stripe.js n'en offrent pas non plus sur leur chargeur. Les hashes publiés et la vérification quotidienne permettent à votre équipe de sécurité de vérifier ce qui s'exécute, sans figer votre site sur une ancienne version.