Intégrer le widget à votre site
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
Concevoir et enregistrer
Mettez en forme le widget dans le designer puis choisissez Save (enregistrer).
Copier l'extrait
Choisissez Embed Code, puis Copy (copier) dans la boîte de dialogue Embed Code.
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 :
<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.
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.
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 pour un agent textuel, et sous
Journaux d’appels avec
WEBcomme 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.
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 dansscript-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
integrityne correspond plus, car la version de l’URL a été modifiée. Copiez l’extrait de nouveau.