---
title: "Skapa en webbwidget i instrumentpanelen"
description: "Konfigurera en klicka-för-att-ringa-widget för din webbplats från sidan Webbwidgetar – inga API-anrop krävs."
---

Sidan **Webbwidgetar** (`/dashboard/web-widgets`) skapar och hanterar
de publicerbara nycklar som driver ThunderPhones inbäddningsbara röstwidget.
Allt som [API-versionen av den här guiden](/sv/guides/embed-web-widget)
gör med cURL gör den här sidan med ett formulär — och genererar dessutom
inbäddningskoden åt dig.

## Skapa en widget

<Steps>
  <Step title="Klicka på Ny widget och välj ett läge">
    - **Agentläge** — widgeten kör alltid en röstagent som du väljer i
      rullgardinsmenyn. Den enklaste konfigurationen.
    - **Webhookläge** — vid varje widgetsesssion anropar ThunderPhone
      din webhook-URL, och din server returnerar röstagentens konfiguration
      för den besökaren (dirigering per sida, inloggade användare, lanseringar).
      Lämna URL:en tom för att använda organisationens standardwebhook;
      när du anger en ny URL kan du också ange den som organisationens standard.
  </Step>
  <Step title="Ange de tillåtna domänerna">
    Minst en domän krävs, och webbläsare kan bara starta
    sessioner från värdnamnen du anger. Jokertecken för underdomäner som
    `*.example.com` är tillåtna (de matchar underdomäner, inte den nakna
    domänen); nakna jokertecken som `*` avvisas. Listan förhindrar enkel
    återanvändning av din nyckel på andra webbplatser men är inte autentisering:
    ett skript utanför en webbläsare kan skicka valfri `Origin`-header. `localhost` är inte
    automatiskt tillåtet i produktion; lägg till det i listan för att testa
    lokalt mot produktions-API:et.
  </Step>
  <Step title="Välj webbläsaråsidosättningarna">
    Markera varje sessionsinställning som sidan skickar: **Sidkontext**,
    **Variabler**, **Röst**, **Språk**. Nya widgetar accepterar inga, och
    en sessionsbegäran som innehåller en inställning som är avstängd misslyckas med `400`.
    Din nyckel är offentlig, så tillåt bara det du använder. Se
    [Webbläsaråsidosättningar](/sv/guides/embed-web-widget).
  </Step>
  <Step title="Namnge den, aktivera den och skapa den">
    Växeln **Aktivera widget** styr om nyckeln accepterar
    sessioner — du kan skapa en widget som är inaktiverad och aktivera den vid lansering.
  </Step>
</Steps>

## Hämta inbäddningskoden

Direkt efter skapandet (eller via knappen **Bädda in** på varje rad) genererar
en inbäddningsdialog färdig kod att klistra in med din publicerbara nyckel
ifylld:

- **React** — ett `<ThunderPhoneWidget />`-utdrag för appar med bundler.
- **Script-tagg** — ett CDN-par med `<script>` + stilmall för alla webbplatser.

Dialogen förhandsvisar även grundläggande utseendealternativ — titel, primär
färg, hörnposition och ljust/mörkt tema — och inkluderar dina val
i utdraget. Information om alla props, stilhooks och det headless-alternativet
finns i [widget-SDK-dokumentationen](/sv/widget/overview).

<Note>
  Publicerbara nycklar (`pk_live_…`) är offentliga avsiktligt — de kan utan risk användas i
  frontendkod. Kopiera en när som helst med kopieringsknappen på dess rad.
</Note>

## Hantera widgetar från listan

Varje rad redigeras på plats:

- **Läge / Agent** — växla mellan agent- och webhook-läge, eller ändra
  röstagenten, med inbäddade väljare.
- **Domäner** — lägg till eller ta bort tillåtna domäner som chips.
- **Aktivera/inaktivera** — en växel per widget; inaktiverade widgetar slutar
  omedelbart att acceptera sessioner.
- **Överför till organisation** — kopiera eller flytta widgeten till en annan organisation
  du tillhör (om du flyttar den tas den bort här).
- **Ta bort** — återkallar den publicerbara nyckeln; widgeten slutar fungera
  omedelbart på alla domäner. Detta kan inte ångras.

Widgetsessioner visas i [samtalshistoriken](/sv/guides/review-calls) med samma
transkription, inspelning och bedömning som telefonsamtal.

## Nästa steg

<CardGroup cols={2}>
  <Card title="Referens för widget-SDK" icon="window-maximize" href="/sv/widget/overview">
    React-komponent, headless-hook och information om CDN-skript.
  </Card>
  <Card title="Dirigering i webhook-läge" icon="bolt" href="/sv/guides/dynamic-call-config">
    Returnera agentkonfiguration per besökare från din server.
  </Card>
</CardGroup>