Widget do osadzania

Widget pokazuje jeden losowy cytat z naszego serwisu w małej, samodzielnej ramce (iframe). Renderuje się niezależnie od stylów Twojej strony - działa identycznie w Wordpressie, na forum phpBB czy w statycznym HTML-u sprzed dwudziestu lat.

Gotowy kod do wklejenia

Wklej ten fragment w miejscu, gdzie ma się pojawić widget. Skrypt sam znajdzie znacznik [data-kretyn-widget], wstawi ramkę i dopasuje jej wysokość do treści cytatu.

<div data-kretyn-widget data-theme="auto"></div>
<script src="https://kretyn.com/api/widget.js" async></script>

Podgląd na żywo

Tak wygląda widget osadzony na tej stronie, w motywie jasnym:

Parametry

data-theme

Motyw widgetu: light (domyślny), dark, reader, legacy albo auto (dopasowanie do prefers-color-scheme odwiedzającego). Nieznana wartość wraca do light.

data-height

Wysokość ramki w pikselach, zanim widget zgłosi własną wysokość (patrz niżej). Domyślnie 180, minimum 80 - wartości spoza zakresu wracają do domyślnej.

Automatyczne dopasowanie wysokości

Długość cytatu jest losowa, więc sztywna wysokość ramki albo obcina dłuższe cytaty, albo zostawia pustą przestrzeń przy krótkich. Widget mierzy własną wysokość i zgłasza ją skryptowi osadzającemu przez postMessage - skrypt przyjmuje komunikat wyłącznie po zweryfikowaniu originu, źródła (tej konkretnej ramki) i sensownego zakresu wartości, więc obca strona w tej samej zakładce nie może podać widgetowi fałszywej wysokości.

Wariant bez JavaScriptu

Jeśli nie chcesz ładować skryptu, osadź ramkę bezpośrednio - stracisz tylko automatyczne dopasowanie wysokości do treści cytatu (ustawiasz ją ręcznie atrybutem height):

<iframe
  src="https://kretyn.com/api/widget?theme=light"
  width="100%"
  height="180"
  style="border:0;display:block;max-width:100%"
  loading="lazy"
  title="Cytat z kretyn.com"
></iframe>

Prywatność

Widget nie ustawia żadnych ciasteczek i nie ładuje analityki (Google Tag Manager, Google Analytics) - to świadoma decyzja: strona widgetu (/api/widget) nie korzysta z głównego layoutu serwisu, który te skrypty podpina. Ramka pobiera wyłącznie losowy cytat z bazy i nic nie zapisuje po stronie odwiedzającego.

Wydajność

• Skrypt osadzający (/api/widget.js) waży mniej niż 5 kB i ładuje się z atrybutem async, więc nie blokuje renderowania Twojej strony.
• Ramka ma loading="lazy" - przeglądarka wczytuje ją dopiero, gdy zbliża się do widocznego obszaru.
• Odpowiedź /api/widget ma nagłówek Cache-Control: no-store, bo każde odświeżenie ma pokazać inny losowy cytat - to świadomy koszt losowości, nie przeoczenie.

Pytanie o widget albo problem z osadzeniem? Napisz przez formularz kontaktowy.