---
title: "Izradite web-widget na nadzornoj ploči"
description: "Postavite widget „klikni za razgovor” za svoju web-lokaciju na stranici Web-widgeti — API pozivi nisu potrebni."
---

Stranica **Web-widgeti** (`/dashboard/web-widgets`) stvara i upravlja
ključevima za objavu koji pokreću ThunderPhoneov ugrađeni glasovni widget.
Sve što [API verzija ovog vodiča](/hr/guides/embed-web-widget)
radi s pomoću cURL-a, ova stranica radi putem obrasca — uz to generira kôd
za ugradnju umjesto Vas.

## Izradite widget

<Steps>
  <Step title="Kliknite Novi widget i odaberite način rada">
    - **Način rada agenta** — widget uvijek pokreće jednog agenta kojeg odaberete
      s padajućeg izbornika. Najjednostavnije postavljanje.
    - **Način rada webhooka** — pri svakoj sesiji widgeta ThunderPhone poziva
      URL Vašeg webhooka, a Vaš poslužitelj vraća konfiguraciju agenta
      za tog posjetitelja (usmjeravanje po stranici, prijavljeni korisnici, uvođenja).
      Ostavite URL prazan za korištenje zadanog webhooka Vaše organizacije;
      kada unesete novi URL, možete ga postaviti i kao zadani webhook organizacije.
  </Step>
  <Step title="Navedite dopuštene domene">
    Ključevi za objavu zaključani su na izvorišta: potrebna je najmanje jedna domena,
    a widget radi samo na glavnim nazivima računala koje navedete. Zamjenski znakovi
    za poddomene poput `*.example.com` dopušteni su (podudaraju se s poddomenama,
    a ne s osnovnom domenom); osnovni zamjenski znakovi poput `*` odbijaju se.
    `localhost` i `127.0.0.1` uvijek su dopušteni, pa lokalni razvoj
    radi bez njihova navođenja.
  </Step>
  <Step title="Imenujte ga, omogućite ga i izradite">
    Prekidač **Omogućite widget** određuje prihvaća li ključ
    sesije — možete izraditi onemogućen widget i uključiti ga pri pokretanju.
  </Step>
</Steps>

## Preuzmite kôd za ugradnju

Odmah nakon izrade (ili putem gumba **Ugradi** u svakom retku), dijalog za ugradnju
generira kôd spreman za lijepljenje s već unesenim ključem za objavu:

- **React** — isječak `<ThunderPhoneWidget />` za aplikacije s bundlerom.
- **Oznaka skripte** — par CDN oznake `<script>` i stilskog predloška za bilo koju web-lokaciju.

Dijalog također prikazuje osnovne opcije izgleda — naslov, primarnu
boju, položaj kuta i svijetlu/tamnu temu — te Vaše odabire ugrađuje
u isječak. Za potpuni pregled svojstava, priključke za stiliziranje i
headless opciju pogledajte [dokumentaciju SDK-a za widget](/hr/widget/overview).

<Note>
  Ključevi za objavu (`pk_live_…`) prema dizajnu su javni — sigurni za isporuku u
  front-end kôdu. Možete ih kopirati u bilo kojem trenutku gumbom za kopiranje u njihovom retku.
</Note>

## Upravljajte widgetima s popisa

Svaki se redak uređuje na mjestu:

- **Način rada / Agent** — prebacujte između načina rada agenta i webhooka ili promijenite
  agenta pomoću ugrađenih padajućih izbornika.
- **Domene** — dodajte ili uklonite dopuštene domene kao oznake.
- **Omogućite/onemogućite** — prekidač za svaki widget; onemogućeni widgeti odmah
  prestaju prihvaćati sesije.
- **Prenesite u organizaciju** — kopirajte ili prenesite widget u drugu organizaciju
  kojoj pripadate (prijenos ga uklanja odavde).
- **Izbrišite** — opoziva ključ za objavu; widget odmah prestaje raditi
  na svim domenama. Ovo nije moguće poništiti.

Sesije widgeta prikazuju se u [povijesti poziva](/hr/guides/review-calls) s istim
transkriptom, snimkom i ocjenjivanjem kao telefonski pozivi.

## Sljedeći koraci

<CardGroup cols={2}>
  <Card title="Referenca SDK-a za widget" icon="window-maximize" href="/hr/widget/overview">
    Pojedinosti o React komponenti, headless priključku i CDN skripti.
  </Card>
  <Card title="Usmjeravanje u načinu rada webhooka" icon="bolt" href="/hr/guides/dynamic-call-config">
    Vratite konfiguraciju agenta po posjetitelju sa svog poslužitelja.
  </Card>
</CardGroup>