Embed et widget

Intégrez votre agent IA directement sur des sites Web externes grâce à un widget de chat personnalisable. Offrez à vos clients, visiteurs ou utilisateurs un accès instantané à votre agent sans qu'ils aient besoin d'un compte Swiftask, le tout grâce à un simple extrait de code.

La fonctionnalité widget vous permet de déployer votre agent sous forme d'interface de chat en direct sur n'importe quel site web, transformant ainsi votre assistant IA spécialisé en un outil orienté client pour l'assistance, la génération de prospects ou l'aide automatisée.

Présentation

La fonctionnalité widget transforme votre agent Swiftask en une interface de chat intégrable qui apparaît sur des sites Web externes. Les visiteurs peuvent interagir avec votre agent via une bulle de chat flottante qui s'ouvre dans une fenêtre de conversation complète.

Vous contrôlez tous les aspects de l'apparence et du comportement du widget, des couleurs et icônes aux messages d'accueil et limites de débit. Le widget s'intègre parfaitement à votre site web et conserve toutes les capacités de votre agent, y compris l'accès à la base de connaissances et les compétences configurées.

Prérequis

Pour intégrer un agent sous forme de widget, vous avez besoin :

• Un compte Swiftask (inscrivez-vous sur swiftask.ai)

• Un agent existant avec des objectifs et des instructions configurés

• Une autorisation pour créer ou modifier des agents dans votre espace de travail

• Accès au site web sur lequel vous souhaitez intégrer le widget (possibilité d'ajouter du code HTML/JavaScript)

Guide étape par étape

1. Ouvrez votre agent pour le modifier

Accédez à la section Agents dans la barre latérale gauche pour accéder à votre bibliothèque d'agents.

Recherchez l'agent auquel vous souhaitez ajouter un widget et cliquez sur l'icône en forme de crayon (modifier) sur la fiche de l'agent.

2. Accédez à la section Widget

Dans la page de configuration de l'agent, regardez dans la barre latérale gauche et cliquez sur Widget sous « Plus d'options ».

La page de configuration du widget s'ouvre, affichant les options de personnalisation à gauche et un aperçu en direct de votre widget à droite.

3. Activez le widget

Activez le widget en basant le curseur sur ON en haut de la page de configuration.

Une fois activé, votre widget peut être intégré. Vous pouvez le désactiver à tout moment pour empêcher tout accès externe.

4. Personnalisez l'apparence du widget

Configurez l'apparence et le comportement de votre widget :

Nom de l'agent sur le widget

Entrez le nom affiché dans l'en-tête du chat. Il s'agit du nom que les visiteurs voient lorsqu'ils ouvrent le widget.

Sous-titre

Ajoutez une brève description qui apparaîtra sous le nom de l'agent (par exemple, « Notre bot répond instantanément »).

Espace réservé à la saisie

Personnalisez le texte du champ de saisie du message (par exemple, « Tapez un message... »).

Message de bienvenue

Rédigez le premier message que les visiteurs voient lorsqu'ils ouvrent le widget. Cela donne le ton et explique en quoi votre agent peut les aider (par exemple, « Bonjour ! Comment puis-je vous aider aujourd'hui ? »).

Couleur d'accent

Sélectionnez une couleur qui correspond à votre marque. Cette couleur apparaîtra dans l'en-tête du widget, les boutons et les éléments interactifs. Choisissez parmi les couleurs prédéfinies ou utilisez un sélecteur de couleurs personnalisé.

Icône du widget

Choisissez une icône qui représente votre agent. Sélectionnez l'un des avatars de robot disponibles ou téléchargez une icône personnalisée.

Position du widget

Choisissez l'emplacement du widget sur votre site web :

• À gauche : la bulle du widget apparaît dans le coin inférieur gauche

• À droite : la bulle du widget apparaît dans le coin inférieur droit

5. Configurez les questions de démarrage (facultatif)

Activez l'option Afficher les questions de démarrage flottantes pour afficher les suggestions lorsque les visiteurs ouvrent le widget pour la première fois.

Cliquez sur Ajouter une nouvelle question de démarrage pour créer des questions pré-rédigées sur lesquelles les visiteurs peuvent cliquer pour démarrer instantanément une conversation. Cela permet de guider les utilisateurs et de réduire les frictions.

6. Configurer les options avancées

Développez les options avancées pour accéder à des paramètres supplémentaires :

Limite du nombre de messages

Limitez le nombre de messages envoyés à partir d'un appareil sur le widget de l'agent. Définissez :

• Limiter à : Nombre de messages autorisés

• Messages toutes les : Intervalle en secondes

Cela permet d'éviter les abus et de contrôler les coûts. La limite s'applique uniquement à votre widget, et non à votre utilisation interne de Swiftask.

Activer la réception de fichiers

Activez cette option pour permettre aux utilisateurs d'envoyer des fichiers à partir du widget (taille maximale : 5 Mo). Désactivez cette option pour empêcher le téléchargement de fichiers.

Masquer la marque Swiftask

Activez cette option pour supprimer le texte « Powered by Swiftask » du pied de page du widget. Cela crée une expérience entièrement en marque blanche.

Le widget est ouvert par défaut

Activez cette option pour ouvrir automatiquement le widget lorsque les visiteurs arrivent sur votre page. Désactivez cette option pour le garder fermé jusqu'à ce que l'utilisateur clique dessus.

Message de bienvenue

Activez cette option pour afficher une bulle de message de bienvenue flottante à côté de l'icône du widget avant que les visiteurs ne l'ouvrent.

7. Obtenir le code d'intégration

Faites défiler vers le bas jusqu'à la section Code d'intégration. Vous verrez deux options d'intégration :

Intégrer des bulles de chat

Cliquez sur l'icône + pour développer cette section et copiez le snippet de code. Cela permet d'intégrer une bulle de chat flottante sur laquelle les visiteurs peuvent cliquer pour ouvrir le widget complet.

Collez ce code avant la balise de fermeture </body> dans le code HTML de votre site web.

Intégrer directement l'iframe

Cliquez sur l'icône + pour développer cette section et copiez le code iframe. Cela permet d'intégrer l'interface de chat directement dans votre page sans bulle flottante.

Utilisez cette option lorsque vous souhaitez que le chat apparaisse en ligne dans la mise en page de votre page (par exemple, dans une section dédiée à l'assistance).

8. Testez votre widget

Après avoir intégré le code à votre site Web :

1. Rendez-vous sur votre site web dans un navigateur

2. Recherchez la bulle du widget à l'emplacement que vous avez configuré

3. Cliquez sur la bulle pour ouvrir l'interface de chat

4. Envoyez un message test pour vérifier que l'agent répond correctement

5. Vérifiez que les couleurs, la marque et les messages de bienvenue s'affichent comme prévu

Si quelque chose ne semble pas correct, retournez à la page de configuration du widget dans Swiftask et ajustez vos paramètres.

Cas d'utilisation pratiques

Assistance clientèle sur votre site web

Intégrez un agent d'assistance à votre site web pour répondre 24 heures sur 24 et 7 jours sur 7 aux questions sur les produits, aux problèmes de dépannage et aux demandes courantes. Connectez l'agent à la documentation de votre produit et à la FAQ afin qu'il fournisse des réponses précises et instantanées.

Génération et qualification de prospects

Déployez un agent commercial qui engage les visiteurs, qualifie les prospects et recueille leurs coordonnées. Configurez des questions d'entrée en matière telles que « Que recherchez-vous ? » ou « Parlez-nous de votre projet » pour orienter les conversations.

Assistant RH sur votre page Carrières

Ajoutez un agent RH à votre page Carrières pour répondre aux questions sur les postes vacants, la culture d'entreprise et les processus de candidature. Allégez la charge de travail de votre équipe RH tout en fournissant des réponses instantanées aux candidats.

Outil interne pour votre équipe

Intégrez un agent spécialisé à votre portail interne ou à votre intranet pour permettre à vos employés d'accéder instantanément aux politiques de l'entreprise, à l'assistance informatique ou à l'automatisation des flux de travail sans quitter leur espace de travail.

Conseils et bonnes pratiques

Rédigez un message de bienvenue clair

Votre message de bienvenue est la première chose que voient les visiteurs. Rendez-le convivial, précis et orienté vers l'action. Au lieu de « Bonjour », essayez « Salut ! Je peux t'aider à trouver des produits, répondre à tes questions ou te mettre en relation avec le support. Que puis-je faire pour toi ? »

Utilisez des questions d'introduction pour guider les utilisateurs

Les questions de démarrage réduisent les frictions et montrent aux visiteurs ce que votre agent peut faire. Choisissez 3 ou 4 questions courantes qui représentent les principaux cas d'utilisation de votre agent.

Définissez des limites de fréquence pour contrôler les coûts

Les interactions avec les widgets consomment des crédits de votre espace de travail. Définissez des limites raisonnables (par exemple, 5 messages toutes les 240 secondes) pour éviter les abus tout en permettant aux utilisateurs authentiques d'obtenir de l'aide.

Testez sur plusieurs appareils

Vérifiez l'apparence et le comportement de votre widget sur les ordinateurs de bureau, les tablettes et les appareils mobiles. Le widget doit être réactif et facile à utiliser sur toutes les tailles d'écran.

Surveillez l'utilisation et affinez

Suivez la manière dont les visiteurs interagissent avec votre widget. Si les utilisateurs posent des questions auxquelles votre agent ne peut pas répondre, ajoutez ce contenu à la base de connaissances de votre agent ou affinez ses instructions.

Ressources supplémentaires

• Créer un agent IA étape par étape – Créez et configurez votre premier agent

• Définir des objectifs et des instructions – Définissez le rôle et le comportement de votre agent

• Sources (base de connaissances) – Connectez des documents à votre agent

• Compétences (outils IA) – Ajoutez des fonctionnalités telles que l'exportation de fichiers et l'envoi d'e-mails

• Partager un agent – Donnez à vos collègues l'accès à votre agent

Prêt à déployer votre agent sur votre site web ? Ouvrez votre agent, cliquez sur l'icône en forme de crayon pour le modifier, accédez aux paramètres du widget, personnalisez son apparence, copiez le code d'intégration et collez-le dans votre site web. Votre agent sera opérationnel en quelques minutes.