チュートリアル: 現在のページに基づくテキスト要素のカスタマイズ

このチュートリアルでは、ユーザーが現在表示しているページに基づいてランチャーまたはホーム画面のテキストを動的にカスタマイズする方法を示します。

このチュートリアルで説明されているサンプルの完全な作業バージョンについては、 watsonx Assistant Web チャットのランチャーおよびホーム画面テキストの変更を参照してください。

ランチャー・テキストとホーム画面で、ユーザーに挨拶し、ユーザーが何をしたいかを提案します。常に同じテキストを表示するのではなく、ユーザーが現在表示している Web サイトのページに基づいてこのテキストをカスタマイズすることができます。例えば、一般的な挨拶ではなく、クレジット・カードに関するページを表示する顧客には、クレジット・カード・サービスに固有のテキストが表示される場合があります。

この例では、現行ページに基づいてテキストを適合させる方法を示していますが、同じ基本的な方法を使用して、任意のクライアント条件 (時刻やユーザーの地理的位置など) に基づいてテキストを適合させることができます。

ユーザーが表示している現在のページに基づいてランチャーまたはホーム画面のテキスト要素を変更するには、以下の手順を実行します。

ユーザーが現在表示しているページを判別します。アプリケーションの設計に応じて、さまざまな方法でこれを行うことができますが、1 つの簡単なメカニズムは、URL 照会パラメーターの値 (この例では page) を検査することです。
```
const page = new URLSearchParams(window.location.search).get('page');
```
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.
  ...
}
```
updateLauncherGreetingMessage() インスタンス・メソッドを使用してランチャー・テキストを変更します。これにより、ランチャーに表示されるテキストが変更されます (デフォルトでは 15 秒後)。
```
instance.updateLauncherGreetingMessage("I see you're interested in credit     cards! Let me know if I can help.");
```
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 の例を参照してください。