Installeer het snippet

De twee regels om te plakken, en waar ze geplaatst moeten worden op WordPress, Shopify, Squarespace, Wix, Webflow, Odoo, Lovable en gewone HTML.

Het snippet is één script tag en één div. De div bevat je widget-ID (het begint met w_) en is waar de widget verschijnt:

Een voorbeeld: vervang w_YOUR_WIDGET_ID door je widget-ID uit het dashboard, of kopieer het hele snippet van het “Install” (Installeren) tabblad van de widget.

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

Kopieer de echte van het “Install” tabblad van de widget, typ het ID nooit met de hand. De “Where do I paste this?” (Waar plak ik dit?) lijst bevat de korte stappen voor elke site builder hieronder. Het script wordt één keer per pagina geladen; voeg één div toe per widget. Je eigen code van de site roept nooit de TileSet API aan en bevat nooit een sleutel.

Oudere snippets met data-sbe-widget in plaats van data-tileset blijven werken: er hoeft niets veranderd te worden.

Waar het geplaatst moet worden

Controleer of het werkt

1. Open de live pagina, niet een editor-voorbeeld, aangezien de meeste editors geen scripts uitvoeren. Een widget wordt geladen wanneer deze zich binnen ongeveer 600 pixels van het scherm bevindt, dus een widget die ver naar beneden op een lange pagina staat, of in een verborgen tabblad, doet geen verzoek totdat een bezoeker er bijna is (browsers zonder die functie laden deze onmiddellijk). De weergaven worden geteld wanneer deze wordt geladen, dus een widget waar niemand naar scrollt, wordt niet geteld. Zodra deze is geladen, behouden de tegels hun vorm terwijl de afbeeldingen binnenkomen. Een widget verder naar beneden wordt geladen voordat deze in beeld komt, dus de pagina beweegt niet onder de bezoeker. Voor een widget bovenaan een pagina, die een moment na de pagina kan worden getekend, houdt een min-height op de div de plaats ervan vast.
2. Laat TileSet voor jou zoeken. Het tabblad “Install” van de widget heeft een “Check my page” (Mijn pagina controleren) veld. Plak het adres van de pagina en druk op “Check” (Controleren): TileSet leest de pagina zoals een bezoeker dat zou doen. Dezelfde controle verschijnt onder het fragment wanneer je voor het eerst instelt, en het scherm “Widgets” linkt ernaar voor een widget die nog niet op een pagina is geladen. Een geslaagde controle markeert de widget als “Installed” (Geïnstalleerd) op het scherm “Widgets”, met de site waarop deze is geslaagd, totdat de paginalading van een bezoeker deze “Live” toont. Op Wix staat het fragment in een vak dat onze server niet kan lezen: open de gepubliceerde pagina eenmaal, controleer dan, en de controle slaagt op het eigen rapport van de widget van die pagina (Wix-handleiding). De pagina moet toegankelijk zijn zonder aanmelding. Het gecontroleerde adres wordt onthouden voor die widget in deze browser, en je kunt tot 30 controles per uur uitvoeren. Als je AI-agent deze heeft geïnstalleerd, kan deze dezelfde controle uitvoeren op de paginanaam.
3. Lees het resultaat. Het geeft aan of het script aanwezig is, of de div van deze widget aanwezig is en of de widget items serveert. Wanneer het script of de div ontbreekt, kopieert een knop “Copy the missing line” (Ontbrekende regel kopiëren) precies de regel die moet worden toegevoegd (met twee ontbrekende, één knop voor het script en één voor de widget), zodat je deze zo plakt als deze is.

Wat een controle jou kan vertellen

Elk probleem wordt geleverd met een oplossing:

• Een placeholder of verzonnen id. De div heeft YOUR_WIDGET_ID of een id die geen widget van jou is. Kopieer het fragment uit het tabblad “Install” van de widget.
• Het script ontbreekt. Voeg de scripttag eenmaal toe op de pagina. Als de div aanwezig is maar het script niet, verwijdert je paginabuilder waarschijnlijk scripttags uit een contentblok: plaats het script in het header- of footer-codegebied van de site en houd de div waar de feed moet worden weergegeven.
• De id behoort toe aan een andere widget. De pagina heeft een widget div, maar niet die van deze widget. Vervang de id ervan.
• Een login, een botcontrole of een firewall. De pagina weigert bezoekers zonder browser, dus deze kan niet worden gelezen. Controleer de pagina in een privévenster, of controleer een openbare pagina van de site.
• Een lokaal of privéadres. “Check my page” leest alleen openbare pagina's op de standaardpoort: niet localhost, een IP-adres, een naam zoals nas.local of intranet.corp, of een adres met een poort zoals :8080. Publiceer de pagina en controleer het openbare adres.
• Een oude, gecachte pagina. Als je de snippet net hebt toegevoegd, wis dan de paginacache (een caching-plugin, je host of een CDN) en controleer opnieuw.
• Een pagina die in de browser is gebouwd. Lovable, React, Next en Vite-pagina's voegen de widget toe nadat ze zijn geladen, dus onze server kan deze niet lezen in de HTML van de pagina. Als de widget de afgelopen week op die site is geladen, slaagt de controle en wordt aangegeven wanneer deze is gezien. Zo niet, dan wordt je gevraagd de pagina eenmaal in je browser te openen en opnieuw te controleren: die laadactie is wat ons vertelt dat de widget er is.

Als er niets wordt weergegeven

• De div heeft een echte widget-id nodig van je dashboard. Een placeholder rendert niets.
• Een verwijderde widget rendert opzettelijk niets. Het toont nooit een foutmelding aan je bezoekers.
• Optimalisatieplugins die scripts combineren of vertragen, kunnen het laden van de widget stoppen, omdat het script zijn eigen adres uit de URL haalt. Sluit tileset.js hiervan uit (embed.js op een oudere snippet).
• Als je site een content security policy instelt, moet deze https://app.tileset.com toestaan voor scripts, verbindingen en afbeeldingen, inline-stijlen toestaan en afbeeldingen van de platforms die je toont toestaan. Voor YouTube in de lightbox moet het ook frames toestaan van www.youtube-nocookie.com, voor Twitch in de lightbox van player.twitch.tv en clips.twitch.tv, en voor Kick in de lightbox van player.kick.com.
• Gratis widgets tonen een kleine link "Getoond met TileSet" eronder. Zie Prijzen en credits.

Hoe TileSet tileset.js veilig houdt

Het script draait op je pagina's, dus hier is wat het beschermt en wat je zelf kunt controleren.

• Het komt van TileSet zelf. tileset.js en de onderdelen die het later laadt (de lightbox, de “Bento” layout, de lightbox-stijlen) worden geserveerd vanaf https://app.tileset.com, dezelfde plek als je dashboard. Er zit geen externe CDN tussen en geen externe code in.
• Een versie in het adres. /v1/ is een belofte: updates binnen versie 1 breken nooit een snippet die je hebt geplakt. Een wijziging die dat wel zou doen, heeft een nieuw adres nodig (/v2/), dus het kan nooit op eigen kracht je pagina bereiken. Oudere snippets die embed.js laden (https://app.tileset.com/embed.js of https://app.tileset.com/v1/embed.js) krijgen precies hetzelfde bestand en blijven werken: er hoeft niets te worden gewijzigd.
• Gepubliceerde hashes. De SHA-384 hash van elk bestand is publiek op https://app.tileset.com/v1/tileset-manifest.json, met een commando om te controleren wat je browser of server ontvangt. Elke dag controleert TileSet of de bestanden die het serveert nog steeds overeenkomen met de hashes van de versie die het heeft geïmplementeerd, en een mismatch wordt behandeld als een incident.
• Gecontroleerd voor verzending. Een release wordt alleen verzonden vanaf de hoofdbranch, na de volledige testsuite, een beveiligingsreview en een limiet op de bestandsgrootte.
• Je content security policy hoeft alleen https://app.tileset.com toe te staan: script-src https://app.tileset.com, plus connect-src https://app.tileset.com en img-src voor https://app.tileset.com en de platforms die je toont (zie Niets wordt getoond).

Waarom geen integrity attribuut op de snippet? Een integriteits-hash pin't exacte bytes. Bij onze volgende update zou elke geplakte snippet stoppen met laden, en totdat je een nieuwe plakte, zou je pagina elke fix missen, inclusief beveiligingsfixes. Daarom bieden live services zoals Stripe.js er ook geen op hun loader. De gepubliceerde hashes en de dagelijkse controle laten je beveiligingsteam verifiëren wat er draait, zonder je site te bevriezen op een oude versie.