Code du widget de chat IA : ajoutez un assistant de support à n’importe quel site
Copiez une balise script et installez sur votre site un assistant de chat IA qui répond en direct. Ce guide présente le code, ses options et les vérifications avant la mise en ligne.
Publié:
Un widget de chat IA répond à vos visiteurs sur la page qu’ils sont déjà en train de lire. Avec api14, toute l’intégration tient en une seule balise script : vous concevez le widget dans le tableau de bord, copiez le code et le collez dans votre HTML. Aucun SDK à installer, aucun code serveur à écrire.
Ce que fait le widget de chat
Le widget de chat est une petite fenêtre de conversation qui diffuse en direct les réponses du modèle de votre choix. Il suit des instructions privées que vous rédigez et que les visiteurs ne voient jamais : il peut donc jouer le rôle d’agent de support, d’assistant commercial ou de guide pour votre documentation. Les réponses prennent en charge une mise en forme simple (paragraphes, listes, gras, code et liens), un bouton Arrêter interrompt une réponse trop longue, et la conversation est conservée lorsque le visiteur passe d’une page à l’autre dans le même onglet.
Le code du widget
Une fois le widget enregistré dans Widgets, l’éditeur affiche son code d’intégration :
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Placez la balise dans <body>, à l’endroit où le chat doit apparaître. Deux attributs facultatifs modifient l’emplacement et l’affichage :
| Attribut | Rôle |
|---|---|
data-target | Sélecteur CSS de l’élément dans lequel afficher le widget, par exemple #support. |
data-height | Hauteur d’un widget intégré à la page, par exemple 520px. Le chat fait 480px par défaut. |
Si vous préférez un lanceur dans un coin de l’écran, choisissez l’emplacement Bouton flottant dans l’éditeur. Le code reste le même.
Quatre étapes pour un assistant de chat en ligne
- Choisissez un modèle. Tous les modèles de chat du catalogue conviennent. Le sélecteur affiche le prix de chaque modèle : vous pouvez commencer avec un modèle rapide et économique, puis en changer plus tard sans toucher à votre site.
- Choisissez une clé API. Chaque widget fonctionne avec l’une de vos clés API. Sélectionnez une clé existante ou utilisez la dernière option de la liste, Créer une nouvelle clé API, pour en créer une réservée à ce widget. Les limites de la clé s’appliquent au widget, et la clé elle-même n’atteint jamais le navigateur.
- Rédigez les instructions et les textes. Définissez le titre, le message d’accueil, le texte du champ et le libellé du bouton. Ajoutez des instructions privées qui décrivent votre produit et le ton souhaité.
- Autorisez vos domaines. Dans Paramètres, Sites du widget, indiquez les sites sur lesquels le widget peut fonctionner. Les requêtes provenant de tout autre site sont refusées.
Pourquoi il ne casse pas votre page
Le widget s’affiche dans un Shadow DOM isolé. Votre CSS ne déborde pas dans la fenêtre de chat, et le widget ne modifie pas le style de votre page. Il se charge de manière asynchrone et ne bloque donc pas l’affichage du reste de votre contenu.
Avant la mise en ligne
- Ouvrez l’aperçu dans l’éditeur et posez les questions que vos clients posent réellement. L’aperçu exécute pour de vrai vos réglages non enregistrés.
- Définissez une limite de dépense quotidienne pour le widget, afin qu’une journée chargée ne vous réserve pas de surprise.
- Vérifiez que votre solde couvre le trafic attendu. Les requêtes des visiteurs sont débitées de votre solde en USD au prix normal du modèle.
Envie d’essayer ? Concevez un widget de chat sans compte sur la page des widgets, puis consultez la référence complète dans la documentation des widgets.