Guía técnica para incrustar el widget iframe de Interprefy

Interprefy elimina las barreras lingüísticas para eventos realizados en cualquier plataforma. Nos integramos con más de 80 plataformas de videoconferencia, reuniones y eventos, ofreciendo:

Interpretación simultánea
Traducción de voz con IA
Interpretación de lengua de señas
Subtítulos en vivo automáticos
Subtítulos / leyendas en vivo traducidos automáticamente

El widget selector de idioma responsivo de Interprefy permite que la audiencia acceda a estos servicios de tres maneras diferentes:

widget iframe con postMessage
Ventana emergente del selector de idioma
Nueva ventana del navegador

Términos clave

Widget iframe de Interprefy
Un selector de idioma y reproductor responsivo que puede incrustarse en una página de evento. Los asistentes lo usan para seleccionar su idioma de interpretación preferido, el idioma de subtítulos o la opción de accesibilidad disponible.

Token del evento
Un código de acceso único proporcionado por Interprefy para su evento. Reemplace el token de demostración en los ejemplos a continuación con el token suministrado para su evento.

API postMessage
Una API de navegador que permite al widget incrustado de Interprefy enviar eventos a la página anfitriona, como cuando un asistente cambia de idioma o cuando el audio del piso debe silenciarse.

Antes de comenzar

Asegúrese de tener:

El token del evento Interprefy
Acceso para editar el HTML o JavaScript de la página del evento
Confirmación de los servicios habilitados para el evento, como audio de interpretación, traducción de discurso mediante IA, interpretación de lengua de señas o subtítulos en tiempo real
Los códigos de idioma de tres letras requeridos para cualquier audio o subtítulo preseleccionado

Opción 1: widget iframe con postMessage

Puede integrar el selector de idioma Interprefy directamente en una página web existente colocándolo como un widget en un iframe en 2 pasos simples: :

Utilice una etiqueta iframe para abrir un enlace de inicio de sesión de Interprefy, en el siguiente formato: https://interpret.world/integrationlink?token=thisisyourtoken
Reemplace “thisisyourtoken” con el token de evento real proporcionado por Interprefy.

Hay parámetros de consulta adicionales disponibles para configurar el widget:

video=“verdadero / falso”
Este parámetro se utiliza para el lenguaje de señas, la configuración predeterminada es falso.
captions=“verdadero / falso”
Cuando se establece en verdadero, este parámetro significa que el widget Interprefy mostrará subtítulos si están disponibles. Tenga en cuenta que si el evento no incluye subtítulos, establecerlo en verdadero no tendrá ningún efecto más que mostrar el ícono del ojo.
lang=“ENG / 3 letter country code”
Este parámetro se utiliza para preseleccionar un idioma, lo que permitirá cambiar el idioma programáticamente por el integrador; la configuración predeterminada es ninguna.
audio-“verdadero / falso”
Si esto se establece en falso, el evento se convierte en un evento solo de subtítulos. Eso es un evento donde no hay interpretación audible, solo subtítulos mostrados. Esto también eliminará el ícono de auriculares. Tenga en cuenta que no es habitual establecer este parámetro en verdadero, ya que ese es el comportamiento predeterminado.
cc=”ENG / código de país de 3 letras”
Establece el idioma de los subtítulos al abrirse a un idioma predeterminado. Esto aún puede ser cambiado por el usuario una vez que el widget está abierto.

La interacción con el widget de Interprefy se realiza mediante la API postMessage utilizando lo siguiente

window.addEventListener("message", (event) => {…})

1. Evento de cambio de idioma

El evento de cambio de idioma se activa cuando el usuario selecciona o vuelve a seleccionar un idioma mediante los controles dentro del widget. Por ejemplo, el usuario selecciona el idioma inglés en el widget, se publicará el siguiente evento:

{
event:”language-changed”,
language:”ENG”
}

2. El evento de silencio de piso

El evento de silencio de piso se activa cuando el intérprete comienza la traducción. Esto permite que la plataforma anfitriona responda silenciando su audio de origen. Por ejemplo, el usuario está suscrito al canal francés, y el intérprete francés comienza a hablar en ese canal; se publicará el siguiente evento:

{
event:”floor-mute”,
floorMute:”true”,
issuerLang:”FRA”
}

Ejemplo del código iframe a continuación:

<!DOCTYPE html>

<html>

<head>

<title>Página de muestra de integración iFrame de Interprefy</title>

</head>

<body style="margin:0;">

<iframe id="interprefyiFrame"

src="https://interpret.world/integrationlink?token=livedemo&captions=true"

style="position: relative; width:300px;height:100vh"

scrolling="no"> </iframe>

</body>

</html>

Donde el ancho mínimo es 300px y la altura mínima es 100vh. Las plataformas pueden usar dimensiones de iframe más grandes para adaptarse al diseño de la interfaz de usuario. Interprefy recomienda una ubicación al lado de la ventana de video.

Los asistentes verán el selector de idioma como parte de la misma página del webcast. El código de demostración incluye tanto el audio de intérprete tradicional como la traducción de voz de Interprefy AI ejecutándose en bucle. Los usuarios pueden entonces seleccionar su idioma preferido para escuchar el audio (tenga en cuenta que se mostrará la selección de subtítulos, pero no hay subtítulos activos en modo de demostración; por favor, contacte al equipo para organizar una prueba de subtítulos). Una vez que se seleccione un idioma, por favor silencie el audio original del webcast. 

Recomendaciones:

Coloque el widget únicamente en páginas que estén protegidas por un inicio de sesión de usuario para evitar tráfico excesivo.
Añada un botón (p. ej. "interpretación") para garantizar que solo los usuarios que requieren interpretación inicien el widget.

Ejemplo: widget iframe de Interprefy incrustado en la plataforma de eventos ON24

Opción 2: Ventana emergente del selector de idioma

Puede agregar un pequeño botón o enlace en su sitio web que abre una ventana emergente del selector de idioma en 2 pasos simples:

Agregue el siguiente fragmento HTML corto a su página de webcast:

window.open('https://interpret.world/ integrationlink?token=thisisyourtoken', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar= no,scrollbars=no,resizable=no,width=400,height=300');

Reemplace “thisisyourtoken” con el token de evento real proporcionado por Interprefy.

Cuando sus asistentes hagan clic en el botón/enlace añadido y seleccionen su idioma, escucharán instantáneamente la interpretación en tiempo real. Para evitar escuchar dos flujos de audio, deberán silenciar el audio original de la conferencia.

Ejemplo: ventana emergente del selector de idioma en la plataforma de eventos Zuddl

Opción 3: Nueva ventana del navegador

La tercera opción es añadir un enlace o botón que abrirá el selector en una nueva ventana del navegador de internet.

Envíe a sus asistentes el siguiente enlace y pídales que lo peguen en una nueva ventana del navegador:

https://interpret.world/integrationlink?token=livedemo (donde livedemo se reemplaza con el token para su evento)

2. Los asistentes introducen entonces el token del evento proporcionado por Interprefy.

Cuando sus asistentes hagan clic y seleccionen su idioma, escucharán instantáneamente interpretación en tiempo real o podrán acceder a subtítulos en vivo. En el caso de la interpretación de audio, deberán silenciar el sonido original de la transmisión para evitar escuchar dos flujos de audio.