Crear un selector de idioma en el encabezado del chat

Editar en línea

Este tutorial explica cómo añadir un menú desplegable de selección de idioma al encabezado del chat y gestionar los cambios de idioma mediante JavaScript.

Acerca de esta tarea

Cuando un usuario selecciona un idioma, se activa una función de control para actualizar la configuración regional del chat y reflejar el idioma seleccionado en el encabezado.

Cómo funciona la selección de idioma

El selector de idioma sigue un patrón basado en eventos:

Se añade un menú desplegable al encabezado del chat
Cada elemento desplegable define un onClick controlador
Cuando el usuario selecciona un idioma:
- Se actualiza la configuración regional del chat
- La etiqueta del encabezado se actualiza manualmente

Debes actualizar explícitamente el texto del encabezado personalizado cuando cambie la configuración regional, o bien utilizar la showSelectedAsTitle propiedad.

Procedimiento

Añadir un selector de idioma al encabezado del chat

Utiliza el updateCustomHeaderItems() método para añadir un menú desplegable al encabezado. El siguiente fragmento de código crea un menú desplegable con la etiqueta «Inglés», añade dos opciones de idioma y asocia cada opción con un controlador de clics:


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

Crear un controlador de cambio de idioma
Defina una función de controlador que se ejecute cuando el usuario seleccione un idioma. El siguiente fragmento de código actualiza el idioma del chat mediante updateLocale() y actualiza el texto del menú desplegable para que refleje el idioma seleccionado mediante updateCustomHeaderItems():
```
function handleLanguageChange(chatInstance, locale, label) {
  chatInstance.updateLocale(locale);

  chatInstance.updateCustomHeaderItems([
    {
      id: 'language-selector',
      type: 'dropdown',
      text: label,
      icon: 'language',
      align: 'right'
    }
  ]);
}
```
Para actualizar el texto de una opción del menú desplegable, puedes:
- Actualiza manualmente la etiqueta en text.
- Actualiza automáticamente la etiqueta para que muestre el texto del elemento del menú desplegable seleccionado actualmente utilizando la showSelectedAsTitle propiedad.
Para obtener más información, consulte updateCustomHeaderItems().

Resultados

Ampliación de la gestión de idiomas

Puede ampliar el manejo del lenguaje añadiendo más lógica dentro del onClick controlador, como por ejemplo:

Cargando archivos de traducción externos
Actualización de la configuración de idioma a nivel de página
Persistir el idioma seleccionado en el almacenamiento local

Guion completo

Utiliza el siguiente script para aplicar el código de este tutorial a tu 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'
            }
        ]);
    }