01 · badge
Badge
Compact display for the footer, checkout or sidebar. Size s shows state and domain on one line, m adds the brand and check date, l also states since when and how often the shop has been checked.
Embed the seal in your shop
Choose how the seal looks in your shop and add it with one line of code. Six variants, four ways to embed. The previews use sample data with a made-up domain. The configurator in the merchant area generates the finished code for your seal.
Six variants
Each preview appears in light and dark on a matching background. With the value auto the seal follows the visitor’s colour setting. Corners can be round or square.
02 · float
Corner seal
A button with the mark and the state, fixed to the window edge. A click opens a card with the check data. It closes with Escape, a click outside or the close button, after which only the mark stays for the rest of the session. The distance from the bottom can be raised, for example above a cookie banner.
The preview is interactive: clicking the button opens the card, Escape closes it.
03 · bar
Bar
One line across the full width for the header or footer with state, domain, note, check count, brand and a link to the certificate. It wraps on narrow screens.
04 · card
Trust box
For the checkout and product pages. It shows the domain, the company name of a verified business, the check data, up to five criteria passed in the last check, and links to the certificate and the criteria.
05 · mark
Mark
Only the mark, for tight spaces. State and domain are available as a label for screen readers and appear as a tooltip on hover and keyboard focus.
06 · text
Text line
A line with a small mark that takes over the font and colour of its surroundings. It fits into body text, footnotes and notes at the checkout.
Orders at beispiel-shop.example:
Orders at beispiel-shop.example:
Four ways to embed
In the examples YOUR-ID stands for the identifier of your seal. The configurator in the merchant area fills it in and assembles variant, size, colour and language for you.
Script
One line at the place where the seal should appear, or before the closing body tag for the corner seal. Without attributes the linked badge appears as an image. With data-variant the script draws the element.
HTML · script<script src="https://fakeshop.ai/siegel/YOUR-ID/embed.js" async data-variant="float" data-theme="auto" data-lang="en" data-position="bottom-right"></script>With data-target the seal appears inside an existing element:
HTML · script + data-target<div id="siegel"></div> <script src="https://fakeshop.ai/siegel/YOUR-ID/embed.js" async data-variant="card" data-theme="light" data-lang="en" data-target="#siegel"></script>The same settings can be passed in the address, for environments that strip data attributes from the script:
HTML · script + url<script src="https://fakeshop.ai/siegel/YOUR-ID/embed.js?variant=float&theme=auto&lang=en&position=bottom-right" async></script>Web component
The loader appears once per page, the element as often as needed. This lets you mix variants, for example a trust box at the checkout and a mark in the footer.
HTML · fakeshop-seal<script src="https://fakeshop.ai/siegel/widget.js" async></script> <fakeshop-seal seal="YOUR-ID" variant="card" theme="auto" lang="en"></fakeshop-seal> <fakeshop-seal seal="YOUR-ID" variant="mark" theme="auto" size="s" lang="en"></fakeshop-seal>To reserve the space before the loader has loaded, add:
CSS<style>fakeshop-seal:not(:defined){display:block;min-height:470px}</style>Image without JavaScript
The badge as an SVG with a link to the certificate page. Parameters: size (s, m, l), theme (light, dark), lang (de, en) and shape (square, mark). referrerpolicy="origin" is required so that the browser sends the origin of the shop. Without it a strict referrer policy makes the image show "Verify status with a click".
HTML · img<a href="https://fakeshop.ai/en/seal/YOUR-ID" target="_blank" rel="nofollow noopener" referrerpolicy="origin"> <img src="https://fakeshop.ai/siegel/YOUR-ID/badge.svg?size=m&theme=light&lang=en" alt="Continuously checked shop" height="68" referrerpolicy="origin" loading="lazy"> </a>iframe
For site builders that do not allow scripts. The document works without JavaScript. Suggested sizes: badge 340 × 80, bar 100% × 50 (narrow 110), trust box 340 × 480, mark 50 × 50, text line 100% × 28. The corner seal is not available in an iframe.
HTML · iframe<iframe src="https://fakeshop.ai/siegel/YOUR-ID/frame?variant=card&theme=light&lang=en" width="340" height="480" style="border:0" loading="lazy" referrerpolicy="origin" title="Shop seal by Fakeshop AI"></iframe>
Attributes
The same names apply to the element (without prefix) and to the script (with the prefix data-). Without theme, size and lang the setting from the merchant area applies.
| Name | Values | Effect |
|---|---|---|
variant | badge | float | bar | card | mark | text | Variant |
theme | light | dark | auto | Light, dark or following the visitor’s setting |
size | s | m | l | Size of badge and mark |
lang | de | en | Language of the texts, also selects the certificate page |
radius | round | sharp | Corners, default round |
position | bottom-right | bottom-left | Corner of the corner seal |
offset | 0 to 400 | Offset of the corner seal upwards, in pixels |
target | e.g. #seal | Script only: CSS selector of an existing element |
How it works on your platform
Platforms change their interfaces. The notes therefore describe the route only.
Shopify
The script of the corner seal goes into theme.liquid before </body>. For any other variant, place the element and the loader in a “Custom Liquid” section where you want it.
WooCommerce and WordPress
Use the “Custom HTML” block or widget in the footer. Output the script of the corner seal through the wp_footer hook.
Shopware 6
In the Shopping Experiences, add the “HTML” element containing the element and the loader. Alternatively, put the script into the footer template of the theme.
JTL-Shop
Create a custom box with HTML content in the footer and paste the code there.
Wix, Squarespace and Jimdo
Use the embed or code block. If the block places the content in a frame of its own, use the iframe route: a script would see the origin of the frame instead of the shop domain.
Google Tag Manager
A tag of type “Custom HTML”, useful only for the corner seal. Set the options through the address. This also works when an environment does not keep data attributes on the script.
HTML · script + url
<script src="https://fakeshop.ai/siegel/YOUR-ID/embed.js?variant=float&theme=auto&lang=en&position=bottom-right" async></script>Privacy and technical details
What the code does in your visitors’ browsers, in the order shop operators usually ask about it.
No cookies, no tracking
The loader sets no cookies and does not use localStorage. The corner seal only remembers in sessionStorage that it was collapsed. There are no counters and no third-party services.
Requests to fakeshop.ai only
The seal only requests addresses on fakeshop.ai, without credentials and with the referrer policy origin. Our server therefore learns the domain of the page without the path. As with any request, the visitor’s IP address reaches our server. Details are in the privacy policy.
The server decides the state
Whether the seal appears as valid, suspended or not applicable to the page is decided by our server from the origin of the request. No attribute and no parameter sets a state. The element only draws the finished texts of the response.
Valid on your domain only
A seal is valid for the domain it was issued for and its www variant. On any other site the same embed shows that the seal does not apply to that site.
Shadow DOM
The element draws inside a shadow DOM. Styles of your shop do not reach in, ours do not reach out. The text line is the exception because it takes over the font and colour of its surroundings. Styles are applied through adoptedStyleSheets, so a strict style-src policy does not strip the seal.
Size of the loader
Uncompressed the loader is below 12 kB and about 5 kB with gzip, including the stylesheet and without dependencies. It is cached for one day. The space for the seal is reserved before the data arrives.
Without JavaScript
Script and element need JavaScript. Where it is missing, the spot stays empty. The image and the iframe work without JavaScript.
When the request fails
If our server cannot be reached or your shop’s policy blocks the request, the element shows “Status unavailable” with a link to the certificate page. It never shows a valid seal in that case.
Content Security Policy
Shops with a policy of their own allow fakeshop.ai in script-src and connect-src, in frame-src for the iframe and in img-src for the image.
Links to us
Every link in the seal opens in a new tab and carries rel="nofollow noopener" and referrerpolicy="origin".