Snippet installieren

Die zwei Zeilen zum Einfügen und wo sie auf WordPress, Shopify, Squarespace, Wix, Webflow, Odoo, Lovable und einfachem HTML hingehören.

Das Snippet besteht aus einem script-Tag und einem div. Das div enthält Ihre Widget-ID (sie beginnt mit w_) und ist die Stelle, an der das Widget erscheint:

Ein Beispiel: Ersetzen Sie w_YOUR_WIDGET_ID durch Ihre Widget-ID aus dem Dashboard oder kopieren Sie das gesamte Snippet aus dem „Install“-Tab des Widgets.

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

Kopieren Sie das echte aus dem „Install“-Tab des Widgets, tippen Sie die ID niemals von Hand. Seine „Where do I paste this?“-Liste enthält die Kurzanleitungen für jeden Website-Builder. Das Skript wird einmal pro Seite geladen; fügen Sie ein div pro Widget hinzu. Der eigene Code Ihrer Website ruft niemals die TileSet-API auf und speichert niemals einen Schlüssel.

Ältere Snippets mit data-sbe-widget anstelle von data-tileset funktionieren weiterhin: es gibt nichts zu ändern.

Wohin es gehört

Prüfen Sie, ob es funktioniert

1. Live-Seite öffnen, nicht eine Editor-Vorschau, da die meisten Editoren keine Skripte ausführen. Ein Widget wird geladen, wenn es etwa 600 Pixel vom Bildschirm entfernt ist. Ein weit unten auf einer langen Seite oder in einem versteckten Tab platziertes Widget sendet keine Anfrage, bis ein Besucher fast da ist (Browser ohne diese Funktion laden es sofort). Seine Aufrufe werden gezählt, wenn es geladen wird. Ein Widget, zu dem niemand scrollt, wird nicht gezählt. Sobald es geladen ist, behalten seine Kacheln ihre Form, während die Bilder eintreffen. Ein weiter unten platziertes Widget wird geladen, bevor es in den Ansichtsbereich gescrollt wird, sodass sich die Seite nicht unter dem Besucher verschiebt. Für eines am oberen Rand einer Seite, das einen Moment nach der Seite erscheinen kann, hält ein min-height auf seinem div seinen Platz.
2. Lassen Sie TileSet für Sie suchen. Der „Install“-Tab des Widgets hat ein „Check my page“-Feld. Fügen Sie die Adresse der Seite ein und drücken Sie „Check“ (Prüfen): TileSet liest die Seite so, wie es ein Besucher tun würde. Die gleiche Prüfung erscheint auch unter dem Snippet, wenn Sie es zum ersten Mal einrichten, und der „Widgets“-Bildschirm verlinkt darauf für ein Widget, das noch nicht auf einer Seite geladen wurde. Eine bestandene Prüfung kennzeichnet das Widget „Installed“ (Installiert) auf dem „Widgets“-Bildschirm mit der Seite, auf der es bestanden hat, bis eine Besucherseitenlast es „Live“. Auf Wix befindet sich das Snippet in einer Box, die unser Server nicht lesen kann: Öffnen Sie die veröffentlichte Seite einmal, überprüfen Sie sie dann, und die Prüfung wird auf dem eigenen Bericht des Widgets von dieser Seite bestanden (Wix-Anleitung). Die Seite muss ohne Anmeldung erreichbar sein. Die von Ihnen geprüfte Adresse wird für dieses Widget in diesem Browser gespeichert, und Sie können bis zu 30 Prüfungen pro Stunde durchführen. Wenn Ihr KI-Agent es installiert hat, kann er die gleiche Prüfung für die Seiten-URL durchführen.
3. Ergebnis lesen. Es wird angezeigt, ob das Skript vorhanden ist, ob der div dieses Widgets vorhanden ist und ob das Widget Elemente bereitstellt. Wenn das Skript oder der div fehlt, kopiert eine „Copy the missing line“-Schaltfläche genau die hinzuzufügende Zeile (bei zwei fehlenden Elementen eine Schaltfläche für das Skript und eine für das Widget), sodass Sie sie so einfügen, wie sie ist.

Was eine Prüfung Ihnen sagen kann

Zu jedem Problem gibt es eine Lösung:

• Ein Platzhalter oder eine erfundene ID. Das div enthält YOUR_WIDGET_ID oder eine ID, die zu keinem Ihrer Widgets gehört. Kopieren Sie das Snippet aus dem Tab „Install“ (Installieren) des Widgets.
• Das Skript fehlt. Fügen Sie das Skript-Tag einmal auf der Seite ein. Wenn das div vorhanden ist, das Skript aber nicht, entfernt Ihr Page Builder wahrscheinlich Skript-Tags aus Inhaltsblöcken: Setzen Sie das Skript in den Header- oder Footer-Codebereich der Website und lassen Sie das div dort, wo der Feed erscheinen soll.
• Die ID gehört zu einem anderen Widget. Die Seite enthält ein Widget-div, aber nicht das dieses Widgets. Ersetzen Sie seine ID.
• Eine Anmeldung, eine Bot-Prüfung oder eine Firewall. Die Seite weist Besucher ohne Browser ab, sodass sie nicht gelesen werden kann. Prüfen Sie die Seite in einem privaten Fenster oder prüfen Sie eine öffentliche Seite der Website.
• Eine lokale oder private Adresse. „Check my page“ (Meine Seite prüfen) liest nur öffentliche Seiten über den Standardport: nicht localhost, eine IP-Adresse, einen Namen wie nas.local oder intranet.corp oder eine Adresse mit einem Port wie :8080. Veröffentlichen Sie die Seite und überprüfen Sie ihre öffentliche Adresse.
• Eine alte, zwischengespeicherte Seite. Wenn Sie das Snippet gerade hinzugefügt haben, leeren Sie den Seiten-Cache (ein Caching-Plugin, Ihr Hoster oder ein CDN) und prüfen Sie erneut.
• Eine im Browser aufgebaute Seite. Lovable-, React-, Next- und Vite-Seiten fügen das Widget erst nach dem Laden ein, daher kann unser Server es nicht im HTML der Seite lesen. Wenn das Widget in der vergangenen Woche auf dieser Website geladen wurde, ist die Prüfung bestanden und nennt den Zeitpunkt. Wenn nicht, werden Sie gebeten, die Seite einmal im Browser zu öffnen und erneut zu prüfen: Erst dieser Aufruf zeigt uns, dass das Widget vorhanden ist.

Wenn nichts angezeigt wird

• Das div braucht eine echte Widget-ID aus Ihrem Dashboard. Ein Platzhalter zeigt nichts an.
• Ein gelöschtes Widget rendert absichtlich nichts. Es zeigt Ihren Besuchern niemals eine Fehlermeldung an.
• Optimierungs-Plugins, die Skripte kombinieren oder verzögern, können das Laden des Widgets verhindern, da das Skript seine eigene Adresse aus seiner URL ermittelt. Schließen Sie tileset.js davon aus (embed.js bei einem älteren Snippet).
• Wenn Ihre Website eine Content-Security-Policy festlegt, muss sie https://app.tileset.com für Skripte, Verbindungen und Bilder zulassen, Inline-Stile zulassen und Bilder von den Plattformen zulassen, die Sie anzeigen. Für YouTube in der Lightbox muss sie auch Frames von www.youtube-nocookie.com zulassen, für Twitch in der Lightbox von player.twitch.tv und clips.twitch.tv, und für Kick in der Lightbox von player.kick.com.
• Kostenlose Widgets zeigen darunter einen kleinen Link „Angezeigt mit TileSet“. Siehe Pläne und Credits.

Wie TileSet tileset.js sicher hält

Das Skript läuft auf Ihren Seiten. Hier ist also, was es schützt und was Sie selbst überprüfen können.

• Es kommt von TileSet selbst. tileset.js und die Teile, die es später lädt (die Lightbox, das „Bento“-Layout, die Lightbox-Stile) werden von https://app.tileset.com bereitgestellt, demselben Ort wie Ihr Dashboard. Es gibt kein Drittanbieter-CDN dazwischen und keinen Drittanbieter-Code darin.
• Eine Version in der Adresse. /v1/ ist ein Versprechen: Updates innerhalb von Version 1 machen ein eingefügtes Snippet nie unbrauchbar. Eine Änderung, die das täte, bekommt eine neue Adresse (/v2/) und kann daher nie von selbst auf Ihre Seite gelangen. Ältere Snippets, die embed.js (https://app.tileset.com/embed.js oder https://app.tileset.com/v1/embed.js) laden, erhalten exakt die gleiche Datei und funktionieren weiterhin: Es gibt nichts zu ändern.
• Veröffentlichte Hashes. Der SHA-384-Hash jeder Datei ist öffentlich unter https://app.tileset.com/v1/tileset-manifest.json verfügbar, zusammen mit einem Befehl, um zu überprüfen, was Ihr Browser oder Server empfängt. Jeden Tag überprüft TileSet, ob die Dateien, die er bereitstellt, noch mit den Hashes der bereitgestellten Version übereinstimmen. Eine Abweichung wird als Sicherheitsvorfall behandelt.
• Vor der Auslieferung geprüft. Eine Version wird nur aus dem Hauptzweig ausgeliefert, nach der vollständigen Testsuite, einer Sicherheitsprüfung und einer bestandenen Größenprüfung.
• Ihre Content Security Policy muss nur https://app.tileset.com zulassen: script-src https://app.tileset.com, plus connect-src https://app.tileset.com und img-src für https://app.tileset.com und die Plattformen, die Sie anzeigen (siehe Wenn nichts angezeigt wird).

Warum kein integrity-Attribut am Snippet? Ein Integritäts-Hash fixiert exakte Bytes. Bei unserem nächsten Update würde jedes eingefügte Snippet nicht mehr laden, und bis Sie ein neues einfügen, würde Ihre Seite alle Korrekturen, einschließlich Sicherheitskorrekturen, verpassen. Deshalb bieten Live-Dienste wie Stripe.js auch keinen auf ihrem Loader an. Die veröffentlichten Hashes und die tägliche Prüfung ermöglichen es Ihrem Sicherheitsteam, zu überprüfen, was läuft, ohne Ihre Website bei einer alten Version einzufrieren.