教程: 根据当前页面定制文本元素

本教程显示如何根据用户当前正在查看的页面动态定制启动程序或主屏幕文本。

有关本教程中描述的示例的完整工作版本，请参阅 Change launcher and home screen text for watsonx Assistant web chat。

启动程序文本和主屏幕向用户打招呼，并建议用户可能要执行的操作。 您可能希望根据用户当前正在查看的 Web 站点上的页面来定制此文本，而不是一直显示相同的文本。 例如，客户查看有关信用卡的页面时，可能会看到特定于信用卡服务的文本，而不是通用问候语。

虽然此示例显示如何根据当前页面来调整文本，但您可以使用相同的基本方法根据任何客户机条件 (例如，时间或用户的地理位置) 来调整文本。

要根据用户正在查看的当前页面来更改启动程序或主屏幕文本元素，请执行以下步骤:

1. 确定用户当前正在查看的页面。 根据应用程序的设计，有多种方法来执行此操作，但一个简单的机制是检查 URL 查询参数的值 (在此示例中， page):

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

2. 装入 Web 聊天时，请检查此值，并根据正在查看的页面有条件地设置文本。 您可以使用对应用程序有意义的任何条件。 在此示例中，我们只是检查 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.
     ...
   }
   

3. 使用 updateLauncherGreetingMessage() 实例方法更改启动程序文本。 这将更改启动程序上显示的文本 (缺省情况下，在 15 秒后)。

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

4. 使用 updateHomeScreenConfig() 实例方法更改主屏幕配置:

   • 确保已启用主屏幕。

   • 根据用户正在查看的页面更改问候语。

   • 配置主屏幕显示的按钮，以便它们提供适合于用户正在查看的页面的选项。

   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' }
       ]
     }
   });
   

有关完整的工作代码，请参阅 Change launcher and home screen text for watsonx Assistant web chat 示例。