Kupci Logo

Dobrodošli

Proizvodi

Dokumentacija

Vodič za poslodavce: Kupci profil, Moje stranice i potpuni nadzor u backofficeu, bez čekanja na dodatna odobrenja za svaki korak koji možete sami napraviti

Natrag na pregled dokumentacije

Integracije i widget na vašoj stranici

Widget na vašoj adresi pokazuje javne podatke iste stranice kao na Kupcima. Client ID u snippetu povezuje widget s vašom stranicom. Dobivate ga na profilu, bez čekanja na mail od podrške.

Kako podesiti widget?

1Profil
2Widget generator
3Podesite izgled
4Kopirajte kod

Client ID pripada vašoj stranici i odmah je dostupan u generatoru widgeta na profilu svakome tko upravlja tom tvrtkom ili uslugom. Kad widget ugradite, Client ID je u HTML-u stranice i vidljiv je u izvornom kodu. To je normalno. Služi da widget zna koju stranicu prikazati, nije tajna lozinka.

Korak po korak: što kliknuti

  1. 1

    1. Otvorite generator widgeta

    Otvorite profil tvrtke ili usluge i karticu Widget. Client ID i slug stranice već su prikazani. Ne trebate slati zahtjev putem kontakt forme.

  2. 2

    2. Podesite izgled i kopirajte kod

    Odaberite tip widgeta, temu i opcije (npr. bez okvira ili bez vanjskog razmaka). Pregled se učitava s podacima vaše stranice. Kad ste zadovoljni, kliknite Kopiraj kod. Snippet već sadrži vaš Client ID (data-api-key) i data-slug.

  3. 3

    3. Kopirajte kod i provjerite

    HTML zalijepite u WordPress, Webflow ili predložak stranice. Po želji ručno dodajte CSS varijable (--kpc-radius, --kpc-acc i dr.). Spremite, objavite i u novom prozoru provjerite učitava li se widget.

Zašto Client ID

Widget na vašoj adresi pokazuje javne podatke iste stranice kao na Kupcima. Client ID u snippetu povezuje widget s vašom stranicom. Dobivate ga na profilu, bez čekanja na mail od podrške.

Što widget radi na vašoj stranici

Na vašem webu prikazuje sadržaj s istog Kupci profila (najčešće recenzije i ocjene, ovisno o predlošku). Posjetitelj ostaje na vašoj stranici. Vi birate gdje blok stoji i koliko mu mjesta dajete.

Ako želite više widgeta na jednoj stranici, svakom divu dajte jedinstven id, npr. kupci-com-widget-1 i kupci-com-widget-2. Slug i Client ID ostaju isti ako sve pripada istoj tvrtki.

Widget koristi Shadow DOM. Vanjski CSS ne mijenja unutrašnji izgled, ali možete postaviti CSS varijable na host div elementu (npr. --kpc-radius, --kpc-acc, --kpc-font-size).

HTML predložak

Generator na profilu automatski umeće slug i Client ID vaše stranice. Ručni predložak ispod koristite samo ako HTML pišete sami.

<div id="kupci-com-widget" data-slug="COMPANY_SLUG" data-api-key="CLIENT_ID" data-design="2" data-theme="2" data-layout="standard" style="--kpc-radius: 12px">
  <a href="https://kupci.com/recenzije/COMPANY_SLUG" target="_blank" rel="noopener noreferrer">Provjerite recenzije na Kupci.com</a>
</div>
<script src="https://kupci.com/widget/int.js" defer></script>

Otvorite generator widgeta na profilu

Prilagodba izgleda

HTML atributi

  • data-slug Slug javnog profila tvrtke na Kupcima.
  • data-api-key Client ID stranice (HTML atribut data-api-key) iz generatora widgeta na profilu.
  • data-design Dizajn kartice (1–5) za layout standard.
  • data-theme 1 = tamna tema, 2 = svijetla tema.
  • data-layout Tip widgeta: standard, micro, carousel, reviews-carousel, product.
  • data-transparent="1" Bez okvira, pozadine i sjene kartice.
  • data-flush-outer="1" Bez vanjskog paddinga i margine. Koristi se uz data-transparent.
  • data-seo-rating / data-seo-reviews SEO fallback ocjene i broja recenzija dok se API učitava.

CSS varijable

Varijable postavite u style atributu na istom div elementu koji nosi widget. Nasljeđuju se unutar Shadow DOM prikaza.

VarijablaZnačenjeZadano
--kpc-accAkcentna boja (gornji rub kartice, ocjena)#1CDD06
--kpc-radiusZaobljenje rubova kartice16px
--kpc-font-sizeOsnovna veličina fonta widgeta16px
--kpc-font-familyFont widgetaInter, system-ui, sans-serif
--kpc-root-pad-xUnutarnji horizontalni padding kartice16px
--kpc-root-pad-yUnutarnji vertikalni padding kartice16px
--kpc-root-gapRazmak između elemenata unutar kartice10px
--kpc-tap-pad-xHorizontalni padding link omotača0px
--kpc-tap-pad-yVertikalni padding link omotača0px
--kpc-textBoja glavnog teksta (ovisi o temi)tema 1: #fff, tema 2: #1c1c1c
--kpc-text-mutedBoja sekundarnog tekstatema 1: rgba(255,255,255,0.72)
--kpc-card-bgPozadina karticetema 1: #000, tema 2: #fff
--kpc-card-borderBoja okvira karticergba okvir po temi
--kpc-card-border-widthDebljina okvira kartice1px
--kpc-accent-border-widthDebljina zelenog gornjeg ruba3px
--kpc-star-sizeVeličina zvjezdica ocjene18px
--kpc-carousel-card-radiusZaobljenje kartice u carouselu12px
--kpc-carousel-card-pad-xHorizontalni padding kartice recenzije14px
--kpc-carousel-card-pad-yVertikalni padding kartice recenzije12px
<div
  id="kupci-com-widget"
  data-slug="vas-slug"
  data-api-key="CLIENT_ID"
  data-design="2"
  data-theme="2"
  data-transparent="1"
  data-flush-outer="1"
  style="--kpc-radius: 12px; --kpc-acc: #169a52; --kpc-root-pad-x: 12px; --kpc-font-size: 15px"
>
  <a href="https://kupci.com/recenzije/vas-slug" target="_blank" rel="noopener noreferrer">Provjerite recenzije na Kupci.com</a>
</div>

U generatoru widgeta na profilu opcije bez okvira i bez vanjskog razmaka automatski upisuju data-transparent i data-flush-outer u snippet.

Živi primjeri widgeta

Svaki primjer odgovara kombinaciji iz generatora na profilu: tip widgeta, dizajn kartice (kad postoji), tamna ili svijetla tema. Podaci su ilustrativni za slug kupci bez Client ID-a.

Tamna ili svijetla pozadina simulira stranicu na kojoj widget stoji, isto kao pregled u generatoru.

Kartica s ocjenom

Zvjezdice i broj recenzija. Birate jedan od četiri dizajna kartice.

Kompaktna

Visoka

Podijeljena

Logo i zvjezdice

Mikro kartica

Kompaktno za proizvode, sidebar ili footer.

Carousel

Ocjena i recenzije u vodoravnoj traci.

Mikro carousel

Manji carousel za proizvode ili uske stupce.

Carousel recenzija

Samo tekstovi recenzija, bez zaglavlja s ocjenom.

Proizvod

Ocjena uz naziv proizvoda na stranici artikla.

Generator widgeta na profiluKontakt (podrška)