Intégration & widget (Bulle de chat)

Aperçu

La fonctionnalité de bulle de chat transforme votre agent Swiftask en un widget intégrable sur site web. Les visiteurs peuvent ouvrir un lanceur flottant dans le coin de votre page pour engager des interactions conversationnelles complètes.

Vous pouvez personnaliser l'image de marque du widget, contrôler les permissions de téléchargement de fichiers, gérer la visibilité des compétences et restreindre les panneaux d'historique de chat. De plus, des options de gouvernance intégrées vous permettent d'attribuer la responsabilité de facturation et de configurer des alertes automatisées de seuil de crédits.

Prérequis

Avant de configurer et déployer une bulle de chat, assurez-vous de disposer de :

• Un compte Swiftask actif avec les permissions pour modifier les agents dans votre espace de travail.

• Un agent configuré avec des instructions, des paramètres de prompt et des bases de connaissances ou compétences optionnelles.

• Un accès au code source ou au CMS de votre site web pour coller l'extrait d'intégration JavaScript.

Guide étape par étape

1. Ouvrir les paramètres de déploiement de l'agent

Naviguez vers Agents dans la barre latérale gauche et sélectionnez l'agent que vous souhaitez intégrer.

Cliquez sur l'icône stylo (modifier) sur la carte de l'agent pour accéder à sa page de configuration.

Dans la barre latérale gauche, sous la section Deployment, cliquez sur Chat bubble (Widget).

2. Déverrouiller le mode public

L'intégration externe est verrouillée par défaut. Cliquez sur le bouton Enable public mode dans la carte centrale ou activez le commutateur dans le coin supérieur droit.

Cela déverrouille l'accès externe et active les quatre onglets de configuration : Integration, Appearance, Cost Control et Credit monitoring.

3. Copier le script d'intégration

Cliquez sur l'onglet Integration.

Sous la section Basic integration, cliquez sur l'icône de copie sur la carte de l'extrait de script.

Collez le code copié directement avant la balise fermante </body> dans le HTML de votre site web.

4. Personnaliser l'apparence du widget

Cliquez sur l'onglet Appearance pour adapter la bulle de chat à l'identité de votre marque :

• Agent name on the widget : Saisissez le nom d'affichage que les visiteurs verront dans l'en-tête de la fenêtre de chat.

• Welcome message : Saisissez le message d'accueil affiché lorsque les visiteurs interagissent pour la première fois avec le widget.

• Accent color : Sélectionnez une couleur prédéfinie ou cliquez sur Choose a color pour choisir une couleur d'accent personnalisée.

• Widget Icon : Sélectionnez un avatar ou cliquez sur Tap to change pour mettre à jour l'icône affichée sur la bulle du lanceur.

• Widget position : Sélectionnez Left ou Right pour choisir le coin inférieur où la bulle s'ancre.

5. Configurer les options avancées

Dans l'onglet Appearance, localisez la carte Advanced options pour affiner l'expérience utilisateur :

• Enable file reception : Activez pour permettre aux visiteurs d'envoyer des pièces jointes via le widget (taille maximale de fichier : 5 Mo).

• Widget is open by default : Activez pour développer automatiquement la fenêtre de chat au chargement de la page.

• Welcome Message : Activez pour afficher une bulle de message flottante à côté du lanceur de widget fermé.

• Hide chat history sidebar : Activez pour afficher uniquement le fil de conversation et masquer le panneau d'historique des sessions.

• Skills display in chat : Choisissez comment les blocs de compétences, les appels d'outils et les processus de réflexion apparaissent dans les conversations clients (par exemple, Show everything).

6. Configurer la propriété et le contrôle des coûts

Cliquez sur l'onglet Cost Control pour établir les règles de facturation et de responsabilité :

• Current owner : Affiche le gestionnaire de l'agent. Transférez la propriété lorsqu'un membre de l'équipe quitte l'entreprise pour éviter toute interruption de service.

• Credit consumption : Sélectionnez le compte de l'espace de travail responsable du financement des crédits IA consommés par les visiteurs externes.

• Cost resolution rules : Swiftask applique les frais selon une hiérarchie stricte : 1. Consommateur de crédits désigné, 2. Créateur de l'agent, 3. Propriétaire délégué, 4. Propriétaire de l'espace de travail. Si l'utilisateur principal devient inactif, les frais sont automatiquement reportés sur le membre éligible suivant.

7. Configurer la surveillance du seuil de crédits

Cliquez sur l'onglet Credit monitoring pour éviter les interruptions inattendues :

• Activez Enable credit threshold alerts pour activer les avertissements d'utilisation.

• Credit Threshold : Spécifiez le seuil limite d'utilisation (tel que 1000000) qui déclenche les notifications.

• Users to notify : Recherchez et assignez les membres de l'équipe qui doivent recevoir des alertes lorsque les seuils sont atteints ou en cas d'erreurs.

• Notification Logs : Consultez les messages d'avertissement automatisés passés et les historiques d'événements pour cet agent.

Cas d'usage pratiques

Support client et automatisation des FAQ Intégrez le widget sur vos pages de documentation ou de support. Connectez votre base de connaissances pour que l'agent puisse résoudre les questions courantes et dépanner les problèmes 24h/24 et 7j/7 sans intervention humaine.

Qualification des prospects sur le site web Placez le widget sur les pages de destination marketing. Configurez un message d'accueil invitant à saluer les prospects, répondre aux questions sur les produits et collecter les coordonnées.

Assistant pour portail interne d'équipe Intégrez la bulle de chat sur votre intranet ou wiki d'entreprise. Les membres de l'équipe peuvent consulter les politiques internes, les directives RH et les procédures opérationnelles directement depuis leur navigateur.

Conseils et bonnes pratiques

• Rédigez un message d'accueil actionnable : Fournissez des indications claires sur ce que l'agent peut faire, par exemple demander aux visiteurs d'indiquer leur question produit ou leur référence de commande.

• Définissez des seuils de crédits proactifs : Activez la surveillance des crédits avec une marge de sécurité suffisante pour que votre équipe ait le temps d'allouer des crédits supplémentaires avant que le service ne soit suspendu.

• Simplifiez l'interface pour les visiteurs publics : Activez Hide chat history sidebar et ajustez Skills display in chat pour offrir une interface épurée et sans distraction aux clients externes.

• Désignez un compte de crédits partagé : Acheminez la consommation du widget vers un compte d'espace de travail dédié pour suivre les dépenses orientées client séparément de l'utilisation personnelle des agents.

Dépannage

• Le widget ne s'affiche pas sur le site web : Confirmez que Enable public mode est activé et vérifiez que la balise <script> est positionnée juste avant la balise fermante </body> dans votre HTML.

• Les visiteurs ne peuvent pas télécharger de fichiers : Assurez-vous que Enable file reception est activé dans Advanced options et que les fichiers téléchargés ne dépassent pas la limite de 5 Mo.

• L'utilisation s'arrête de façon inattendue : Vérifiez dans Cost Control et Credit monitoring que le compte consommateur de crédits assigné reste un membre actif de l'espace de travail avec des crédits disponibles.

Ressources supplémentaires

• Agent as app – Déployez votre agent en tant qu'application web autonome et indépendante.

• Create AI Agent step by step – Apprenez à configurer les instructions, les sources de connaissances et les compétences.

• Workspace administration – Gérez les membres de l'espace de travail, les rôles de facturation et les allocations de crédits.