> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Créer un widget web dans le tableau de bord

> Configurez un widget cliquer-pour-parler pour votre site depuis la page Widgets web — aucun appel API requis.

La page **Web Widgets** (`/dashboard/web-widgets`) crée et gère
les clés publiables qui alimentent le widget vocal intégrable de ThunderPhone.
Tout ce que la [version API de ce guide](/fr/guides/embed-web-widget)
fait avec cURL, cette page le fait avec un formulaire — et génère en plus le code
d’intégration pour vous.

## Créer un widget

<Steps>
  <Step title="Cliquez sur Nouveau widget et choisissez un mode">
    * **Mode agent** — le widget exécute toujours un agent que vous sélectionnez
      dans la liste déroulante. La configuration la plus simple.
    * **Mode webhook** — à chaque session de widget, ThunderPhone appelle
      l’URL de votre webhook et votre serveur renvoie la configuration de l’agent
      pour ce visiteur (routage par page, utilisateurs connectés, déploiements progressifs).
      Laissez l’URL vide pour utiliser le webhook par défaut de votre organisation ;
      lorsque vous saisissez une nouvelle URL, vous pouvez également la définir comme valeur par défaut de l’organisation.
  </Step>

  <Step title="Répertoriez les domaines autorisés">
    Les clés publiables sont verrouillées par origine : au moins un domaine est requis,
    et le widget fonctionne uniquement sur les noms d’hôte que vous répertoriez. Les
    jokers de sous-domaines tels que `*.example.com` sont autorisés (ils correspondent aux sous-domaines,
    pas au domaine racine) ; les jokers seuls tels que `*` sont refusés.
    `localhost` et `127.0.0.1` sont toujours autorisés, afin que le développement local
    fonctionne sans avoir à les répertorier.
  </Step>

  <Step title="Nommez-le, activez-le et créez-le">
    Le bouton **Activer le widget** contrôle si la clé accepte
    les sessions — vous pouvez créer un widget désactivé et l’activer au lancement.
  </Step>
</Steps>

## Récupérer le code d’intégration

Juste après la création (ou via le bouton **Intégrer** de chaque ligne), une boîte de dialogue
d’intégration génère du code prêt à coller avec votre clé publiable déjà
renseignée :

* **React** — un extrait `<ThunderPhoneWidget />` pour les applications avec bundler.
* **Balise script** — une paire `<script>` CDN + feuille de style pour tout site.

La boîte de dialogue prévisualise également les options d’apparence de base — titre, couleur
principale, position dans le coin et thème clair/sombre — et intègre vos choix
dans l’extrait. Pour la référence complète des props, les hooks de style et l’option
headless, consultez la [documentation du SDK de widget](/fr/widget/overview).

<Note>
  Les clés publiables (`pk_live_…`) sont publiques par conception — elles peuvent être incluses
  sans risque dans le code front-end. Copiez-en une à tout moment avec le bouton de copie de sa ligne.
</Note>

## Gérer les widgets depuis la liste

Chaque ligne se modifie sur place :

* **Mode / Agent** — basculez entre le mode agent et le mode webhook, ou modifiez
  l’agent, avec des sélecteurs intégrés.
* **Domaines** — ajoutez ou supprimez des domaines autorisés sous forme d’étiquettes.
* **Activer/désactiver** — un interrupteur par widget ; les widgets désactivés cessent
  immédiatement d’accepter les sessions.
* **Transférer vers une organisation** — copiez ou déplacez le widget vers une autre organisation
  à laquelle vous appartenez (le déplacement le supprime d’ici).
* **Supprimer** — révoque la clé publiable ; le widget cesse de fonctionner
  immédiatement sur tous les domaines. Cette action est irréversible.

Les sessions de widget apparaissent dans l’[historique des appels](/fr/guides/review-calls) avec la
même transcription, le même enregistrement et la même évaluation que les appels téléphoniques.

## Étapes suivantes

<CardGroup cols={2}>
  <Card title="Référence du SDK de widget" icon="window-maximize" href="/fr/widget/overview">
    Détails sur le composant React, le hook headless et le script CDN.
  </Card>

  <Card title="Routage en mode webhook" icon="bolt" href="/fr/guides/dynamic-call-config">
    Renvoyez la configuration de l’agent par visiteur depuis votre serveur.
  </Card>
</CardGroup>