01 · stamp
Stempel
Die Hauptdarstellung. In der Mitte steht das Datum der letzten bestandenen Prüfung, außen läuft der Name um, darunter hängt die Domain, für die das Siegel gilt. Besteht der Shop nicht mehr, wird aus der Rosette ein leerer Kreis.
Das Siegel in Ihren Shop einbinden
Wählen Sie, wie das Siegel in Ihrem Shop aussieht, und setzen Sie es mit einer Zeile Code ein. Sieben Darstellungen, vier Wege der Einbindung. Die Vorschauen zeigen Beispieldaten mit einer erfundenen Domain. Den fertigen Code für Ihr Siegel erzeugt der Konfigurator im Händlerbereich.
Sieben Darstellungen
Jede Vorschau steht hell und dunkel auf passendem Grund. Mit dem Wert auto folgt das Siegel der Farbeinstellung des Besuchers. Ecken lassen sich rund oder eckig wählen.
02 · badge
Plakette
Kompakte Darstellung für Fußzeile, Kasse oder Seitenleiste. Größe s zeigt Zustand mit Prüfdatum und die Domain, m ergänzt die Marke, l nennt zusätzlich, seit wann und wie oft geprüft wurde.
03 · float
Eck-Siegel
Ein Knopf mit Signet und Zustand, am Fensterrand fixiert. Ein Klick öffnet eine Karte mit den Prüfdaten. Schließen geht per Escape, Klick daneben oder Schließen-Knopf, danach bleibt für die Sitzung nur das Signet stehen. Der Abstand nach oben lässt sich anheben, etwa über einem Cookie-Banner.
Die Vorschau lässt sich bedienen: Klick auf den Knopf öffnet die Karte, Escape schließt sie.
04 · bar
Leiste
Eine Zeile über die volle Breite für Kopf- oder Fußbereich mit Zustand, Domain, Hinweis, Zählwerk, Marke und Link zum Zertifikat. Auf schmalen Bildschirmen bricht sie um.
05 · card
Vertrauensbox
Für Kasse und Produktseite. Sie nennt Domain, bei geprüftem Unternehmen den Firmennamen, die Prüfdaten, bis zu fünf zuletzt bestandene Kriterien und die Links zu Zertifikat und Prüfkriterien.
06 · mark
Signet
Nur das Zeichen, für enge Stellen. Zustand und Domain stehen als Beschriftung für Screenreader bereit und erscheinen bei Hover und Tastaturfokus als Tooltip.
07 · text
Textzeile
Eine Zeile mit kleinem Signet, die Schrift und Farbe der Umgebung übernimmt. Sie passt in Fließtext, Fußnoten und Hinweise an der Kasse.
Bestellungen bei beispiel-shop.example:
Bestellungen bei beispiel-shop.example:
Vier Wege der Einbindung
In den Beispielen steht IHRE-KENNUNG für die Kennung Ihres Siegels. Der Konfigurator im Händlerbereich setzt sie ein und stellt Variante, Größe, Farbe und Sprache für Sie zusammen.
Script
Eine Zeile an der Stelle, an der das Siegel erscheinen soll, oder vor dem schließenden body-Tag für das Eck-Siegel. Ohne Attribute erscheint die verlinkte Plakette als Bild. Mit data-variant zeichnet das Script das Element.
HTML · script<script src="https://fakeshop.ai/siegel/IHRE-KENNUNG/embed.js" async data-variant="float" data-theme="auto" data-lang="de" data-position="bottom-right"></script>Mit data-target erscheint das Siegel in einem vorhandenen Element:
HTML · script + data-target<div id="siegel"></div> <script src="https://fakeshop.ai/siegel/IHRE-KENNUNG/embed.js" async data-variant="card" data-theme="light" data-lang="de" data-target="#siegel"></script>Dieselben Vorgaben gehen auch über die Adresse, für Umgebungen, die data-Attribute am Script entfernen:
HTML · script + url<script src="https://fakeshop.ai/siegel/IHRE-KENNUNG/embed.js?variant=float&theme=auto&lang=de&position=bottom-right" async></script>Web-Component
Der Loader steht einmal je Seite, das Element beliebig oft. So lassen sich mehrere Darstellungen mischen, etwa Vertrauensbox an der Kasse und Signet in der Fußzeile.
HTML · fakeshop-seal<script src="https://fakeshop.ai/siegel/widget.js" async></script> <fakeshop-seal seal="IHRE-KENNUNG" variant="card" theme="auto" lang="de"></fakeshop-seal> <fakeshop-seal seal="IHRE-KENNUNG" variant="mark" theme="auto" size="s" lang="de"></fakeshop-seal>Wer den Platz schon vor dem Laden des Loaders reservieren möchte, ergänzt:
CSS<style>fakeshop-seal:not(:defined){display:block;min-height:470px}</style>Bild ohne JavaScript
Die Plakette als SVG mit Link zur Zertifikatsseite. Parameter: size (s, m, l), theme (light, dark), lang (de, en) und shape (square, mark). referrerpolicy="origin" ist nötig, damit der Browser die Herkunft des Shops mitschickt. Ohne sie zeigt das Bild bei strenger Referrer-Richtlinie „Status per Klick prüfen“.
HTML · img<a href="https://fakeshop.ai/siegel/IHRE-KENNUNG" target="_blank" rel="nofollow noopener" referrerpolicy="origin"> <img src="https://fakeshop.ai/siegel/IHRE-KENNUNG/badge.svg?size=m&theme=light&lang=de" alt="Fakeshop AI: Tagesprüfung bestanden. Automatisierte Einschätzung, in Teilen mit KI erstellt. Ohne Gewähr, keine Rechtsberatung." height="68" referrerpolicy="origin" loading="lazy"> </a>iframe
Für Baukästen, die kein Script zulassen. Das Dokument kommt ohne JavaScript aus. Richtwerte für die Größe: Plakette 340 × 80, Leiste 100 % × 50 (schmal 110), Vertrauensbox 340 × 480, Signet 50 × 50, Textzeile 100 % × 28. Das Eck-Siegel gibt es im iframe nicht.
HTML · iframe<iframe src="https://fakeshop.ai/siegel/IHRE-KENNUNG/frame?variant=card&theme=light&lang=de" width="340" height="480" style="border:0" loading="lazy" referrerpolicy="origin" title="Shop-Siegel von Fakeshop AI"></iframe>
Attribute
Dieselben Namen gelten am Element (ohne Präfix) und am Script (mit Präfix data-). Ohne theme, size und lang gilt die Einstellung aus dem Händlerbereich.
| Name | Werte | Wirkung |
|---|---|---|
variant | stamp | badge | float | bar | card | mark | text | Darstellung |
theme | light | dark | auto | Hell, dunkel oder nach Einstellung des Besuchers |
size | s | m | l | Größe von Plakette und Signet |
lang | de | en | Sprache der Texte, bestimmt auch die Zertifikatsseite |
radius | round | sharp | Ecken, Vorgabe round |
position | bottom-right | bottom-left | Ecke des Eck-Siegels |
offset | 0 bis 400 | Abstand des Eck-Siegels nach oben in Pixel |
target | z. B. #siegel | Nur am Script: CSS-Selektor eines vorhandenen Elements |
So geht es in Ihrer Plattform
Die Plattformen ändern ihre Oberflächen. Die Hinweise beschreiben deshalb nur den Weg.
Shopify
Das Script des Eck-Siegels gehört in theme.liquid vor </body>. Für jede andere Darstellung setzen Sie Element und Loader in einen Abschnitt „Custom Liquid“ an der gewünschten Stelle.
WooCommerce und WordPress
Nehmen Sie den Block oder das Widget „Eigenes HTML“ im Footer. Das Script des Eck-Siegels geben Sie über den Hook wp_footer aus.
Shopware 6
In den Erlebniswelten setzen Sie das Element „HTML“ mit Element und Loader ein. Alternativ steht das Script im Footer-Template des Themes.
JTL-Shop
Legen Sie im Footer eine eigene Box mit HTML-Inhalt an und fügen Sie den Code dort ein.
Wix, Squarespace und Jimdo
Nutzen Sie den Einbettungs- oder Code-Block. Setzt der Block den Inhalt selbst in einen Rahmen, nehmen Sie den iframe-Weg: Ein Script sähe dort die Herkunft des Rahmens statt der Shop-Domain.
Google Tag Manager
Ein Tag vom Typ „Benutzerdefiniertes HTML“, sinnvoll nur für das Eck-Siegel. Setzen Sie die Vorgaben über die Adresse. Das funktioniert auch dann, wenn eine Umgebung data-Attribute am Script nicht erhält.
HTML · script + url
<script src="https://fakeshop.ai/siegel/IHRE-KENNUNG/embed.js?variant=float&theme=auto&lang=de&position=bottom-right" async></script>Datenschutz und Technik
Was der Code im Browser Ihrer Besucher tut, in der Reihenfolge, in der Shop-Betreiber danach fragen.
Keine Cookies, kein Tracking
Der Loader setzt keine Cookies und nutzt kein localStorage. Das Eck-Siegel merkt sich in sessionStorage nur, dass es eingeklappt wurde. Es gibt keine Zähler und keine Dienste Dritter.
Abrufe nur von fakeshop.ai
Das Siegel ruft ausschließlich Adressen von fakeshop.ai ab, ohne Zugangsdaten und mit der Referrer-Richtlinie origin. Unser Server erfährt damit die Domain der Seite ohne Pfad. Wie bei jedem Abruf kommt die IP-Adresse des Besuchers an unserem Server an. Näheres steht in der Datenschutzerklärung.
Zustand bestimmt der Server
Ob das Siegel gültig, ausgesetzt oder für die Seite nicht zutreffend erscheint, entscheidet unser Server anhand der Herkunft des Abrufs. Kein Attribut und kein Parameter setzt einen Zustand. Das Element zeichnet nur die fertigen Texte der Antwort.
Gilt nur auf Ihrer Domain
Ein Siegel gilt für die Domain, für die es ausgestellt ist, und für deren www-Variante. Auf jeder anderen Seite zeigt dieselbe Einbindung, dass das Siegel nicht für diese Seite gilt.
Shadow DOM
Das Element zeichnet in einem Shadow DOM. Styles Ihres Shops greifen nicht hinein, unsere greifen nicht hinaus. Die Textzeile ist die Ausnahme, weil sie Schrift und Farbe der Umgebung übernimmt. Die Stile werden über adoptedStyleSheets eingebracht, sodass auch eine strenge style-src-Richtlinie das Siegel nicht entkleidet.
Größe des Loaders
Der Loader ist ohne Kompression kleiner als 12 kB und hat mit gzip rund 5 kB, samt Stylesheet und ohne Abhängigkeiten. Er wird einen Tag zwischengespeichert. Der Platz des Siegels wird schon vor dem Eintreffen der Daten reserviert.
Ohne JavaScript
Script und Element brauchen JavaScript. Wo es fehlt, bleibt die Stelle leer. Bild und iframe kommen ohne JavaScript aus.
Wenn der Abruf scheitert
Ist unser Server nicht erreichbar oder blockiert die Richtlinie Ihres Shops den Abruf, zeigt das Element „Status nicht abrufbar“ mit Link zur Zertifikatsseite. Es zeigt dann nie ein gültiges Siegel.
Content-Security-Policy
Shops mit eigener Richtlinie lassen fakeshop.ai in script-src und connect-src zu, für den iframe in frame-src und für das Bild in img-src.
Links zu uns
Jeder Link im Siegel öffnet in einem neuen Tab und trägt rel="nofollow noopener" sowie referrerpolicy="origin".