Personnaliser une expérience d’aperçu de conseil dans Générateur d'IU

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 2025
  • 3 minutes de lecture

    • Personnalisez un aperçu d’une carte Actions recommandées qui s’affiche dans le panneau latéral contextuel à l’aide Générateur d'IUde . L’expérience d’aperçu comprend un conseil, une icône, un message et un bouton d’action.

    Avant de commencer

    Rôle requis : sn_nb_action.next_best_action_author et ui_builder_admin, admin

    Pourquoi et quand exécuter cette tâche

    Vous commencez par créer une variante de page d’interface utilisateur d’une expérience d’aperçu de conseil. Lorsque vous créez une variante de page d’interface utilisateur à partir d’un modèle de page, vous commencez par une structure de base que vous pouvez personnaliser. À l’aide des propriétés du composant, vous pouvez modifier l’apparence de l’aperçu de votre carte de recommandation.

    Procédure

    1. Accédez à la Tout > Actions recommandées > Types d'actions > Conseils.
    2. Sélectionnez un conseil dans la liste Conseils.
    3. Sélectionnez Créer une interface utilisateur d’aperçu pour créer une variante de page d’interface utilisateur d’une expérience d’aperçu de conseil.

      Cette page inclut un conteneur vide avec les propriétés répertoriées dans le tableau suivant. Le cadre de travail des actions recommandées transmet l’objet customExpProps en tant que propriété à l’expérience personnalisée.

      Tableau 1. Prévisualiser les propriétés de l’expérience
      Propriété Description
      sysId ID de la recommandation.
      nom Titre de l’expérience en avant-première.
      description Message pour l’expérience d’aperçu.
      Conseil recommandé Texte indiquant à l’agent pourquoi une recommandation est suggérée.
      callToActions Paramètres de l’action de conseil.
      actionTypeLabel Étiquette pour le type d’action recommandé.
      icône Icône de la carte de recommandation.
      actionStateLabel Nom externe de l’état de l’action.
      actionStateValue Nom interne de l’état de l’action.
      previewFields Champs à afficher dans l’expérience d’aperçu des conseils.
      errorMessage Message d’erreur à afficher en cas d’échec de l’affichage de la recommandation.

      L’exemple suivant montre les propriétés et les exemples de valeurs pour l’expérience d’aperçu.

      "customExpProps": {
        "sysId": "e8421a2a436f0210f81d92621ab8f2da",
        "name": "Attach and share article",
        "description": null,
        "recommendationHint": "Knowledge",
        "callToActions": [
            {
                "label": "",
                "name": "",
                "id": "1e8392aa436f0210f81d92621ab8f291",
                "actionBehavior": "contextual_side_panel",
                "primary": "true",
                "order": "100",
                "completionMessage": "Knowledge article successfully attached."
            }
        ],
        "recommendationAction": "",
        "actionTypeLabel": "Guidance",
        "icon": "magnifying-glass-sparkle-outline",
        "actionStateLabel": "New",
        "actionStateValue": "new",
        "previewFields": null,
        "attributes": "",
        "errorMessage": "",
        "ariaHidden": false,
        "useCase": "search",
        "actionInputs": {},
        "actionTypeSysId": "",
        "actionId": "",
        "table": "sn_customerservice_case",
        "tableSysId": "",
        "renderer": "sn-guidance-experience-connected",
        "secondaryCallToAction": {},
        "isGenius": false,
        "contextSysId": "",
        "actionConfigurations": {},
        "isFullSearchView": false
    }
    4. Sélectionnez Modifier l’aperçu dans le générateur d’IU.
      La variante de page de l’interface utilisateur s’ouvre dans Générateur d'IU, où vous pouvez ajouter et configurer des composants pour personnaliser l’apparence de l’expérience d’aperçu. Pour plus d’informations, consultez Utilisation de composants dans le générateur d’IU.
    5. Liez les propriétés de l’expérience d’aperçu à votre interface utilisateur d’aperçu.
      Les liaisons de données se trouvent dans l’onglet Configuration du panneau de configuration dans Générateur d'IU. Pour plus d’informations, consultez Ressources de données dans le générateur d’IU.
    6. Ajoutez et liez des scripts à des composants de votre interface utilisateur d’aperçu pour répartir des événements à l’aide d’un gestionnaire d’événements afin d’exécuter ou d’ignorer une recommandation avec une charge utile correspondante.
      Tableau 2. Prévisualiser les événements d’expérience
      Événements traités Description
      ON_SINGLE_CLICK_ACTION Lance et termine l’action lorsqu’un agent sélectionne le bouton d’action. Cet événement transmet les paramètres suivants dans la charge utile :
      api.emit( 
    ‘ON_SINGLE_CLICK_ACTION‘, { 
        sysId: api.context.props.customExpProps.sysId, 
        name: api.context.props.customExpProps.name, 
        actionStateValue: api.context.props.customExpProps.actionStateValue, 
        actionMetadata: api.context.props.customExpProps.callToActions[0] 
    }
)
      ON_DRILL_DOWN_ACTION Développe l’action et affiche plus d’actions ou d’informations après qu’un agent a sélectionné le bouton d’action primaire. Cet événement transmet les paramètres suivants dans la charge utile :
      api.emit( 
    ‘ON_DRILL_DOWN_ACTION‘, { 
        sysId: api.context.props.customExpProps.sysId, 
        name: api.context.props.customExpProps.name, 
        actionStateValue: api.context.props.customExpProps.actionStateValue, 
        actionMetadata: api.context.props.customExpProps.callToActions[0] 
     }
)
      DISMISS_ACTION_CLICK Annule l’action.
      api.emit( 
    ‘DISMISS_ACTION_CLICK‘, { 
         sysId: api.context.props.customExpProps.sysId
    }
)
      ACTION_TRIGGERED_PROPAGATION Permet à l’utilisateur d’ajouter un comportement spécifique à l’interface utilisateur pour les actions de guidage. Cet événement propage les détails de la charge utile vers le parent où cet événement peut être géré.
      api.emit(
    ‘SN_NEXT_BEST_ACTION_LIST_CONNECTED#ACTION_TRIGGERED_PROPAGATION' ‘, {
   "actionSysId": api.context.props.customExpProps.actionId
   "actionName": api.context.props.customExpProps.actionConfigurations[api.context.props.customExpProps.actionId ][“actionName”]
   "actionType": "guidance",
   "eventName": "<eventName>",
   "payload": {
   }
}

      Pour plus d’informations, consultez Définition et liaison de scripts clients à des composants.