Integración con iFrame

A menudo, la forma más fácil de integrar las traducciones de Wordly en una plataforma o aplicación web es incrustar el cliente 'attend' (asistir) en un iFrame de HTML.

Para obtener el iFrame de asistir

En el panel de control de Wordly, selecciona Sesiones en el menú del lado izquierdo. Haz clic en "Obtenga enlaces para unirse".
Expande la casilla “Embed Wordly” (Incrustar Wordly) y haz clic en “Copy iFrame Attend URL” (Copiar URL de iFrame para asistir).

Incrustación de iFrame

El código HTML básico para incrustar las traducciones de Wordly en un iFrame utiliza la etiqueta de iFrame estándar de HTML:

<iframe src="url" />

Lo colocas en tu aplicación donde quieras que aparezcan las traducciones de Wordly. Por lo general, querrás establecer el ancho (width) y la altura (height) para que el iFrame llene el espacio que le dejas. Esto se puede hacer directamente en la etiqueta de iFrame, o mediante un atributo de clase. Ejemplo:

<iframe src="url" width="100%" height="300px" />

URL de origen (Source URL)

La URL a usar como origen debe contener la ID de sesión de Wordly que desees. El formato es:

https://attend.wordly.ai/frame/<session id>

Ejemplo:

https://attend.wordly.ai/frame/ABCD-1234

donde ABCD-1234 es la ID de sesión de Wordly obtenida de la sesión.

Parámetros de la URL de origen

La URL acepta una serie de argumentos opcionales que se pueden usar con sesiones que requieren una contraseña y para cambiar la forma en que se muestra el contenido del iFrame:

key: la contraseña de la sesión si se requiere una para asistir. Las sesiones abiertas no requieren una contraseña.
lang: el código de idioma inicial de las traducciones para este usuario. Esto no se usa a menudo. El idioma de traducción por defecto será inglés o el que el usuario haya elegido en el pasado. Lee Códigos de idioma para ver la lista de códigos de idioma.
fgcolor: un color HTML para el texto en el iFrame. Este valor puede ser cualquier nombre de color HTML válido o un color hexadecimal RGBA personalizado. El valor predeterminado es blanco.
bgcolor: un color HTML para el fondo del iFrame. Este valor puede ser cualquier nombre de color HTML válido o un color hexadecimal RGBA personalizado. El valor predeterminado es negro.
fgsize: un valor de tamaño HTML para el texto en el iFrame. Este valor puede ser cualquier tamaño de texto HTML válido, incluidas las unidades. El valor predeterminado es el tamaño del texto del contenedor y no se usa a menudo.
tags: un valor booleano que se puede establecer en "false" para evitar la visualización de los nombres de los oradores en el iFrame. El valor predeterminado es "true".
speakerLanguage: un valor booleano que se puede establecer en "false" para ocultar la visualización del idioma que está utilizando el orador. El valor predeterminado es "true".
enableTTS: un valor booleano que se puede establecer en "true" para habilitar el soporte de texto a voz (TTS). Cuando este valor es 'true', se añaden nuevos botones a la barra inferior que permiten al usuario seleccionar una voz para que el texto se hable en voz alta, y un botón de silenciar/activar sonido. El valor predeterminado es "false".
finalOnly: un valor booleano que se puede establecer en "true" para cambiar el valor predeterminado para la configuración de usuario Show only complete phrases (Mostrar solo frases completas). Cuando este valor es “true”, solo se mostrarán las traducciones completadas al usuario y se suprimirán las traducciones parciales.
showScrollbar: un valor booleano que se puede establecer en "false" para evitar que aparezca la barra de desplazamiento en el marco. Cuando este valor se establece en “false”, los usuarios no pueden desplazarse hacia atrás para leer partes anteriores de una transcripción.
hide: una lista de códigos de idioma de Wordly para ocultar al usuario. Este parámetro es una cadena de códigos separados por comas. Los idiomas especificados se eliminarán de los distintos menús presentados al usuario. Por ejemplo: ?hide=en,es,fr eliminará inglés, español y francés de los menús de idioma. Consulta Códigos de idioma para ver la lista de códigos de idioma.
show: una lista de códigos de idioma de Wordly para mostrar al usuario. Este parámetro es una cadena de códigos separados por comas. Los idiomas especificados serán los únicos incluidos en los distintos menús presentados al usuario.
Ejemplo: ?show=en,es,fr reduce todos los menús de idioma a solo inglés, español y francés. Consulta Códigos de idioma para ver la lista de códigos de idioma.

Ejemplos:

Una url para mostrar la sesión 'DCBA-4321' en español con texto grande y verde sería:

https://attend.wordly.ai/frame/DCBA-4321?lang=es&fgcolor=00FF00&fgsize=5em

y esto incrustado en un iFrame en tu HTML podría verse así:

<iframe src="https://attend.wordly.ai/frame/DCBA-4321?lang=es&fgcolor=00FF00" width="100%" />

Una url para mostrar la sesión "DCBA-4321" con TTS habilitado:

https://attend.wordly.ai/frame/DCBA-4321?enableTTS=true