---
title: Intégrer le widget à votre site
description: >-
  Copiez l'extrait de deux lignes depuis la section Widget, collez-le dans votre
  page et rendez l'agent public pour que le widget soit autorisé à se charger.
---
Le widget s'intègre à l'aide d'un élément personnalisé et d'une balise script.
L'extrait contient déjà l'id de l'agent et se trouve à deux endroits : derrière
le bouton **Embed Code** (code d'intégration) de la section **Widget** (widget),
et dans la boîte de dialogue **Share Agent** (partager l'agent) une fois l'agent
rendu public. Les deux fournissent le widget exactement tel qu'il a été
enregistré pour la dernière fois dans le designer.

## Ajouter l'extrait à une page

1. **Concevoir et enregistrer**

    Mettez en forme le widget dans le [designer](/fr/deploy/widget-and-embed/widget-designer)
    puis choisissez **Save** (enregistrer).

2. **Copier l'extrait**

    Choisissez **Embed Code**, puis **Copy** (copier) dans la boîte de dialogue **Embed Code**.

3. **Le coller**

    Placez-le juste avant la balise `</body>` de fermeture de chaque page qui
    doit afficher le widget, ou dans la mise en page partagée de votre site. Il
    ressemble à ceci :

    ```html
    <callab-chat agent-id="<your agent id>"></callab-chat>
    <script src="https://unpkg.com/@callab-ai/widget@<version>/dist/callab-chat-widget.iife.js"
      integrity="sha384-…" crossorigin="anonymous" async type="text/javascript"></script>
    ```

    L'extrait d'un agent vocal utilise `voice-agent-id` au lieu de `agent-id`,
    ce qui ouvre le widget sous forme d'appel plutôt que de chat. Les attributs
    correspondant à tout ce que vous avez modifié dans le designer, comme
    `collapsed-text="Talk to us"`, sont ajoutés à l'élément.

    Conservez l'attribut `integrity` tel qu'il a été copié ; il associe le
    script au fichier exact fourni par la boîte de dialogue. Copiez de nouveau
    depuis la boîte de dialogue plutôt que de modifier la version à la main.

4. **Rendre l'agent public**

    Choisissez **Share agent** (partager l'agent) dans l'en-tête du workspace, à
    côté de **Save**, puis activez **Agent Visibility** (visibilité de l'agent)
    dans la boîte de dialogue **Share Agent**. Tant que l'option est désactivée,
    la boîte de dialogue indique *Private - Only you can access this agent* et
    le widget présent sur votre site ne peut pas démarrer de conversation. Pour
    un agent vocal, la section **Widget** l'indique également : *This agent is
    private, so calls from the embedded widget will be refused.*

![La boîte de dialogue Embed Code.](/media/deploy/embed-code-dialog.webp)


## Comportement et limites

- Le script se charge de façon asynchrone et affiche le lanceur dans le coin
  défini par **Placement** (emplacement) ; il ne bloque pas la page.
- Le design est récupéré depuis l'agent : une nouvelle mise en forme dans le
  designer, suivie d'un enregistrement, modifie le site sans nouvel extrait.
- Les conversations démarrées depuis le widget sont répertoriées sous
  [Conversations](/fr/operate/conversations) pour un agent textuel, et sous
  [Journaux d'appels](/fr/operate/call-logs) avec `WEB` comme numéro lorsqu'un
  visiteur utilise le bouton d'appel d'un agent vocal.
- Un agent public peut être sollicité par quiconque possède son id. Gardez des
  garde-fous stricts dans le prompt et surveillez la consommation sous
  [Utilisation et historique](/fr/account/usage-and-history).

## Vérifier

- Ouvrez la page dans une fenêtre de navigation privée. Le lanceur apparaît avec
  votre **Bubble Text** (texte de la bulle) ; cliquez dessus, envoyez un
  message, et l'échange s'affiche sous **Conversations** ou **Call Logs**
  (journaux d'appels) en quelques secondes.

## Dépannage

- **Rien n'apparaît sur la page.** La balise script a été collée dans un autre
  élément qui la masque, ou une politique de sécurité du contenu bloque
  `unpkg.com`. Autorisez cet hôte dans `script-src`.
- **Le lanceur apparaît mais les réponses échouent.** **Agent Visibility** est
  désactivée. Activez-la sous **Share agent** dans l'en-tête du workspace.
- **Le navigateur refuse le script.** Le hachage `integrity` ne correspond plus,
  car la version de l'URL a été modifiée. Copiez l'extrait de nouveau.

## Voir aussi

- [Designer de widget](/fr/deploy/widget-and-embed/widget-designer)
- [Lien de partage](/fr/deploy/widget-and-embed/share-link)
- [Conversations](/fr/operate/conversations)