Criando um seletor de idioma no cabeçalho do chat

Editar online

Este tutorial explica como adicionar um menu suspenso de seleção de idioma ao cabeçalho do chat e lidar com as alterações de idioma usando JavaScript.

Sobre esta tarefa

Quando um usuário seleciona um idioma, uma função de manipulador é acionada para atualizar a localidade do chat e refletir o idioma selecionado no cabeçalho.

Como funciona a seleção de idioma

O seletor de idioma segue um padrão orientado a eventos:

Um menu suspenso é adicionado ao cabeçalho do chat
Cada item do menu suspenso define um onClick manipulador
Quando o usuário seleciona um idioma:
- A localidade do chat é atualizada
- O rótulo do cabeçalho é atualizado manualmente

É necessário atualizar explicitamente o texto do cabeçalho personalizado quando a localidade for alterada, ou usar a showSelectedAsTitle propriedade.

Procedimento

Adicione um seletor de idioma ao cabeçalho do chat

Use o updateCustomHeaderItems() método para adicionar um menu suspenso ao cabeçalho. O trecho de código a seguir cria um menu suspenso chamado “Inglês”, adiciona duas opções de idioma e associa cada opção a um manipulador de cliques:


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

Criar um manipulador de mudança de idioma
Defina uma função de manipulador que seja executada quando o usuário selecionar um idioma. O trecho de código a seguir atualiza o idioma do chat usando updateLocale() e atualiza o rótulo do menu suspenso para refletir o idioma selecionado usando updateCustomHeaderItems():
```
function handleLanguageChange(chatInstance, locale, label) {
  chatInstance.updateLocale(locale);

  chatInstance.updateCustomHeaderItems([
    {
      id: 'language-selector',
      type: 'dropdown',
      text: label,
      icon: 'language',
      align: 'right'
    }
  ]);
}
```
Para atualizar o texto de um item do menu suspenso, você pode:
- Atualize manualmente a etiqueta em text.
- Atualize automaticamente o rótulo para exibir o texto do item selecionado no menu suspenso usando a showSelectedAsTitle propriedade.
Para obter mais informações, consulte updateCustomHeaderItems().

Resultados

Ampliação do tratamento de idiomas

Você pode ampliar o tratamento de idiomas adicionando mais lógica dentro do onClick manipulador, como:

Carregando arquivos de tradução externos
Atualizando as configurações de idioma no nível da página
Persistência do idioma selecionado no armazenamento local

Roteiro completo

Use o seguinte script para aplicar o código deste tutorial ao seu widget de chat:


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