Funciones

Estas son las funciones que puede configurar en el SDK de Oracle Web.

Registros de hora absolutos y relativos

  • Indicador de función: timestampMode: 'relative' | 'absolute' (valor por defecto: 'relative')
  • Configuración de función: timestampMode

Puede activar registros de hora absolutos o relativos para los mensajes de chat. Los registros de hora absolutos muestran la hora exacta de cada mensaje. Los registros de hora relativos solo se muestran en el último mensaje y expresan el tiempo en términos de segundos, días, horas, meses o años anteriores en relación con el mensaje anterior.
A continuación se muestra la descripción de relative-v-absolute-timestamps.png
Descripción de la ilustración relativa-v-absolute-timestamps.png

La precisión Los registros de hora absolutos los hacen ideales para tareas de archivado, pero dentro del contexto limitado de una sesión de chat, esta precisión empeora la experiencia de usuario porque los usuarios deben comparar los registros de hora para averiguar el paso del tiempo entre mensajes. Los registros de hora relativos permiten a los usuarios realizar un seguimiento de la conversación fácilmente con términos como Ahora mismo y Hace unos momentos que se pueden comprender inmediatamente. Los registros de hora relativos mejoran la experiencia del usuario de otra forma, al tiempo que simplifican las tareas de desarrollo: debido a que los registros de hora relativos marcan los mensajes en términos de segundos, días, horas, meses o años transcurridos, no es necesario convertirlos para las zonas horarias.

Comportamiento de los registros de hora relativos

Como se ha mencionado anteriormente, un registro de hora relativo solo aparece en el último mensaje. Aquí se muestra este comportamiento con un poco más de detalle. Al configurar el registro de hora (timestampMode: 'relative' o timestampMode: 'default'), se muestra un registro de hora absoluto antes del primer mensaje del día como cabecera. Esta cabecera aparece cuando la conversación no se haya borrado y los mensajes más antiguos sigan estando disponibles en el historial.

A continuación, se muestra un registro de hora relativo en cada mensaje nuevo.
A continuación se describe el mensaje más reciente timestamp.png
Descripción de la ilustración most-recent-message-timestamp.png
Este registro de hora se actualiza a intervalos regulares (segundos, minutos, etc.) hasta que se recibe un mensaje nuevo.
  • Para los primeros 10
  • Entre 10 y 60
  • Cada minuto entre 1 min y 60 min
  • Cada hora entre 1 h y 24 h
  • Cada día entre 1d-30d
  • Cada mes entre 1 m y 12 m
  • Cada año después del primer año
Cuando se carga un nuevo mensaje en el chat, se elimina el registro de hora relativo del mensaje anterior y aparece un nuevo registro de hora en el nuevo mensaje que muestra la hora relativa respecto al mensaje anterior. En ese momento, el registro de hora relativo se actualiza hasta que llegan los siguientes mensajes.

Adición de un registro de hora relativo

Para agregar un registro de hora relativo:
  • Active los registros de hora relativos: timestampMode: 'relative'
  • Pasos opcionales:
    • Defina el color del registro de hora relativo: timestamp: '<a hexadecimal color value>'
    • Para las aptitudes multilingües, localice el texto del registro de hora mediante estas claves:
      Clave Texto por defecto Descripción
      relTimeNow Now Registro de hora inicial, que se muestra durante los 9 primeros segundos. Este registro de hora también se muestra cuando se restablece la conversación.
      relTimeMoment a few moments ago Se muestra entre 10 y 60 segundos.
      relTimeMin {0}min ago Se actualiza cada minuto
      relTimeHr {0}hr ago Se actualiza cada hora
      relTimeDay {0}d ago Se actualiza todos los días durante el primer mes.
      relTimeMon {0}mth ago Se actualiza cada mes durante los doce primeros meses.
      relTimeYr {0}yr ago Se actualiza cada año.
    • Utilice la configuración timeStampFormat para cambiar el formato del registro de hora absoluto que se muestra antes del primer mensaje de cada día.

Terminación automática

  • Indicador de función: enableAutocomplete: true (valor por defecto: false)
  • Active el almacenamiento en caché de cliente: enableAutocompleteClientCache
La terminación automática minimiza los errores del usuario proporcionando frases efectivas que se pueden utilizar como entrada directa y como sugerencias. Para activar esta función, actualice la configuración del widget con enableAutocomplete: true y agregue un juego de mensajes de usuario optimizados a la página Crear intención. Una vez activado, una ventana emergente muestra estos mensajes después de que los usuarios introduzcan tres o más caracteres. Las palabras de los mensajes sugeridos que coinciden con la entrada del usuario se definen en negrita. Desde allí, los usuarios pueden introducir su propia entrada, o bien optar por uno de los mensajes de terminación automática en su lugar.
Nota

Esta función solo está disponible en WebSocket.


Cuando un asistente digital está asociado al canal web de Oracle, todas las expresiones de ejemplo configuradas para cualquiera de las aptitudes registradas en ese asistente digital se pueden utilizar como sugerencias de terminación automática.

Envío automático de un campo

Cuando un campo tiene la propiedad autoSubmit definida en true, el cliente envía un valor FormSubmissionMessagePayload con la asignación submittedField que contiene los valores de campo válidos que se han introducido hasta ahora. Los campos que aún no se hayan definido (independientemente de si son obligatorios) o los campos que violan una validación del lado del cliente no se incluyen en la asignación submittedField. Si el campo de envío automático en sí contiene un valor que no es válido, el mensaje de envío no se envía y se muestra el mensaje de error del cliente para ese campo en particular. Cuando un envío automático se realiza correctamente, el valor partialSubmitField del mensaje de envío de formulario se definirá en id del campo autoSubmit.

Sustitución de un formulario de entrada anterior

Cuando el usuario final envía el formulario, ya sea porque un campo tiene autosubmit definido en true, la aptitud puede enviar un nuevo EditFormMessagePayload. Este mensaje debe sustituir al mensaje del formulario de entrada anterior. Al definir la propiedad de extensión de canal replaceMessage en true, puede activar el SDK para sustituir el mensaje de formulario de entrada anterior por el mensaje de formulario de entrada actual.

Diseño RTL automático

Cuando la dirección base de la página host se define con <html dir="rtl"> para admitir los idiomas que se escriben de derecha a izquierda (RTL), el widget de chat se presenta automáticamente a la izquierda. Debido a que el widget está alineado a la izquierda para idiomas que se escriben de derecha a izquierda, sus iconos y elementos de texto también se vuelven a colocar. Los iconos están en las posiciones opuestas desde donde estarían en una representación de izquierda a derecha (LTR). Por ejemplo, los iconos de envío, micrófono y anexo se giran de forma que los iconos de envío y micrófono ocupen el lado izquierdo del campo de introducción de datos (con el icono de envío direccional apuntando a la izquierda) mientras que el icono de anexo está en el lado derecho del campo de introducción de datos. La alineación de los elementos de texto, como inputPlaceholder y chatTitle, se basa en si el idioma del texto es LTR o RTL. Para los idiomas RTL, el texto de inputPlaceHolder y chatTitle aparecen en la parte derecha del campo de entrada.

Avatares

Por defecto, ninguno de los mensajes del chat va acompañado de avatares. Sin embargo, mediante los siguientes parámetros, puede configurar avatares para la aptitud, el usuario y un avatar de agente cuando la aptitud se integre con el soporte de agente en directo.
  • avatarBot: URL del origen de la imagen o cadena de origen de la imagen SVG que se muestra junto a los mensajes de aptitud.
  • avatarUser: URL del origen de la imagen o cadena de origen de la imagen SVG que se muestra junto a los mensajes de usuario. Además, si la aptitud tiene una integración de agente en directo, el SDK se puede configurar para que muestre un icono diferente para los mensajes de agente.
  • avatarAgent: URL del origen de la imagen o cadena de origen de la imagen SVG que se muestra junto a los mensajes del agente. Si no se proporciona este valor, pero se define avatarBot, se utiliza el icono avatarBot en su lugar.
Nota

Estos valores solo se pueden transferir en la configuración de inicialización. No se pueden modificar de forma dinámica.
new WebSDK({
URI: '<URI>',
//...,
icons: {
    avatarBot: '../assets/images/avatar-bot.png',
    avatarUser: '../assets/images/avatar-user.jpg',
    avatarAgent: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 9c2.7 0 5.8 1.29 6 2v1H6v-.99c.2-.72 3.3-2.01 6-2.01m0-11C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"/></svg>'
}
})

Sincronización de conversaciones de matriz

Indicador de función: enableTabsSync: true (valor por defecto: true)

Los usuarios pueden necesitar abrir el sitio web en varias pestañas por varias razones. Con enableTabsSync: true, puede sincronizar y continuar la conversación del usuario desde cualquier separador, siempre que los parámetros de conexión (URI, channelId y userId) sean los mismos en todos los separadores. Esta función garantiza que los usuarios puedan ver los mensajes de la aptitud en cualquier separador y responder desde el mismo separador o cualquier otro. Además, si el usuario borra el historial de conversaciones en una ficha, también se eliminará de las otras fichas. Si el usuario actualiza el idioma del chat en un separador, el idioma del chat se sincroniza con los otros separadores.

Existen algunas limitaciones:
  • Un nuevo separador se sincroniza con los separadores existentes para los nuevos mensajes entre el usuario y la aptitud al abrir. Si no ha configurado el SDK para mostrar mensajes del historial de conversaciones, el widget de chat inicial en el nuevo separador aparecerá vacío cuando se abra.
  • Si ha configurado el SDK para que muestre el historial de conversaciones, los mensajes del chat actual en los separadores existentes aparecerán como parte del historial de conversaciones en un separador nuevo. Si se define disablePastActions en all o postback, puede evitar la interacción con las acciones de los mensajes en el nuevo separador.
  • El navegador Safari actualmente no admite esta función.

Representación de Mensajes Personalizados

Indicador de función: delegate.render: (message) => boolean (default: undefined)

Utilice esta función para sustituir la representación de mensajes por defecto por su propia plantilla de mensajes personalizada. Para utilizar esta función, debe implantar la función renderdelegate, que toma el modelo de mensaje como entrada y devuelve un indicador booleano como salida. Debe devolver true para sustituir la representación por defecto por la representación personalizada para un tipo de mensaje concreto. Si se devuelve false, el mensaje por defecto se representa en su lugar.
Nota

Para la representación personalizada, toda la manipulación de clics de acción y la desactivación o activación de la acción se deben manejar de forma explícita.
Puede utilizar cualquier componente de marco externo para la representación de mensajes. Consulte los ejemplos de integración incluidos en el directorio samples del SDK para comprobar cómo puede utilizar esta función con marcos como React, Angular y Oracle JavaScript Extension Toolkit (JET).

Respuestas de cliente predeterminadas

Indicador de función: enableDefaultClientResponse: true (valor por defecto: false)

Utilice este indicador para proporcionar respuestas por defecto del lado del cliente junto con un indicador de escritura cuando la respuesta de aptitud se haya retrasado o cuando no haya ninguna respuesta de aptitud. Si el usuario envía el primer mensaje/consulta, pero la aptitud no responde en el número de segundos definido por el indicador defaultGreetingTimeout, la aptitud puede mostrar un mensaje de saludo que se configura mediante la cadena de traducción defaultGreetingMessage. A continuación, el cliente vuelve a comprobar la respuesta de la aptitud. El cliente muestra la respuesta de la aptitud si se ha recibido, pero si no, muestra un mensaje de espera (configurado con la cadena de traducción defaultWaitMessage) en intervalos definidos por defaultWaitMessageInterval. Cuando la espera de la respuesta de la aptitud supera el umbral definido por el indicador typingIndicatorTimeout, el cliente muestra una respuesta de disculpa al usuario y detiene el indicador de escritura. Puede configurar la respuesta de disculpa mediante la cadena de traducción defaultSorryMessage.

Delegación

Configuración de función: delegate

La función de delegación define un delegado para recibir las devoluciones de llamada antes de determinados eventos de la conversación. Para definir un delegado, transfiera el parámetro delegate o utilice el método setDelegate. El objeto delegado puede contener opcionalmente las funciones delegadas beforeDisplay, beforeSend, beforePostbackSend, beforeEndConversation y render.
var delegate = {
    beforeDisplay: function(message) {
        return message;
    },
    beforeSend: function(message) {
        return message;
    },
    beforePostbackSend: function(postback) {
        return postback;
    },
    beforeEndConversation: function(message) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(message);
            }, 2000);
        });
    },
    render: function(message) {
        if (message.messagePayload.type === 'card') {
            // Perform custom rendering for card using msgId
            return true;
        }
        return false;
    }
}

beforeDisplay

El delegado beforeDisplay permite modificar el mensaje de una aptitud antes de que se muestre en la conversación. El mensaje devuelto por el delegado se muestra en lugar del mensaje original. El mensaje devuelto no se muestra si el delegado devuelve un valor false como null, undefined o false. Si se produce un error en el delegado, se mostrará el mensaje original en lugar del mensaje devuelto por el delegado. Utilice el delegado beforeDisplay para aplicar selectivamente el comportamiento de enlace de vista web en el widget.

beforeSend

El delegado beforeSend permite modificar un mensaje de usuario antes de enviarlo al servidor de chat como parte de sendMessage. El mensaje que devuelve el delegado se envía a la aptitud en lugar del mensaje original. El mensaje devuelto por el delegado no se define si el delegado devuelve un valor false como null, undefined o false, entonces el mensaje no se envía. Si se produce un error, el mensaje original se enviará en lugar del mensaje devuelto por el delegado.

beforePostbackSend

El delegado beforePostbackSend es similar a beforeSend, solo que aplicado a los mensajes de devolución del usuario. Devolución del delegado que se envía a la aptitud. Si devuelve un valor falsy, como null, undefined o false, no se envía ningún mensaje.

beforeEndConversation

El delegado beforeEndConversation permite una intercepción al final de un flujo de conversación si se debe realizar alguna actividad previa a la salida. function recibe el mensaje de salida como parámetro de entrada y debe devolver un valor Promise. Si este Promise se resuelve con el mensaje de salida, el mensaje de salida CloseSession se envía al servidor de chat. De lo contrario, no se podrá enviar el mensaje de salida.
...

 beforeEndConversation: function(message) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(message);
            }, 2000);
        });
    }

render

El delegado render permite sustituir la representación de mensajes por defecto. Si la función de delegado render devuelve true para un tipo de mensaje concreto, WebSDK crea un espacio de marcador de posición en lugar de la representación de mensaje por defecto. Para identificar el marcador de posición, agregue el msgId del mensaje como el id del elemento. En la función de delegado render, puede utilizar este identificador para obtener la referencia del marcador de posición y representar la plantilla de mensaje personalizada. Consulte Renderización de Mensajes Personalizados.

Widget y botón de inicio arrastrable

Indicador de función: enableDraggableButton: true (valor por defecto: false)

A veces, especialmente en dispositivos móviles donde el tamaño de la pantalla es limitado, el widget de chat o el botón de inicio pueden bloquear el contenido en una página web. Al definir enableDraggableButton: true, puede permitir a los usuarios retirar el widget o el botón de inicio cuando esté bloqueando la vista. Este indicador solo afecta a la ubicación del botón de inicio, no al widget de chat: el widget seguirá abierto desde su ubicación original.

Indicador de escritura dinámica

Indicador de función: showTypingIndicator: 'true'

Un indicador de escritura indica a los usuarios que se abstengan de enviar un mensaje porque la aptitud está preparando una respuesta. Por defecto, las aptitudes muestran el indicador de escritura solo para su primera respuesta cuando se inicializa el SDK con showTypingIndicator: 'true'. Para una experiencia de usuario óptima, la aptitud debe tener un indicador de escritura dinámica, que es un indicador de escritura que se muestra después de cada respuesta de la aptitud. Además de hacer saber a los usuarios que la aptitud no ha sufrido un timeout, sino que sigue trabajando activamente en una respuesta, la visualización del indicador de escritura después de cada respuesta de la aptitud garantiza que los usuarios no intentarán enviar mensajes de forma prematura, como puede ser el caso cuando la propiedad keepTurn indica a la aptitud que responda con una serie de mensajes separados que no permitan al usuario interponer una respuesta.

Para activar un indicador de escritura después de cada respuesta de la aptitud:
  • Inicialice el SDK con showTypingIndicator definido en true.
  • Llame a la API showTypingIndicator
showTypingIndicator solo puede activar la visualización del indicador de escritura dinámica cuando:
  • El widget está conectado al servidor de chat de Oracle. El indicador de escritura dinámica no aparece cuando se cierre la conexión.
  • El SDK se ha inicializado con showTypingIndicator definido en true.
    Nota

    Esta API no puede funcionar cuando se utiliza el SDK en modo sin cabecera.
El indicador de escritura se muestra durante el tiempo de duración definido en la propiedad opcional typingIndicatorTimeout, que tiene un valor por defecto de 20 segundos. Si se llama a la API mientras se muestra un indicador de escritura, se restablece el temporizador y se oculta el indicador.

El indicador de escritura desaparece tan pronto como el usuario recibe los mensajes de la aptitud. El indicador de escritura se mueve a la parte inferior de la ventana del chat si un usuario introduce un mensaje o carga un anexo o envía una ubicación mientras se muestra.

Control del comportamiento de los enlaces embebidos

  • Manejo personalizado: linkHandler: { onclick: <function>, target: '<string>' }
  • En la vista web en el widget: linkHandler: { target: 'oda-chat-webview' }
  • En una ventana nueva: openLinksInNewWindow: 'true'
Además de abrir enlaces dentro de una nueva ventana mediante la definición de openLinksInNewWindow: true o el comportamiento por defecto de abrir enlaces en una nueva pestaña, también puede abrir enlaces que se superpongan a la página web del widget. Para activar esta y otras sustituciones en el comportamiento de los enlaces, inicialice el SDK con
linkHandler: {
    target: '_blank',   // open link in a new page
    onclick: (event) => { // some operation }
}
Utilice linkHander para:
  • Controle la navegación iframe para que pueda continuar superponiendo la página sin tener que incluir el widget en cada página, reabriéndola al navegar y manteniendo el mismo ID de usuario.

  • Abra algunos enlaces en una nueva ventana, mientras abre otros en la misma pestaña.
  • Realizando una acción cuando se hace clic en un enlace.
  • Evitando que se abra un enlace
  • Abrir un enlace en una vista web.
Para sustituir el comportamiento de los enlaces definido en la configuración openLinksInNewWindow, debe definir uno de estos atributos o ambos:
  • self: contexto de exploración actual
  • target: nombra el contexto de la ubicación de exploración, como una pestaña, una ventana o iFrame. Defina la ubicación iFrame como el atributo target de un elemento de anclaje (<a>). Puede definir los atributos_self,_blank,_parent y_top del destino.
  • onclick: acepta una función de devolución de llamada a la que se llama cuando se hace clic en el enlace. En la devolución de llamada se transfiere MouseEvent que se recibe al hacer clic y se puede utilizar para realizar una acción, o incluso evitar que se abra el enlace.

Modo integrado

  • Indicador de función: embedded: true (valor por defecto: false)
  • Transfiera el ID del elemento de contenedor de destino: targetElement
Además de la otra configuración que personaliza el aspecto del widget que ejecuta el chat, puede integrar el widget en la página web mediante:
  • Agregando embedded: true.
  • Definiendo la propiedad targetElement con el ID del elemento DOM (un componente HTML) que se utiliza como contenedor del widget (como 'container-div' en el siguiente fragmento).
<head>
    <meta charset="utf-8">
    <title>Oracle Web SDK Sample</title>
    <script src="scripts/settings.js"></script>
     <script>
        var chatWidgetSettings = {
            URI: YOUR_URI,
            channelId: YOUR_CHANNELID,
            embedded: true,
            targetElement: 'container-div'
...

    </script> 
</head>
<body>
    <h3 align="center">The Widget Is Embedded Here!</h3>
</body>
           <div id="container-div" 
                style="height: 600px; width: 380px; padding: 0; text-align: initial">
            </div>
Nota

El widget ocupa la anchura y la altura completas del contenedor. Si el contenedor no lo puede alojar, el widget no se mostrará en la página.

Finalizar sesión de conversación

Indicador de función: enableEndConversation: true (valor por defecto: true)

A partir de la versión 21.12, el SDK agrega un botón de cierre a la cabecera del widget de chat por defecto (enableEndConversation: true) que permite a los usuarios finalizar la sesión actual.
Imagen del botón Cerrar de la cabecera del widget de chat.

Después de que los usuarios hacen clic en este botón, el SDK les presenta un mensaje de confirmación cuyo texto ("¿Está seguro de que desea finalizar la conversación? Esto también borrará el historial de conversaciones.") puede personalizar con las claves endConversationConfirmMessage y endConversationDescription. Cuando un usuario descarta la petición de datos haciendo clic en , el SDK envía a la aptitud un mensaje de evento que marca la sesión de conversación actual como finalizada. A continuación, la instancia se desconecta de la aptitud, reduce el widget de chat y borra el historial de conversaciones del usuario actual. También genera un evento chatend para el que puede registrarse:
Bots.on('chatend', function() {
    console.log('The conversation is ended.');
});
Al abrir el widget de chat después, se inicia una nueva sesión de conversación.
Nota

También puede terminar una sesión llamando al método Bots.endChat() (que se describe en la referencia que acompaña al SDK de Oracle Web que está disponible en la página Descargas). La llamada a este método puede resultar útil cuando el SDK se inicializa en el modo sin cabecera.

Enfoque en la primera acción de un mensaje

Indicador de función: focusOnNewMessage: 'action' (valor por defecto: 'input')

Para los usuarios que prefieren la navegación basada en teclado (donde se incluyen los usuarios avanzados), puede cambiar el enfoque del campo de introducción de datos del usuario al primer botón de acción (o más a la izquierda) de un mensaje. Por defecto, el widget de chat devuelve el enfoque al campo de introducción de datos del usuario con cada mensaje nuevo (focusOnNewMessage: 'input'). Esto es adecuado para los flujos de diálogo que esperan que el usuario introduzca mucho texto, pero cuando el flujo de diálogo contiene una serie de mensajes con acciones, los usuarios solo pueden seleccionar estas acciones mediante el uso de mouse o el retroceso por los separadores. Para este caso de uso, puede cambiar el enfoque al primer botón de acción del mensaje de aptitud cuando se recibe definiendo focusOnNewMessage: 'action'. Si el mensaje no contiene ninguna acción, el enfoque se define en el campo de introducción de datos del usuario.

Accesos directos de teclado y teclas de acceso directo

Al definir el objeto hotkeys, puede crear métodos abreviados de combinación de teclas Alt que activen o cambien el enfoque a elementos de interfaz de usuario en el widget de chat. Los usuarios pueden ejecutar estos accesos directos en lugar de usar el mouse o los gestos táctiles. Por ejemplo, los usuarios pueden introducir Alt + L para iniciar el widget de chat y Alt + C para contraerlo. Las teclas del teclado se asignan a los elementos mediante los pares clave-valor del objeto hotkeys. Por ejemplo:
var settings = {
    // ...,
    hotkeys: {
        collapse: 'c',  // Usage: press Alt + C to collapse the chat widget when chat widget is expanded
        launch: 'l'     // Usage: press Alt + L to launch the chat widget when chat widget is collapsed
    }
};
Al crear estos pares clave-valor:
  • Solo puede pasar una sola letra o dígito para una clave.
  • Solo puede usar las teclas de teclado a-z y 0-9 como valores.
Puede transferir el atributo de tecla de acceso directo definiendo las siguientes claves.
Nota

El atributo no es sensible a minúsculas.
Clave Elemento
clearHistory Botón que borra el historial de conversaciones.
close Botón que cierra el widget de chat y finaliza la conversación.
collapse Botón que reduce el widget de chat ampliado.
input Campo de entrada de texto en el pie de página del chat
keyboard Botón que cambia el modo de entrada de voz a texto.
language Menú de selección que muestra la lista de selección de idioma.
launch Botón de inicio del widget de chat
mic Botón que cambia el modo de entrada de texto a voz.
send Botón que envía el texto de entrada a la aptitud.
shareMenu El botón del menú Compartir en el pie de página del chat
shareMenuAudio La opción de menú en la ventana emergente del menú Compartir que selecciona un archivo de audio para compartir.
shareMenuFile La opción de menú en la ventana emergente del menú Compartir que selecciona un archivo genérico para compartir
shareMenuLocation La opción de menú de la ventana emergente del menú Compartir que selecciona la ubicación del usuario para compartir.
shareMenuVisual La opción de menú de la ventana emergente del menú Compartir que selecciona un archivo de imagen o de vídeo para compartir.

SDK desatendido

Indicador de función: enableHeadless: true (valor por defecto: false)

Al igual que los exploradores desatendidos, el SDK también se puede utilizar sin su interfaz de usuario. El SDK mantiene la conexión al servidor y proporciona las API para enviar mensajes, recibir mensajes y obtener actualizaciones sobre el estado de la red. Puede utilizar estas API para interactuar con el SDK y actualizar la interfaz de usuario. Para activar esta función, transfiera enableHeadless: true en la configuración inicial. La comunicación se puede implantar de la siguiente manera:
  • Envío de mensajes: llama a Bots.sendMessage(message) para transferir cualquier carga útil al servidor.
  • Recepción de mensajes: las respuestas se pueden enumerar para utilizar Bots.on('message:received', <messageReceivedCallbackFunction>).
  • Obtención de la actualización del estado de conexión: recibe actualizaciones sobre el estado de la conexión con Bots.on('networkstatuschange', <networkStatusCallbackFunction>). La devolución de llamada tiene un parámetro de estado que se actualiza con los valores de 0 a 3, cada uno de los cuales se asigna a estados de WebSocket:
    • 0 : WebSocket.CONNECTING
    • 1: WebSocket.OPEN
    • 2: WebSocket.CLOSING
    • 3: WebSocket.CLOSED
    • Devolver sugerencias para una consulta: devuelve una promesa que se resuelve en las sugerencias para la cadena de consulta proporcionada. La promesa se rechaza si tarda demasiado (aproximadamente 10 segundos) en recuperar la sugerencia.
      Bots.getSuggestions(utterance)
          .then((suggestions) => {
              const suggestionString = suggestions.toString();
              console.log('The suggestions are: ', suggestionString);
          })
          .catch((reason) => {
              console.log('Suggestion request failed', reason);
          });
    Nota

    Para utilizar esta API, debe activar el finalizado automático (
    enableAutocomplete: true
    ) y configurar el finalizado automático para las intenciones.

Chat multilingüe

El soporte de idioma nativo del SDK web permite al widget de chat detectar el idioma de un usuario o permitir a los usuarios seleccionar el idioma de conversación. Los usuarios pueden cambiar entre idiomas, pero solo entre conversaciones, no durante una conversación porque la conversación se restablece cada vez que un usuario selecciona un nuevo idioma.

Activar el menú de idioma

Puede activar un menú que permita a los usuarios seleccionar un idioma preferido de un menú desplegable definiendo la propiedad multiLangChat con un objeto que contenga la matriz supportedLangs, que está compuesta por etiquetas de idioma (lang) y etiquetas de visualización opcionales (label). Fuera de esta matriz, también puede definir el idioma por defecto con la clave primary (primary: 'en' en el siguiente fragmento).
multiLangChat: {
    supportedLangs: [{
        lang: 'en'
    }, {
        lang: 'es',
        label: 'Español'
    }, {
        lang: 'fr',
        label: 'Français'
    }, {
        lang: 'hi',
        label: 'हिंदी'
    }],
    primary: 'en'
}
El widget de chat muestra los idiomas soportados transferidos en un menú desplegable ubicado en la cabecera. Además de los idiomas disponibles, el menú también incluye una opción Detectar idioma. Cuando un usuario selecciona un idioma de este menú, se restablece la conversación actual y se inicia una nueva conversación con el idioma seleccionado. El idioma seleccionado por el usuario se mantiene entre las sesiones en el mismo explorador, por lo que el idioma anterior del usuario se selecciona automáticamente cuando el usuario vuelve a revisar la aptitud a través de la página que contiene el widget de chat.

Consejo:

Puede agregar un listener de evento para el evento chatlanguagechange (que se describe en la referencia que acompaña al SDK de Oracle Web que está disponible en la página Descargas), que se dispara cuando se selecciona un idioma de chat en el menú desplegable o se cambia.
Bots.on('chatlanguagechange', function(language) {
    console.log('The selected chat language is', language);
});
Estos son algunos aspectos que hay que tener en cuenta al configurar el menú desplegable de idioma:
  • Debe definir un mínimo de dos idiomas para permitir que se muestre el menú desplegable.
  • La clave label es opcional para los idiomas soportados originalmente: fr se muestra como Francés en el menú, es se muestra como Español, y así sucesivamente.
  • Las etiquetas de los idiomas se pueden definir dinámicamente transfiriendo las etiquetas con el valor i18n. Puede definir la etiqueta para cualquier idioma transfiriéndola a su clave language_<languageTag>. Este patrón permite definir etiquetas para cualquier idioma, soportadas o no soportadas, y también permite traducciones de la etiqueta en distintas configuraciones regionales. Por ejemplo:
    i18n: {
        en: {
            langauge_de: 'German',
            language_en: 'English',
            language_sw: 'Swahili',
            language_tr: 'Turkish'
        },
        de: {
            langauge_de: 'Deutsche',
            language_en: 'Englisch',
            language_sw: 'Swahili',
            language_tr: 'Türkisch'
        }
    }
    Si la propiedad i18n incluye cadenas de traducción para el idioma seleccionado, el texto para campos como el marcador de posición de entrada, el título de chat, el texto de desplazamiento para botones y los títulos de pistas cambian automáticamente al idioma seleccionado. El texto del campo solo se puede cambiar a un idioma diferente cuando haya cadenas de traducción para el idioma seleccionado. Si no existen dichas cadenas, el idioma del texto del campo no cambia.
  • El widget detecta automáticamente el idioma en el perfil de usuario y activa la opción Detectar idioma si omite la clave primary.
  • Si bien label es opcional, si ha agregado un idioma que no es uno de los idiomas soportados originalmente, debe agregar una etiqueta para identificar la etiqueta, especialmente cuando no hay ninguna cadena i18n para el idioma. Por ejemplo, si no define label: 'हिंदी', para lang: hi, el menú desplegable muestra hi en su lugar, contribuyendo a una experiencia de usuario deficiente.

Desactivar menú de idioma

A partir de la versión 21.12, también puede configurar y actualizar el idioma del chat sin tener que configurar también el menú desplegable de selección de idioma pasando multiLangChat.primary en la configuración inicial sin pasar también una matriz multiLangChat.supportedLangs. El valor transferido en la variable primary se define como el idioma de chat para la conversación.

Detección de idioma

Además de los idiomas transferidos, el widget de chat muestra una opción Detectar idioma en la lista desplegable. Al seleccionar esta opción, se indica a la aptitud que detecte automáticamente el idioma de la conversación del mensaje del usuario y, cuando sea posible, que responda en el mismo idioma.
Nota

Si omite la clave primary, el widget detecta automáticamente el idioma en el perfil de usuario y activa la opción Detectar idioma en el menú.

Puede actualizar dinámicamente el idioma seleccionado llamando a la API setPrimaryChatLanguage(lang). Si el valor de lang transferido coincide con uno de los idiomas soportados, se selecciona ese idioma. Cuando no se encuentra ninguna coincidencia, se activa Detectar idioma. También puede activar la opción Idioma detectado llamando a la API setPrimaryChatLanguage('und'), donde 'und' indica que no está determinado o transfiriendo multiLangChat: {primary: null} o multiLangChat: {primary: 'und'}.

Puede actualizar el idioma de chat de forma dinámica mediante la API setPrimaryChatLanguage(lang) incluso cuando el menú desplegable no se haya configurado. Por ejemplo:
Bots.setPrimaryChatLanguage('fr')
Puede actualizar el idioma de forma dinámica independientemente de si el idioma de chat está configurado inicialmente o no.
Nota

El reconocimiento de voz, cuando se configura, está disponible cuando los usuarios seleccionan un idioma soportado. No está disponible cuando se configura la opción Detectar idioma. Al seleccionar un idioma que no esté soportado por el reconocimiento de voz, se desactiva la funcionalidad de reconocimiento hasta que se seleccione un idioma soportado.

Referencia rápida de chat multilingüe

Para ello... ... Realice esta acción
Muestre la lista desplegable de selección de idioma a los usuarios finales. Transfiera multiLangChat.supportedLangs.
Defina el idioma del chat sin mostrar el menú desplegable de selección de idioma a los usuarios finales. Transfiera multiLangChat.primary.
Defina un idioma por defecto. Transfiera multiLangChat.primary con multiLangChat.supportedLangs. El valor primary debe ser uno de los idiomas soportados que incluye la matriz.
Activar detección de idioma Transfiera primary: null o primary: 'und' con multiLangChat.
Actualice dinámicamente el idioma del chat. Llame a la API setPrimaryChatLanguage(lang).

Vista web en widget

Puede configurar el comportamiento del enlace en los mensajes de chat para permitir a los usuarios acceder a páginas web desde dentro del widget de chat. En lugar de tener que cambiar de la conversación para ver una página en un separador o en una ventana del explorador independiente, un usuario puede permanecer en el chat porque el widget de chat abre el enlace dentro de una vista web.

Configuración del comportamiento de enlace a la vista web

Puede aplicar la vista web a todos los enlaces o, en un caso de uso más típico, solo para determinados enlaces. También puede personalizar la propia vista web.
  • Para abrir todos los enlaces de la vista web, transfiera linkHandler: { target: 'oda-chat-webview' } en la configuración. De esta forma se define el destino de todos los enlaces en oda-chat-webview, que es el nombre de iframe en la vista web.
  • Para abrir solo determinados enlaces en la vista web, a la vez que se garantiza que otros enlaces se abran normalmente en otros separadores o ventanas, utilice el delegado beforeDisplay. Para abrir una acción de URL de mensaje específica en la vista web, sustituya el valor 'url' del campo action.type por 'webview'. Cuando el tipo de acción es 'webview' en la función beforeDisplay, el botón de acción abrirá el enlace en la vista web al hacer clic en él.

Apertura de enlaces desde dentro de la vista web

Los enlaces embebidos en una página que se muestra dentro de la vista web solo se pueden abrir dentro de ella cuando se conviertan en un elemento de anclaje (<a>), con un atributo target definido como target="oda-chat-webview".

Personalice WebView

Puede personalizar la vista web con la configuración webViewConfig que acepta un objeto. Por ejemplo:
{ referrerPolicy: 'no-referrer-when-downgrade', closeButtonType: 'icon', size: 'tall' 
Los campos de este objeto son opcionales.
Nota

La configuración también se puede actualizar dinámicamente transfiriendo un objeto webViewConfig en el método setWebViewConfig. Cada propiedad del objeto es opcional.
Campo Valor Descripción
accessibilityTitle Cadena Nombre del elemento de marco de vista web para la accesibilidad web.
closeButtonIcon Cadena Cadena URL de imagen/SVG que se utiliza para mostrar el icono del botón de cierre.
closeButtonLabel Cadena Etiqueta de texto/título de pista para el botón de cierre.
closeButtonType
  • 'icon'
  • 'label'
  • 'iconWithLabel'
Define cómo se muestra el botón de cierre en la vista web.
referrerPolicy ReferrerPolicy Indica el sitio de referencia que se debe enviar al recuperar el recurso del marco. El valor de la política referrerPolicy debe ser una directiva válida. La política por defecto aplicada es 'no-referrer-when-downgrade'.
sandbox Matriz de cadena Matriz de cadenas de restricción válidas que permite la exclusión de determinadas acciones dentro del marco. Las restricciones que se pueden transferir a este campo se incluyen en la descripción del atributo sandbox en MDN Web Docs.
size
  • 'tall'
  • 'full'
Altura de la vista web en comparación con la altura del widget de chat. Cuando se define en 'tall', se define como el 80% de la altura del widget, cuando se define en 'full', es igual a la altura del widget.
title Cadena Título que se muestra en la cabecera del contenedor de vista web.
No todos los enlaces se pueden abrir dentro de la vista web. Estos son algunos de los motivos por los que:
  • Las páginas que proporcionan la cabecera de respuesta X-frame-options: deny o X-frame-options: sameorigin no se pueden abrir en la vista web debido a restricciones del servidor que impiden que la página se abra dentro de iframes. En estos casos, la vista web presenta el enlace de nuevo al usuario para que pueda abrirlo en una nueva ventana o separador.
  • Debido a las restricciones del servidor, las páginas de autorización no se pueden abrir dentro de WebViews, ya que las páginas de autorización siempre devuelven X-frame-options: deny para evitar un ataque de secuestro de clics.
  • Enlaces externos, que no se pueden abrir correctamente en la vista web. Solo los enlaces embebidos en los mensajes de la conversación se pueden abrir en la vista web.
    Nota

    Dado que los mensajes externos son incompatibles con la vista web, no dirija ningún enlace externo para que se abra en la vista web.
Cuando un enlace no se puede abrir en la vista web, el widget presenta al usuario algún texto informativo y un enlace a la vista web, que abre la página en un nuevo separador cuando se hace clic en él. Puede personalizar este texto mediante la cadena de traducción webViewErrorInfoText i18n:
settings = {
    URI: 'instance',
    //...,
    i18n: {
        en: {
            webViewErrorInfoText: 'This link can not be opened here. You can open it in a new page by clicking {0}here{/0}.'
        }
    }
}

Sondeo largo

Indicador de función: enableLongPolling: true (valor por defecto: false)

El SDK utiliza WebSockets para conectarse al servidor y conversar con las aptitudes. Si, por algún motivo, el WebSocket está desactivado en la red, se pueden utilizar llamadas HTTP tradicionales para chatear con la aptitud. Esta característica se conoce como sondeo largo porque el SDK debe llamar, o sondear, continuamente para recuperar los mensajes más recientes de la aptitud. Esta función de devolución de llamada se puede activar transfiriendo enableLongPolling: true en la configuración inicial.

Indicador de escritura para conversaciones entre usuario y agente

Indicador de función: enableSendTypingStatus: booleano (valor por defecto: false)

Esta función permite a los agentes determinar si los usuarios siguen participando en la conversación enviando el estado del usuario al agente en directo. Cuando enableSendTypingStatus se define en true, el SDK envía un evento de estado de escritura RESPONDING junto con el texto que el usuario está escribiendo actualmente a Oracle B2C Service u Oracle Fusion Service. Esto, a su vez, muestra un indicador de escritura en la consola del agente. Cuando el usuario ha terminado de escribir, el SDK envía un evento LISTENING al servicio para ocultar el indicador de escritura en la consola del agente.

La configuración typingStatusInterval, que tiene un valor mínimo de tres segundos, limita la actualización del estado de escritura.

Para enviar un agente de Oracle B2C Service tanto el texto como el estado de escritura, enableAgentSneakPreview (que por defecto es false) se debe definir en true y la previsualización de anticipo se debe activar en la configuración de chat de Oracle B2C Service.
Nota

No tiene que configurar el estado de escritura activa en el lado del usuario. El usuario puede ver el estado de escritura del agente por defecto. Cuando el agente está escribiendo, el SDK recibe un mensaje de estado RESPONDING que da como resultado la visualización de un indicador de escritura en la vista del usuario. Del mismo modo, cuando el agente está inactivo, el SDK recibe un mensaje de estado LISTENING que oculta el indicador de escritura.

Reconocimiento de voz

Indicador de función: enableSpeech: true (valor por defecto: false)

Al definir enableSpeech: true se activa el botón Micrófono para mostrarse en lugar del botón Enviar cada vez que el campo de entrada de usuario esté vacío.

Su aptitud también puede utilizar el reconocimiento de voz con el método startVoiceRecording(onSpeechRecognition, onSpeechNetworkChange) para iniciar la grabación y el método stopVoiceRecording para parar la grabación. (Estos métodos se describen en la Guía del usuario incluida en el SDK.)

Con el indicador enableSpeechAutoSend, puede configurar si desea o no enviar el texto que se reconoce de la voz del usuario directamente al servidor de chat sin ninguna entrada manual del usuario. Al definir esta propiedad en true (valor por defecto), permite que la respuesta de voz del usuario se envíe automáticamente al servidor de chat. Al definirla en false, permite al usuario editar el mensaje antes de enviarlo al servidor de chat o suprimirlo.

Visualizador de voz

Configuración de función: enableSpeechAutoSend

El widget de chat muestra un visualizador de voz cuando los usuarios hacen clic en el icono de voz Imagen del icono Hablar del Visualizador de voz.. Es un indicador de si el nivel de audio es lo suficientemente alto como para que el SDK capture la voz del usuario. El mensaje del usuario, tal y como se reconoce como texto, se muestra debajo del visualizador.
Nota

El modo Voz se indica cuando aparece el icono Imagen del icono Teclado. del teclado.
Descripción de Voice-visualizer.png
Descripción de la ilustración voice-visualizer.png
Debido a que la configuración por defecto de enableSpeechAutosend es true (enableSpeechAutoSend: true), los mensajes se envían de forma automática una vez que han sido reconocidos. La definición de enableSpeechAutoSend: false cambia el modo de entrada a texto una vez que se ha reconocido el mensaje de voz, lo que permite a los usuarios editar o completar sus mensajes con texto antes de enviarlos de forma manual. Como alternativa, los usuarios pueden completar sus mensajes con voz haciendo clic a continuación en el icono de voz antes de enviarlos de forma manual.
Nota

El visualizador de voz se crea mediante AnalyserNode. Puede implantar el visualizador de voz en el modo sin cabecera mediante el método startVoiceRecording. Consulte SDK para obtener más información sobre AnalyserNode y los niveles de frecuencia.