User Advisory Sticker – Implementation Instructions

The User Advisory sticker is designed to be easily embedded in any HTML page, providing a clear visual warning for experimental, unfinished, or unsupported projects. This guide explains how to include the sticker and how to select the appropriate warning combination.

1. Embedding the Sticker

The recommended way to include the sticker is by using an <iframe> element. This ensures the sticker displays consistently, with correct rotation, background, and border, regardless of your page's styling.

<iframe src="https://ai.vpro.nl/user-advisory/warning.html?abd" width="240" height="170" style="border:none; background:transparent;" scrolling="no" title="User Advisory"></iframe>

src: The path to the sticker, with a query string for the warning codes (see below).
width/height: Use 240 × 170 for best results.
style: Set border:none; background:transparent; for a clean look.
title: For accessibility, set to User Advisory.

2. Selecting Warning Combinations

The sticker supports different combinations of warnings, controlled by the query string in the src URL. Use any combination of the following codes:

a: temporary
b: unfinished
c: no safe data
d: no support

For example, ?abd will show a sticker for "temporary, unfinished, no support". The order of the codes does not matter.

Tip: Only use valid codes. Invalid or missing codes will default to a (temporary).

3. Accessibility

The sticker automatically sets the alt and title attributes for screen readers, based on the selected warnings.

4. Example

<iframe src="https://ai.vpro.nl/user-advisory/warning.html?bc" width="240" height="170" style="border:none; background:transparent;" scrolling="no" title="User Advisory"></iframe>

5. Advanced: Direct Image Embedding

If you prefer a static image (without rotation or background), you can use the SVG directly:

<img src="/img/user-advisory-abd.svg" alt="Warning: temporary, unfinished, no support" width="240" height="90" />

However, the iframe method is recommended for the best visual effect.

6. Questions?

For help or feedback, contact medialab@vpro.nl.