To prawdziwe rendery z API z przykładowymi wartościami z tabeli niżej. Przełącz rozmiar wyżej: ten sam szablon układa się w każdym z 6 rozmiarów — wyślij size albo sizes w zapytaniu.
Dla katalogów, agencji i serwisów-wizytówek, które publikują kartę dla każdej strony, oraz na podgląd linku do dowolnej strony. Pasek adresu gra główną rolę: domena pogrubiona, ścieżka przygaszona; za długi adres najpierw się zmniejsza, potem kończy wielokropkiem. Bez zrzutu okno pokazuje szkielet strony w kolorze akcentu, a bez favikony pasek podpisu dostaje pierwszą literę domeny. W szerokich kadrach okno jest niskie nad wąskim paskiem; w kwadratowych i pionowych strona dostaje więcej wysokości, z szerokiego zrzutu zostaje lewa krawędź, a tytuł może mieć trzy wiersze.
Pola
Każde pole jest opcjonalne. Za długi tekst zmniejsza się, zamiast wychodzić poza kadr; pole obrazka przyjmuje publiczny adres URL, który pobieramy po naszej stronie.
| Pole | Typ | Opis | Przykład |
|---|---|---|---|
url |
tekst | Adres strony, np. https://fernway.app/trails/alpine-loop. Schemat i www. są pomijane; http:// pokazuje otwartą kłódkę. domyślnie: example.com | https://fernway.app/trails/alpine-loop |
title |
tekst | Tytuł strony na pasku pod oknem. | Fernway: plan the trail, pack the right gear |
caption |
tekst | Jedna krótka linijka pod tytułem, np. kategoria albo „Strona dnia”. | Outdoor planning app · Site of the day |
screenshot |
adres obrazka | Zrzut strony; wypełnia okno od górnej krawędzi. | https://example.com/images/b06-site.png |
favicon |
adres obrazka | Ikona strony, kwadratowa; na karcie i na pasku podpisu. | https://example.com/images/b06-fav-fernway.png |
accent |
kolor | Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #0ea5e9 | #0ea5e9 |
theme |
dark | light | Schemat kolorów: dark albo light. domyślnie: light | — |
Wyrenderuj go jednym żądaniem
Slug podajesz jako template. W odpowiedzi dostajesz adres gotowego PNG; ?wait=true trzyma połączenie, aż obrazek będzie gotowy.
curl -X POST "https://shareglint.com/v1/images?wait=true" \
-H "Authorization: Bearer sk_live_YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{
"template": "browser-frame",
"modifications": {
"url": "https://fernway.app/trails/alpine-loop",
"title": "Fernway: plan the trail, pack the right gear",
"caption": "Outdoor planning app · Site of the day",
"screenshot": "https://example.com/images/b06-site.png",
"favicon": "https://example.com/images/b06-fav-fernway.png"
}
}'Albo wklej podpisany adres w og:image
Dla stron statycznych, Webflow, Shopify i narzędzi no-code: pola idą w query stringu, a całość podpisujesz swoim sekretem. Pierwsze żądanie renderuje obrazek, każde kolejne to przekierowanie na gotowy plik. Jak policzyć podpis.
<meta property="og:image" content="https://shareglint.com/i/acc_YOUR_ACCOUNT_ID/browser-frame.png?caption=Outdoor%20planning%20app%20%C2%B7%20Site%20of%20the%20day&title=Fernway%3A%20plan%20the%20trail%2C%20pack%20the%20right%20gear&url=https%3A%2F%2Ffernway.app%2Ftrails%2Falpine-loop&s=YOUR_SIGNATURE">Dopasuj do siebie
accent i theme zmieniasz w każdym żądaniu. Jeśli chcesz więcej, skopiuj szablon na swoje konto: dostajesz zwykły szablon HTML z tymi samymi polami, który edytujesz w panelu albo przez API. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje — Twoje integracje przechodzą na Twoją wersję bez zmiany jednej linijki.
curl -X POST "https://shareglint.com/v1/templates/library/browser-frame/copy" \
-H "Authorization: Bearer sk_live_YOUR_KEY"Więcej szablonów: Dla programistów
Repozytorium GitHub
Endpoint API
Fragment kodu
Nowa wersja pakietu
Wyniki Lighthouse
Biuletyn bezpieczeństwa
Stos technologiczny
Przepis automatyzacji
Karta promptu AI
Wszystkie szablony w kategorii Dla programistów (11) → · Wszystkie szablony →