Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 48

Composants Dynamiques dans les Scripts

Recommended resources

Bonjour ! Dans la leçon précédente, nous avons complété le cycle de vie de notre premier script en l'associant à une file d'attente. Vous savez maintenant comment faire en sorte qu'un script s'affiche automatiquement pour un agent.

Jusqu'à présent, nous avons utilisé des champs de texte libre. Cependant, pour guider l'agent et garantir la cohérence des données, il est souvent préférable de proposer des choix prédéfinis. C'est l'objectif de cette leçon : nous allons enrichir notre script en y intégrant des composants dynamiques.

Aujourd'hui, vous apprendrez à utiliser deux des composants les plus courants pour structurer la saisie d'informations :

  • Les boutons radio, parfaits pour un choix unique parmi quelques options.
  • Les listes déroulantes, idéales pour sélectionner une option dans une liste plus longue.

Ces outils sont fondamentaux pour créer des scripts interactifs, efficaces et qui réduisent les erreurs de saisie.

Vue d'ensemble de l'éditeur de scripts Genesys Cloud
Cette image vous rappelle l'interface de l'éditeur de script. Sur la droite (4), vous pouvez voir la palette de composants où nous trouverons les boutons radio ('Radio Button') et les listes déroulantes ('Dropdown') que nous allons utiliser aujourd'hui.

1. Les Boutons Radio : Guider un Choix Exclusif

Imaginez que vous souhaitiez qualifier chaque appel selon un motif précis : "Information", "Réclamation" ou "Achat". Utiliser des boutons radio garantit que l'agent ne peut sélectionner qu'un seul de ces motifs, assurant ainsi la propreté des données pour vos rapports.

Le Mécanisme Clé

Le fonctionnement des boutons radio dans Genesys Cloud repose sur un principe simple mais puissant :

  1. Une variable partagée (Value) : Tous les boutons radio d'un même groupe sont liés à une seule et même variable de script (de type String). C'est cette variable qui stockera le choix final de l'agent.
  2. Une valeur de sélection unique (Selected Value Text) : Chaque bouton radio possède sa propre valeur de texte. Lorsque l'agent clique sur un bouton, c'est cette valeur qui est écrite dans la variable partagée.

Pour bien comprendre comment mettre cela en place, la documentation officielle est une excellente ressource.

Radio Button component

Cette page de la documentation de Genesys Cloud détaille le fonctionnement du composant 'Radio Button'. Elle explique comment ajouter ces boutons et, surtout, comment configurer les propriétés 'Value' et 'Selected Value Text' qui sont au cœur de leur mécanisme.

Lisez attentivement la section qui commence par 'Click Radio Button on the component toolbar...'. Concentrez-vous sur les étapes 4 et 5, qui expliquent comment lier la variable 'Value' et définir le 'Selected Value Text'. Parcourez ensuite les descriptions des propriétés 'Value' et 'Selected Value Text' plus bas dans la page pour renforcer votre compréhension.

Exercice Pratique : Ajoutons un motif d'appel

Nous allons maintenant modifier notre script Script Contact v1 pour y ajouter une section "Motif de l'appel".

  1. Ouvrez votre script Script Contact v1 depuis Admin > Contact Center > Scripts.
  2. Sur une page de votre script, ajoutez un composant Text et modifiez son contenu pour afficher "Motif de l'appel :".
  3. Créez la variable de stockage :
    • Allez dans l'onglet Variables à gauche.
    • Cliquez sur Add Variable.
    • Type : String.
    • Name : str_motifAppel.
    • Laissez la valeur par défaut vide et cliquez sur Apply.
  4. Ajoutez les boutons radio :
    • Faites glisser trois composants Radio Button depuis la palette de droite vers votre page, sous le texte que vous venez d'ajouter.
    • Sélectionnez le premier bouton radio. Dans le panneau Properties à droite :
      • Common > Text : "Information"
      • Advanced > Value : Cliquez sur Select Variable et choisissez votre variable str_motifAppel.
      • Advanced > Selected Value Text : Information
    • Répétez l'opération pour les deux autres boutons avec les valeurs suivantes :
      • Bouton 2 : Text = "Réclamation", Value = str_motifAppel, Selected Value Text = Reclamation
      • Bouton 3 : Text = "Achat", Value = str_motifAppel, Selected Value Text = Achat

Vérification

Comment vérifier que cela fonctionne ? Nous allons afficher la valeur de notre variable en temps réel.

  1. Ajoutez un composant Text (Read Only) sur votre page.
  2. Dans ses propriétés, sous Advanced > Value, sélectionnez la variable str_motifAppel.
  3. Cliquez sur le bouton Preview en haut de l'éditeur.
  4. Dans la fenêtre de prévisualisation, cliquez sur les différents boutons radio. Vous devriez voir le texte du composant "Read Only" se mettre à jour instantanément avec la valeur Selected Value Text correspondante.

Vous venez de mettre en place une méthode de saisie guidée et fiable !

2. Les Listes Déroulantes : Proposer un Choix dans une Liste

Les listes déroulantes (Dropdown) sont utiles lorsque le nombre de choix est plus important (par exemple, une liste de pays, de produits, ou de départements). Elles permettent de gagner de la place à l'écran tout en offrant une sélection structurée.

Alimenter une Liste Déroulante avec une Variable de Type "List"

Une liste déroulante peut être alimentée de deux manières : en saisissant les options manuellement (statique) ou, de manière plus flexible, en la liant à une variable de type List. C'est cette seconde méthode que nous allons explorer.

Une variable de type List est une variable spéciale conçue pour contenir une collection d'éléments, généralement séparés par des virgules. C'est l'outil parfait pour gérer dynamiquement les options d'une liste déroulante.

List script variables

Cette ressource introduit les variables de type 'List'. Elle explique leur utilité pour gérer des collections de données et mentionne explicitement leur rôle dans la gestion des options des listes déroulantes ('dropdown options').

Lisez les deux courtes sections. Retenez qu'une variable de type 'List' est faite pour gérer des ensembles de valeurs et qu'elle peut être utilisée pour peupler dynamiquement des composants comme les listes déroulantes.

Exercice Pratique : Sélection d'un produit

Imaginons que, si le motif de l'appel est "Achat", l'agent doive sélectionner un produit.

  1. Créez la variable de type List :
    • Dans l'onglet Variables, cliquez sur Add Variable.
    • Type : List.
    • Name : list_produits.
    • Default Value : Entrez une liste de produits séparés par des virgules, sans espaces autour des virgules. Exemple : Aspirateur V12,Cafetière Express,Robot Cuiseur Pro.
    • Cliquez sur Apply.
  2. Créez la variable de stockage pour la sélection :
    • Ajoutez une nouvelle variable de type String.
    • Name : str_produitSelectionne.
  3. Ajoutez la liste déroulante :
    • Sur votre page de script, ajoutez un composant Dropdown.
    • Dans ses propriétés :
      • List Items > List Variable : Sélectionnez votre variable list_produits. Les options devraient apparaître dans la zone de prévisualisation en dessous.
      • Output > Value : Sélectionnez votre variable str_produitSelectionne. C'est ici que sera stocké le produit choisi par l'agent.

Vérification

Comme pour les boutons radio, utilisez un composant Text (Read Only) lié à la variable str_produitSelectionne pour afficher le choix de l'agent en temps réel dans le mode Preview.

Pour Aller plus Loin : Remplissage Dynamique

La véritable puissance des variables de type List est qu'elles peuvent être modifiées pendant l'exécution du script. Par exemple, vous pourriez afficher une liste de produits différente selon que le client est un particulier ou un professionnel.

Cela se fait souvent avec l'action List.Push, qui permet d'ajouter un élément à une liste existante.

Genesys Cloud Scripting: List Manipulation for Dynamic Components
Cette image montre un exemple d'action personnalisée. Dans un bloc conditionnel ('If'), une action 'List.Push' est utilisée pour ajouter la valeur 'SR one' à la variable 'Test Value List'. C'est un aperçu de la manière dont vous pourriez, par exemple, ajouter des options à votre liste de produits en fonction d'un autre choix fait par l'agent.

Nous explorerons la logique conditionnelle dans la prochaine leçon, mais il est utile de voir dès maintenant comment ces concepts se connectent.

Conclusion

Félicitations ! Vous avez ajouté deux types de composants essentiels à votre boîte à outils de concepteur de scripts. Vous savez maintenant comment offrir des choix structurés à vos agents, ce qui améliore la qualité des données et l'efficacité du traitement des interactions.

Les points clés à retenir sont :

  • Les boutons radio sont idéaux pour un choix unique et exclusif. Ils fonctionnent avec une variable Value partagée et un Selected Value Text unique pour chaque bouton.
  • Les listes déroulantes sont parfaites pour sélectionner une option dans une liste plus longue. Elles sont puissantes lorsqu'elles sont alimentées par une variable de type List.
  • L'utilisation de ces composants garantit la cohérence des données collectées, un point crucial pour l'analyse et le reporting.

Et ensuite ?

Maintenant que nous savons comment capturer des données de manière structurée, la prochaine étape logique est d'utiliser ces données pour rendre nos scripts encore plus intelligents. Dans la prochaine leçon, nous apprendrons à créer une logique de navigation conditionnelle, par exemple, afficher une page spécifique uniquement si l'agent a sélectionné "Réclamation" comme motif d'appel.