튜토리얼: 현재 페이지를 기반으로 텍스트 요소 사용자 지정하기

이 튜토리얼에서는 사용자가 현재 보고 있는 페이지에 따라 런처 또는 홈 화면 텍스트를 동적으로 사용자 지정하는 방법을 보여 줍니다.

이 튜토리얼에서 설명한 예제의 완성된 실행 버전을 보려면 ‘AI 어시스턴트 웹 채팅의 런처 및 홈 화면 텍스트 변경’을 참조하세요.

런처 텍스트와 홈 화면이 사용자를 맞이하고 사용자가 수행할 수 있는 작업을 제안합니다. 항상 같은 텍스트를 표시하는 대신 사용자가 현재 보고 있는 웹사이트의 페이지에 따라 이 텍스트를 사용자 지정할 수 있습니다. 예를 들어 신용카드 관련 페이지를 보는 고객에게는 일반적인 인사말 대신 신용카드 서비스 관련 텍스트가 표시될 수 있습니다.

이 예에서는 현재 페이지를 기준으로 텍스트를 조정하는 방법을 보여 주지만, 동일한 기본 접근 방식을 사용하여 모든 클라이언트 조건(예: 시간 또는 사용자의 지리적 위치)에 따라 텍스트를 조정할 수 있습니다.

사용자가 보고 있는 현재 페이지에 따라 런처 또는 홈 화면 텍스트 요소를 변경하려면 다음 단계를 따르세요:

사용자가 현재 어떤 페이지를 보고 있는지 확인합니다. 애플리케이션의 설계에 따라 다양한 방법이 있지만, 간단한 메커니즘 중 하나는 URL 쿼리 매개변수(이 예에서는 page)의 값을 확인하는 것입니다:

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

웹 채팅이 로드될 때 이 값을 확인하고 보고 있는 페이지에 따라 조건부로 텍스트를 설정합니다. 애플리케이션에 적합한 조건을 사용할 수 있습니다. 이 예에서는 단순히 ' 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' }
        ]
      }
    });

완전한 실행 코드는 ‘AI 어시스턴트 웹 채팅 예제를 위한 런처 및 홈 화면 텍스트 변경’을 참조하세요.