---
title: "Opprett en webwidget i dashbordet"
description: "Sett opp en klikk-for-å-snakke-widget for nettstedet ditt fra siden Web Widgets – ingen API-kall kreves."
---

Siden **Web Widgets** (`/dashboard/web-widgets`) oppretter og administrerer
de publiserbare nøklene som driver ThunderPhones innebyggbare stemmewidget.
Alt [API-versjonen av denne veiledningen](/nb/guides/embed-web-widget)
gjør med cURL, gjør denne siden med et skjema — og den genererer
innebyggingskoden for deg.

## Opprett en widget

<Steps>
  <Step title="Klikk på Ny widget og velg en modus">
    - **Agentmodus** — widgeten kjører alltid én stemmeagent som du velger fra
      rullegardinmenyen. Det enkleste oppsettet.
    - **Webhookmodus** — for hver widgetøkt kaller ThunderPhone
      webhook-URL-en din, og serveren din returnerer agentkonfigurasjonen
      for den besøkende (ruting per side, innloggede brukere, utrullinger).
      La URL-en stå tom for å bruke organisasjonens standardwebhook.
      Når du angir en ny URL, kan du også angi den som organisasjonens standard.
  </Step>
  <Step title="List opp de tillatte domenene">
    Minst ett domene er påkrevd, og nettlesere kan bare starte
    økter fra vertsnavnene du lister opp. Jokertegn for underdomener, som
    `*.example.com`, er tillatt (de samsvarer med underdomener, ikke det rene
    domenet); rene jokertegn som `*` avvises. Listen hindrer tilfeldig
    gjenbruk av nøkkelen din på andre nettsteder, men er ikke autentisering: et skript
    utenfor en nettleser kan sende en hvilken som helst `Origin`-header. `localhost` er ikke
    tillatt automatisk i produksjon; legg det til i listen for å teste
    lokalt mot produksjons-API-et.
  </Step>
  <Step title="Velg nettleseroverstyringene">
    Kryss av for hver øktinnstilling siden din sender: **Sidekontekst**,
    **Variabler**, **Stemme**, **Språk**. Nye widgeter godtar ingen, og
    en øktforespørsel som inneholder en innstilling som er slått av, feiler med `400`.
    Nøkkelen din er offentlig, så tillat bare det du bruker. Se
    [Nettleseroverstyringer](/nb/guides/embed-web-widget).
  </Step>
  <Step title="Gi den et navn, aktiver den og opprett den">
    Bryteren **Aktiver widget** styrer om nøkkelen godtar
    økter — du kan opprette en deaktivert widget og slå den på ved lansering.
  </Step>
</Steps>

## Hent innebyggingskoden

Rett etter opprettelse (eller via **Bygg inn**-knappen på hver rad) genererer
en innebyggingsdialog kode som er klar til å limes inn, med den publiserbare nøkkelen din
utfylt:

- **React** — en `<ThunderPhoneWidget />`-kodebit for apper med bundler.
- **Skript-tag** — et CDN-par med `<script>` og stilark for ethvert nettsted.

Dialogen forhåndsviser også grunnleggende utseendealternativer — tittel, primærfarge,
hjørneplassering og lyst/mørkt tema — og bygger valgene dine inn
i kodebiten. Se [widget-SDK-dokumentasjonen](/nb/widget/overview) for fullstendig referanse
for props, stiltilkoblinger og det headless alternativet.

<Note>
  Publiserbare nøkler (`pk_live_…`) er offentlige av utforming — trygge å bruke i
  front-end-kode. Du kan når som helst kopiere en med kopieringsknappen på raden.
</Note>

## Administrer widgeter fra listen

Hver rad redigeres på stedet:

- **Modus / agent** — bytt mellom agent- og webhook-modus, eller endre
  agenten, med innebygde velgere.
- **Domener** — legg til eller fjern tillatte domener som brikker.
- **Aktiver/deaktiver** — en bryter per widget; deaktiverte widgeter slutter
  umiddelbart å godta økter.
- **Overfør til organisasjon** — kopier eller flytt widgeten til en annen organisasjon
  du tilhører (flytting fjerner den her).
- **Slett** — tilbakekaller den publiserbare nøkkelen; widgeten slutter å fungere
  umiddelbart på alle domener. Dette kan ikke angres.

Widgetøkter vises i [anropshistorikken](/nb/guides/review-calls) med samme
transkripsjon, opptak og vurdering som telefonsamtaler.

## Neste trinn

<CardGroup cols={2}>
  <Card title="Referanse for widget-SDK" icon="window-maximize" href="/nb/widget/overview">
    Detaljer om React-komponenten, headless-hooken og CDN-skriptet.
  </Card>
  <Card title="Ruting i webhook-modus" icon="bolt" href="/nb/guides/dynamic-call-config">
    Returner agentkonfigurasjon per besøkende fra serveren din.
  </Card>
</CardGroup>