# Recenzo: ugradnja widgeta s recenzijama
> Recenzo je hrvatski SaaS koji prikuplja recenzije tvrtke (Google + vlastite) i
> prikazuje ih na njezinom webu kroz jedan ugradbeni `
```
To je sve. Nema drugog koraka, nema konfiguracijskog objekta, nema atributa
koje bi trebalo dodati.
- `SHOP_ID` je UUID tvrtke (npr. `3f1c…`), ili `demo-shop` za testiranje bez računa.
- `id="recenzo-widget"` je samo konvencija. Skripta traži **`[data-shop]`**, pa
je id slobodno izostaviti ili promijeniti. Ako na stranicu stavljaš više
widgeta, id svakako izostavi jer se u HTML-u ne smije ponavljati.
- Više widgeta na istoj stranici je dopušteno. Svaki `[data-shop]` element
montira se jednom, neovisno o ostalima.
## 2. Sve ostalo se mijenja u nadzornoj ploči, ne u kodu
Widget pri svakom učitavanju povuče postavke tvrtke sa servera. Vlasnik ih
mijenja u **Dashboard → Widget**, promjena vrijedi odmah na svakoj stranici na
kojoj snippet stoji, i **nitko više ne dira kod weba**.
Kroz nadzornu ploču se postavlja:
| Postavka | Što radi |
| --- | --- |
| Stil prikaza | `grid`, `list` i, na plaćenom planu, još osam layouta (odjeljak 9) |
| Broj recenzija | 5, 10, 15 ili sve |
| Izvor recenzija | svi izvori ili samo jedan (Google, QR, widget, mini web…) |
| Tema | svijetla ili tamna |
| Naglasna boja | hex boja brenda |
| Vlastiti CSS | dodatni stilovi unutar shadow DOM-a (plaćeni plan) |
| Toast popup | povremeni kutni popup s recenzijom |
| "Powered by Recenzo" | potpis se smije ugasiti na plaćenom planu |
| Strukturirani podaci (JSON-LD) | prekidač koji uključuje `AggregateRating` + `Review` u `` domaćinske stranice |
| Dopušteni origini | domene s kojih widget smije raditi |
Zato: kad korisnik kaže "želim zid recenzija umjesto mreže" ili "prikaži ih
šest, ne deset", **ispravan odgovor nije mijenjati kod**, nego mu reći da to
prebaci u Dashboard → Widget. Snippet ostaje isti.
Prekidač za strukturirane podatke zamjenjuje stari atribut
`data-recenzo-schema`; atribut i dalje radi, ali je zastarjeli override i
opisan je u odjeljku 9.
## 3. Pravilo redoslijeda (najčešća greška)
`widget.js` pretraži dokument za `[data-shop]` u trenutku izvršavanja, i još
jednom na `DOMContentLoaded`. Sve što se pojavi **nakon** toga treba ručni
poziv.
- U običnom HTML-u: stavi `
```
Ako korisnik nije tražio baš to, izostavi atribute.
Svi idu na **div**, ne na script tag. Svi su opcionalni osim `data-shop`.
| Atribut | Dopuštene vrijednosti | Bez atributa |
| --- | --- | --- |
| `data-shop` | UUID tvrtke ili `demo-shop` | **obavezno** |
| `data-style` | Free: `grid`, `list`. Pro/Business: i `masonry`, `carousel`, `badge`, `toast`, `spotlight`, `quote`, `minimal`, `socialbar` | postavka iz nadzorne ploče, inače `grid` |
| `data-limit` | cijeli broj kao string (npr. `"6"`), ili `"all"` (= najviše 100) | postavka iz nadzorne ploče, inače `10` |
| `data-source` | `all`, `google`, `recenzo`, `widget`, `qr`, `booking`, `tripadvisor`, `instagram`, `shopify` | postavka iz nadzorne ploče, inače `all` |
| `data-theme` | `light`, `dark` (samo plaćeni plan) | postavka iz nadzorne ploče, inače `light` |
| `data-accent` | hex boja, `#RGB` ili `#RRGGBB` (npr. `#0D9488`), samo plaćeni plan | postavka iz nadzorne ploče, inače `#0D9488` |
| `data-recenzo-schema` | `"true"` za JSON-LD u `` | zastarjelo, vidi ispod |
Nepoznata vrijednost se ignorira i pada natrag na default. `data-accent` koji
nije valjani hex se odbacuje.
`data-source` filtrira po izvoru zapisanom uz recenziju. Vrijednost koja u toj
tvrtki nema nijednu recenziju daje prazan widget, ne grešku.
`data-theme` i `data-accent` su dio "prilagođenog brandinga" i vrijede samo na
plaćenom planu. Na Free planu se tiho ignoriraju i widget koristi spremljene
postavke; nema načina da se plaćeni branding dobije upisivanjem atributa.
`data-recenzo-schema` je **zastarjeli override**. JSON-LD se sada uključuje
prekidačem u nadzornoj ploči (odjeljak 2) i za novu ugradnju atribut ne
dodavaj. Postoji radi starih embeda i i dalje radi.
JSON-LD je isključen dok ga vlasnik ne uključi, i to namjerno: Googleova
review-snippet politika ne dopušta strukturirane podatke za recenzije
prikupljene s drugog sajta, pa bi neželjena injekcija kaznila **klijentovu**
domenu. Kad je uključen, endpoint šalje samo first-party recenzije (prikupljene
kroz Recenzo widget ili QR), nikad scrapeane Google recenzije.
`data-recenzo-preview` i `data-recenzo-mounted` su interni atributi. Prvi
koristi nadzorna ploča za svoj pregled, drugi widget sam upisuje na montirani
container. Ne postavljaj ih.
### Stilovi po planu
- **Free**: `grid`, `list`.
- **Pro / Business**: svih deset stilova iz tablice.
Za "wall of reviews" na naslovnici koristi `masonry` (Pro) ili `grid` (Free).
Plaćeni stilovi se provjeravaju na serveru. Ako ih upišeš na Free planu,
widget će nacrtati `grid` i u konzolu ispisati zašto. Nema načina da se
zaobiđe preko atributa.
## 10. Čega nema
- Nema npm paketa. Ugradnja je isključivo `