채팅 헤더에 언어 선택기 생성하기

온라인에서 편집하기

이 튜토리얼은 JavaScript 를 사용하여 채팅 헤더에 언어 선택기 드롭다운을 추가하고 언어 변경을 처리하는 방법을 설명합니다.

이 태스크에 대한 정보

사용자가 언어를 선택하면 핸들러 함수가 실행되어 채팅 로케일을 업데이트하고 선택된 언어를 헤더에 반영합니다.

언어 선택 방식

언어 선택기는 이벤트 주도형 패턴을 따릅니다:

채팅 헤더에 드롭다운이 추가됩니다
각 드롭다운 항목은 onClick 핸들러를 정의합니다
사용자가 언어를 선택할 때:
- 채팅 로케일이 업데이트되었습니다
- 헤더 레이블은 수동으로 업데이트됩니다

로케일이 변경되면 사용자 정의 헤더 텍스트를 명시적으로 업데이트하거나 속성을 showSelectedAsTitle 사용해야 합니다.

프로시저

채팅 헤더에 언어 선택기를 추가하세요

메서드를 updateCustomHeaderItems() 사용하여 헤더에 드롭다운을 추가하세요. 다음 코드 조각은 "영어"라는 레이블이 붙은 드롭다운을 생성하고, 두 가지 언어 옵션을 추가하며, 각 옵션에 클릭 핸들러를 연결합니다:


      function onChatLoad(instance) {
        const chatInstance = instance;
        chatInstance.updateCustomHeaderItems([
            {
                id: 'language-selector',
                type: 'dropdown',
                text: 'English',
                icon: 'language',
                align: 'right',
                items: [
                    {
                        id: 'en',
                        text: 'English',
                        onClick: () => handleLanguageChange(chatInstance, 'en', 'English')
                    },
                    {
                        id: 'es',
                        text: 'Español',
                        onClick: () => handleLanguageChange(chatInstance, 'es', 'Español')
                    }
                ]
            }
        ]);
    };

언어 변경 핸들러 생성
사용자가 언어를 선택할 때 실행되는 핸들러 함수를 정의하십시오. 다음 코드 조각은 을 사용하여 채팅 언어를 updateLocale() 업데이트하고, 을 사용하여 선택된 언어를 반영하도록 updateCustomHeaderItems()드롭다운 레이블을 업데이트합니다:
```
function handleLanguageChange(chatInstance, locale, label) {
  chatInstance.updateLocale(locale);

  chatInstance.updateCustomHeaderItems([
    {
      id: 'language-selector',
      type: 'dropdown',
      text: label,
      icon: 'language',
      align: 'right'
    }
  ]);
}
```
드롭다운 항목의 텍스트를 업데이트하려면 다음 방법을 사용할 수 있습니다:
- . text파일의 레이블을 수동으로 업데이트하십시오.
- 속성을 showSelectedAsTitle 사용하여 현재 선택된 드롭다운 항목의 텍스트가 레이블에 자동으로 표시되도록 합니다.
자세한 정보는 updateCustomHeaderItems()의 내용을 참조하십시오.

결과

언어 처리 기능 확장

핸들러 onClick 내부에 다음과 같은 로직을 추가하여 언어 처리를 확장할 수 있습니다:

외부 번역 파일 불러오기 중
페이지 수준 언어 설정 업데이트
선택된 언어를 로컬 스토리지에 저장

전체 대본

다음 스크립트를 사용하여 이 튜토리얼의 코드를 채팅 위젯에 적용하세요:


          window.wxOConfiguration = {
            orchestrationID: "your-orgID_orchestrationID",
            hostURL: "https://dl.watson-orchestrate.ibm.com",
            rootElementID: "root",
            showLauncher: false,
            deploymentPlatform: "ibmcloud", // Required for IBM Cloud
            crn: "your-org-crn", // Required for IBM Cloud. Learn how to get the CRN in https://cloud.ibm.com/docs/key-protect?topic=key-protect-retrieve-instance-ID&interface=ui
            chatOptions: {
              agentId: "your-agent-id",
              agentEnvironmentId: "your-agent-env-id",
              onLoad: onChatLoad
        }
    };
    setTimeout(function () {
        const script = document.createElement('script');
        script.src = `${window.wxOConfiguration.hostURL}/wxochat/wxoLoader.js?embed=true`;
        script.addEventListener('load', function () {
            wxoLoader.init();
        });
        document.head.appendChild(script);
    });

    function onChatLoad(instance) {
        const chatInstance = instance;
        chatInstance.updateCustomHeaderItems([
            {
                id: 'language-selector',
                type: 'dropdown',
                text: 'English',
                icon: 'language',
                align: 'right',
                items: [
                    {
                        id: 'en',
                        text: 'English',
                        onClick: () => handleLanguageChange(chatInstance, 'en', 'English')
                    },
                    {
                        id: 'es',
                        text: 'Español',
                        onClick: () => handleLanguageChange(chatInstance, 'es', 'Español')
                    }
                ]
            }
        ]);
    };

    function handleLanguageChange(chatInstance, locale, label) {
        chatInstance.updateLocale(locale);
        chatInstance.updateCustomHeaderItems([
            {
                id: 'language-selector',
                type: 'dropdown',
                text: label,
                icon: 'language',
                align: 'right'
            }
        ]);
    }