Tutoriel : Personnaliser les éléments de texte en fonction de la page en cours

Ce tutoriel montre comment personnaliser dynamiquement le texte du lanceur ou de l'écran d'accueil en fonction de la page que l'utilisateur est en train de consulter.

Pour obtenir une version complète et fonctionnelle de l'exemple décrit dans ce tutoriel, consultez la page « Modifier le texte du lanceur d'applications et de l'écran d'accueil pour le chat en ligne de l'assistant IA ».

Le texte du lanceur et l'écran d'accueil accueillent l'utilisateur et lui suggèrent ce qu'il pourrait vouloir faire. Plutôt que d'afficher toujours le même texte, vous pouvez personnaliser ce texte en fonction de la page de votre site web que l'utilisateur est en train de consulter. Par exemple, au lieu d'un message d'accueil générique, un client consultant une page sur les cartes de crédit pourrait voir un texte spécifique aux services de cartes de crédit.

Bien que cet exemple montre comment adapter le texte en fonction de la page en cours, vous pouvez utiliser la même approche de base pour adapter le texte en fonction de n'importe quelle condition du client (telle que l'heure de la journée ou la situation géographique de l'utilisateur).

Pour modifier les éléments de texte du lanceur ou de l'écran d'accueil en fonction de la page affichée par l'utilisateur, procédez comme suit :

1. Déterminer la page que l'utilisateur est en train de consulter. Selon la conception de votre application, il existe plusieurs façons de procéder, mais un mécanisme simple consiste à vérifier la valeur d'un paramètre de requête URL (dans cet exemple, page) :

    const page = new URLSearchParams(window.location.search).get('page');

1. Lorsque le webchat est chargé, cette valeur est vérifiée et le texte est défini de manière conditionnelle en fonction de la page affichée. Vous pouvez utiliser n'importe quelle condition utile pour votre application. Dans cet exemple, nous vérifions simplement la valeur du paramètre de requête " page

    if (page === 'cards') {
      // Update the launcher and home screen with text that is
      // specific to credit cards.
      ...
    } else if (page === 'account') {
      // Update the launcher and home screen with text that is
      // specific to the user's account.
      ...
    }

1. Modifiez le texte du lanceur à l'aide de la méthode updateLauncherGreetingMessage() d'instance. Ceci modifie le texte qui s'affiche sur le lanceur (par défaut après 15 secondes).

    instance.updateLauncherGreetingMessage("I see you're interested in credit     cards! Let me know if I can help.");

1. Modifiez la configuration de l'écran d'accueil à l'aide de la méthode updateHomeScreenConfig() d'instance :

   • Assurez-vous que l'écran d'accueil est activé.

   • Modifier le message d'accueil en fonction de la page consultée par l'utilisateur.

   • Configurez les boutons affichés par l'écran d'accueil afin qu'ils proposent des options adaptées à la page consultée par l'utilisateur.

    instance.updateHomeScreenConfig({
      is_on: true,
      greeting: 'What can I tell you about credit cards?',
      starters: {
        is_on: true,
        buttons: [
          { label: 'Card interest rates' },
          { label: 'Cards with rewards' },
          { label: 'Business cards' }
        ]
      }
    });

Pour obtenir le code complet et fonctionnel, consultez l'exemple « Modifier le texte du lanceur d'applications et de l'écran d'accueil pour le chat en ligne de l'assistant IA ».