Widgets de site web
Intégrez votre agent vocal IA sur n'importe quel site web pour que les visiteurs puissent démarrer une conversation vocale directement depuis le navigateur. L'onglet Widgets fournit les codes d'intégration, les options de personnalisation et les paramètres de sécurité de domaine.
Le widget de rappel fonctionne très différemment des widgets de cette page — au lieu de démarrer un appel vocal dans le navigateur, il collecte le numéro de téléphone du visiteur et fait que votre agent le rappelle. Voir la page dédiée Widget de rappel.
Types de widgets
Hanc.AI propose quatre types de widgets dans le navigateur, plus un widget de rappel distinct pour les rappels téléphoniques :
| Widget | Nom de balise | Description | Idéal pour |
|---|---|---|---|
| Widget Floating | hanc-ai-floating-call | Bouton orbe qui flotte au-dessus de votre page | Appel à l'action toujours visible |
| Widget Pill | hanc-ai-pill-call | Bouton compact en forme de pilule placé en ligne dans votre contenu | Empreinte minimale dans une mise en page existante |
| Widget Pill Floating | hanc-ai-pill-float-call | Même forme compacte que Pill, mais flotte avec la page comme le widget Floating | Quand vous voulez une esthétique pill qui suit le visiteur lors du défilement |
| Widget Inline | hanc-ai-inline-call | Bouton d'appel pleine taille intégré dans le contenu de la page | Sections dédiées « Parlez-nous » |
| Widget de rappel | hanc-ai-callback | Formulaire de numéro de téléphone ; l'agent rappelle le visiteur | Pages de génération de leads, pages d'atterrissage à forte intention — voir Widget de rappel |
Attributs communs
Tous les types de widgets supportent ces attributs principaux :
| Attribut | Requis | Description | Par défaut |
|---|---|---|---|
agent-id | Oui | L'identifiant unique de votre agent | — |
voice-service-url | Non | Remplace l'URL du service vocal | Détecté automatiquement |
api-base-url | Non | Remplace l'URL de base de l'API | Détecté automatiquement |
Attributs d'affichage
| Attribut | Description | Valeurs | Par défaut |
|---|---|---|---|
position | Position du widget sur la page | bottom-right, bottom-left, top-right, top-left, static | bottom-right |
size | Taille du widget en pixels | Nombre | 120 |
theme | Nom du thème de couleurs | Voir Thèmes de couleurs | default |
Attributs de texte de bouton
| Attribut | Description | Par défaut |
|---|---|---|
button-start-text | Texte affiché sur le bouton inactif | "Call" |
button-connecting-text | Texte affiché pendant la connexion | "Connecting..." |
button-end-text | Texte affiché pendant un appel actif | — |
Attributs des conditions
| Attribut | Description | Par défaut |
|---|---|---|
terms-enabled | Activer le dialogue de consentement avant l'appel | false |
terms-content | Texte de consentement formaté en Markdown | "" |
terms-url | Lien vers votre page Conditions générales | "https://hanc.ai/terms" |
privacy-url | Lien vers votre page Politique de confidentialité | "https://hanc.ai/privacy" |
Les attributs de conditions définis sur l'élément HTML sont remplacés par les paramètres de widget de l'agent récupérés depuis l'API, sauf si skip-fetch est défini à true.
Attributs sonores
| Attribut | Description | Par défaut |
|---|---|---|
sound-enabled | Activer les sons de début/fin d'appel | true |
sound-volume | Volume des effets sonores | 0.25 |
sound-preset | Identifiant du preset sonore | "1" |
Thèmes de couleurs
Personnalisez l'apparence du widget avec 11 thèmes de couleurs intégrés :
| Thème | Valeur |
|---|---|
| Default | default |
| Purple | purple |
| Blue | blue |
| Cyan | cyan |
| Emerald | emerald |
| Amber | amber |
| Tangerine | tangerine |
| Rose | rose |
| Ember | ember |
| Black | black |
| White | white |
Chaque thème a des variantes sombre et claire. Définissez le thème via l'attribut theme dans le code d'intégration, ou configurez-le dans les paramètres de widget de l'agent.
Exemples d'intégration
Widget Floating
<hanc-ai-floating-call agent-id="YOUR_AGENT_ID"></hanc-ai-floating-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Widget Floating avec thème et position
<hanc-ai-floating-call
agent-id="YOUR_AGENT_ID"
theme="emerald"
position="bottom-left"
size="140"
></hanc-ai-floating-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Widget Pill
<hanc-ai-pill-call agent-id="YOUR_AGENT_ID"></hanc-ai-pill-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Widget Inline
<hanc-ai-inline-call agent-id="YOUR_AGENT_ID"></hanc-ai-inline-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
L'URL du script ci-dessus charge toujours le widget publié le plus récent — votre site bénéficie automatiquement des améliorations. Si vous devez verrouiller une version connue, épinglez explicitement avec https://unpkg.com/hanc-webrtc-widgets@1.4.0 (substituez la version voulue). Le tag @latest est le défaut quand aucune version n'est spécifiée.
Événements du widget
Les widgets émettent des événements que vous pouvez écouter en JavaScript :
| Événement | Description |
|---|---|
status-changed | Émis quand le statut de l'appel change |
connecting | L'appel est en cours d'établissement |
connected | L'appel est actif |
idle | Aucun appel actif |
error | Une erreur s'est produite |
audio-track | Piste audio distante reçue (pour visualisation) |
local-audio-track | Piste audio du microphone local (pour visualisation) |
microphone-enabled | Le microphone a été activé |
microphone-disabled | Le microphone a été désactivé |
call-start | Émis quand un appel démarre avec succès |
call-end | Émis quand l'appel se termine |
Exemple : écoute des événements
const widget = document.querySelector('hanc-ai-floating-call');
widget.addEventListener('call-start', () => {
console.log('Call started');
});
widget.addEventListener('call-end', () => {
console.log('Call ended');
});
Exigences techniques
Les widgets nécessitent que le navigateur du visiteur supporte :
- WebGL 2.0 — pour le rendu
- Web Audio API — pour le traitement audio
- WebRTC — pour la communication vocale en temps réel
Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) supportent ces technologies.
Restrictions de domaine
Contrôlez quels sites web peuvent intégrer votre widget d'agent.
Domaines toujours autorisés
Les domaines suivants sont toujours autorisés indépendamment de la configuration :
hanc.ai(et sous-domaines)hanc.me(et sous-domaines)localhost
Autoriser tous les domaines
Par défaut, votre widget peut être intégré sur n'importe quel site web. Basculez « Autoriser tous les domaines » dans les paramètres du widget pour le restreindre.
Restreindre à des domaines spécifiques
Quand restreint, ajoutez chaque domaine à autoriser :
- Saisissez les noms de domaine sans
https://(par ex.example.com) - Les sous-domaines nécessitent des entrées séparées (par ex.
www.example.com,shop.example.com) - Les ports peuvent être spécifiés (par ex.
localhost:3000) - Maximum 50 domaines peuvent être autorisés
Pour les agents en production, restreignez les widgets à vos propres domaines pour empêcher les intégrations non autorisées.
Conditions générales
Activez un dialogue de consentement avant que les appelants puissent démarrer une conversation.
Configuration
| Paramètre | Description |
|---|---|
| Activer les conditions | Bascule du dialogue de conditions on/off |
| Contenu des conditions | Texte de consentement formaté en Markdown affiché aux utilisateurs (max 5 000 caractères) |
| URL des conditions | Lien vers votre page complète Conditions générales |
| URL de confidentialité | Lien vers votre page Politique de confidentialité |
Lorsqu'activé :
- Les utilisateurs voient un dialogue de consentement avant de démarrer un appel
- Ils doivent cliquer « Accepter » pour continuer
- Le consentement est stocké localement dans le navigateur
- Le bouton Réinitialiser le consentement efface le consentement stocké pour les tests
Formatage du contenu
Le contenu des conditions supporte le formatage Markdown :
- Utilisez
####pour les titres - Utilisez
**gras**pour l'emphase - Utilisez des sauts de ligne pour la lisibilité
Voir aussi
- Widget de rappel — Rappels téléphoniques pour les visiteurs qui préfèrent ne pas parler dans le navigateur
- Vue d'ensemble des agents vocaux IA
- Paramètres — Paramètres de l'agent dont la configuration du widget
- Intégrations — Clés API et configuration de numéro de téléphone