Widget Bulle

Intégrez l'Agent sous forme de widget bulle sur votre site web professionnel. Les utilisateurs peuvent cliquer sur le widget bulle pour ouvrir une fenêtre de chat, offrant des services tels que le support client en ligne, la consultation avant-vente et la génération de leads.

Comment intégrer sur un site web

1. Rendez-vous sur Agent-Intégration-Widget Bulle et copiez le "Code d'Intégration".
   
2. Collez le code dans la balise head de la page HTML de votre site web.
3. Publiez votre site web pour finaliser l'intégration de l'Agent IA et commencer la conversation.
4. Si vous souhaitez personnaliser l'interface et le logo, contrôler la fréquence des messages utilisateurs ou afficher des messages proactifs pour augmenter le taux d'interaction, vous pouvez accéder aux paramètres avancés.

Personnalisation de l'interface

Cette fonctionnalité permet de configurer la taille, la position, la couleur, l'icône, le logo et le nom du widget bulle.

• Surnom du Widget : Permet de personnaliser le nom.
• Description du Widget : Permet de personnaliser la description.
• Paramètres du Thème : Permet de personnaliser la couleur du thème du widget, l'icône de la bulle et l'apparence de l'Agent.
• Personnalisation de la Bulle : Permet de personnaliser la position d'affichage et la taille de la bulle selon les besoins de l'entreprise.
• Personnalisation de la Fenêtre de Chat : Permet de personnaliser la largeur et la hauteur de la fenêtre de chat selon les besoins de l'entreprise (pour garantir la compatibilité avec les petits écrans, il n'est pas recommandé de définir des valeurs trop grandes).
• LOGO de l'Agent :
  • LOGO de la Plateforme : Affiche le logo GPTBots.
  • LOGO de l'Organisation : Affiche le logo personnalisé téléchargé par l'entreprise ici. Tous les Agents de l'organisation utilisent le même logo d'organisation.
  • LOGO Personnalisé : Affiche le logo personnalisé téléchargé. Chaque Agent peut utiliser un logo différent. Cette fonctionnalité est un privilège avancé et nécessite de contacter le service commercial pour l'activer.
  • Aucun LOGO : Le composant de la fenêtre de chat n'affiche aucun logo.

Messages Proactifs

Les messages proactifs peuvent être affichés sous forme de cartes ou de messages d'invite pour attirer l'attention des utilisateurs et les guider vers une conversation ou une capture de lead avant qu'ils ne cliquent sur le widget bulle. Il existe deux styles de messages proactifs : "Messages d'Invite" et "Messages Cartes".

Comment créer des Messages d'Invite

• Contenu du Message : Permet de définir jusqu'à 3 contenus, qui seront affichés dynamiquement de bas en haut sur la page une fois activés.
• Règles d'Affichage : Permet de définir jusqu'à 3 conditions de déclenchement, affichant les messages proactifs lorsque les conditions d'environnement utilisateur sont remplies.
  • Conditions de Déclenchement : Permet de juger selon le navigateur de l'utilisateur/langue du navigateur/fuseau horaire/pays ou région/système d'exploitation/UTM, etc.
  • Expressions : Propose des expressions de calcul telles que =/≠/intervalle/contient/ne contient pas/a une valeur/pas de valeur pour différents types de valeurs comme nombre/chaîne.
  • ET & OU : Permet de définir que toutes les conditions doivent être remplies ou qu'une seule suffit pour déclencher le message proactif.
  • Événements : Permet de déclencher les messages proactifs immédiatement ou après un délai de N secondes.
• Contrôle de la Fréquence d'Affichage des Messages : Pour éviter que les messages proactifs fréquents ne dérangent les utilisateurs, permet de gérer la fréquence d'affichage en définissant le nombre maximal d'affichages par "site/page" par "jour/semaine/mois".

Comment créer des Messages Cartes

Après avoir configuré le contenu du message carte, les autres options de configuration sont identiques à ci-dessus.

• Téléchargement d'Image : Permet de télécharger des images personnalisées. Il est recommandé de contrôler la taille de l'image pour éviter les temps de chargement longs.
• Titre/Contenu : Les utilisateurs peuvent saisir du texte personnalisé.

Comment activer les Messages Proactifs

1. Dans la liste des messages proactifs, sélectionnez le message cible et cliquez sur le bouton d'activation.
2. Rendez-vous sur la page du site pour visualiser le message proactif.
3. Cliquez sur le message proactif pour ouvrir la fenêtre de chat.

Sécurité et Contrôle de la Fréquence

• Liste Blanche de Domaines : Définit la plage de domaines où le "code d'intégration du widget bulle" peut être intégré. Si désactivé, cela est considéré comme sans restriction.
  

• Limite de Consommation de Crédits : Définit la limite de consommation de crédits pour le "widget bulle". Si désactivé, cela est considéré comme sans restriction.
  

  • Jusqu'à 3 règles peuvent être définies.
  • Permet de définir la limite totale de consommation de crédits du widget bulle par "jour/semaine/mois".

• Limite de Consommation Utilisateur : Définit la limite de consommation de crédits pour chaque utilisateur. Si désactivé, cela est considéré comme sans restriction.
  

  • Jusqu'à 3 règles peuvent être définies.
  • Permet de définir la limite de consommation de crédits pour chaque utilisateur par "jour/semaine/mois".

• Limite de Fréquence Utilisateur : Définit la limite de fréquence d'envoi de messages pour chaque utilisateur. Si désactivé, cela est considéré comme sans restriction.
  

  • Jusqu'à 3 règles peuvent être définies.
  • Permet de définir le nombre maximal de messages envoyés par chaque utilisateur par période de temps.
  • En cas de dépassement, l'Agent ne répondra plus et enverra automatiquement un message prédéfini.

Callback d'Événement

Comment transmettre les événements de comportement utilisateur du widget bulle à GA4 ou à des systèmes tiers

1. Créez un événement de callback GA4, obtenez le Secret de l'API Measurement Protocol et l'ID de Mesure du projet cible GA4, puis renseignez-les.

2. Créez un événement de callback Webhook, sélectionnez l'événement de callback requis selon les indications de la page, puis renseignez l'URL et les informations d'authentification.
   

3. Activez le callback dans la liste des callbacks d'événements et vérifiez si les données sont correctes dans l'adresse GA4 ou Webhook. Une fois les données stockées avec succès, vous pouvez analyser les données utilisateur.

Utilisation Avancée

Définir l'ID Utilisateur

Permet aux développeurs d'Agent de définir l'ID d'identité utilisateur.

                      
                      window.ChatBot.setUserId("your_user_id")

                    

Définir l'E-mail Utilisateur

Permet aux développeurs d'Agent de définir l'e-mail utilisateur. Lorsque l'utilisateur demande un service manuel, il peut ignorer l'étape de saisie de l'e-mail. Si non défini, l'utilisateur devra saisir son adresse e-mail pour demander un service manuel.

                      
                      window.ChatBot.setEmail("somebody@mail.com")

                    

Définir des Variables Personnalisées

Les développeurs peuvent définir des valeurs temporaires pour des variables personnalisées valables pendant la conversation en cours. Cela permet une logique et des réponses dynamiques de l'Agent.

                      
                      window.ChatBot.setCustomVariables({"var_key1": "value1", "var_key2": "value2"})

                    

Affichage Automatique de la Fenêtre de Chat

Permet aux développeurs d'Agent de définir l'affichage automatique de la fenêtre de chat. Lorsque les utilisateurs n'ont pas cliqué sur le composant bulle, la fenêtre de chat s'affichera automatiquement. Lorsque les utilisateurs cliquent sur le composant bulle, la fenêtre de chat se fermera.

                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js" onload="ChatBot.show()"></script>

                    

Passer l'État Par Défaut

Permet aux développeurs d'Agent de passer l'état par défaut de la fenêtre de chat pour afficher en priorité les messages de bienvenue et les questions prédéfinies.

                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js?skipWelcome=1"></script>

                    

Format des Données de Callback d'Événement

Les événements et attributs d'événement du widget bulle transmis via Webhook ou GA4 utilisent le format de données suivant. Veuillez les analyser et les stocker en conséquence.

                      
                      {
  "client_id": "",  //De préférence obtenu via la méthode gtag de GA4. Si non disponible, généré par GPTBots.
  "user_id": "",  //UserId défini par le développeur, null si non défini.
  "event_name": "Afficher le widget bulle",     //Nom de l'événement
  "event_params": {  
      "key1": "abc",  //Nom de l'attribut d'événement : valeur d'attribut (chaîne)
      "key2": 123     //Nom de l'attribut d'événement : valeur d'attribut (nombre)
    }
}

                    

Intégration du Widget Bulle dans Shopify

1. Copiez le code d'intégration du widget bulle.
   

2. Rendez-vous dans le panneau d'administration de la boutique Shopify, trouvez le modèle utilisé, puis cliquez sur "Modifier le code".
   

3. Trouvez le fichier "theme.liquid", collez le code d'intégration dans la balise <head>, puis enregistrez.
   

4. Le widget bulle apparaîtra en bas à droite du site de votre boutique pour permettre aux visiteurs de consulter.