Guide technique pour l'intégration du widget iframe Interprefy
Guide d'intégration de la solution d'interprétation simultanée à distance d'Interprefy avec une plateforme de réunion basée sur un navigateur.
Interprefy élimine les barrières linguistiques pour les événements organisés sur toutes les plateformes. Nous nous intégrons à plus de 70 plateformes de webconférence et d'événements virtuels, offrant :
- Interprétation simultanée
- Traduction vocale par IA
- Interprétation en langue des signes
- Sous-titres automatiques en direct
- Sous-titres en direct traduits automatiquement
Le widget de sélection de langue adaptatif d'Interprefy permet au public d'accéder à ces services de trois manières différentes :
- Widget iframe avec postMessage
- fenêtre contextuelle de sélection de la langue
- Nouvelle fenêtre de navigateur
Option 1 : widget iframe avec postMessage
Vous pouvez intégrer le sélecteur de langue Interprefy directement dans une page Web existante en le plaçant comme widget dans une iframe en 2 étapes simples :
- Utilisez une balise iframe pour ouvrir un lien de connexion Interprefy, au format suivant : https://interpret.world/integrationlink?token=thisisyourtoken
- Remplacez « thisisyourtoken » par le jeton d'événement réel fourni par Interprefy.
Des paramètres de requête supplémentaires sont disponibles pour configurer le widget :
- video="true / false"
Ce paramètre est utilisé pour la langue des signes ; la valeur par défaut est false. - captions="true/false"
: si la valeur est « true », le widget Interprefy affichera les sous-titres s’ils sont disponibles. Notez que si l’événement ne comporte pas de sous-titres, la valeur « true » n’aura aucun effet, si ce n’est l’affichage de l’icône en forme d’œil. - lang="ENG / code pays à 3 lettres"
Ce paramètre est utilisé pour présélectionner une langue, qui permettra à l'intégrateur de modifier la langue par programmation ; la valeur par défaut est « aucun ». - audio-« true / false » :
si cette option est désactivée, l’événement ne contient que des sous-titres. Dans ce cas, aucune interprétation audio n’est proposée, seuls des sous-titres s’affichent. L’icône du casque audio disparaît également. Notez qu’il est rare de définir ce paramètre sur « true », car il s’agit du comportement par défaut. - cc="ENG / code pays à 3 lettres"
: définit la langue des sous-titres à l'ouverture du widget. L'utilisateur peut la modifier ultérieurement.
L'interaction avec le widget Interprefy se fait via l'API postMessage en utilisant la fonction suivante : window.addEventListener("message", (event) => {…}).
Deux types d'événements sont publiés par le widget, permettant à la plateforme de réagir à un changement :
- Événement de changement de langue
- L'événement de changement de langue est déclenché lorsque l'utilisateur sélectionne ou resélectionne une langue via les commandes du widget. Par exemple, si l'utilisateur sélectionne l'anglais dans le widget, l'événement suivant sera publié :
{
event:”language-changed”, language
:”ENG”
}.
2. L'événement de mise en sourdine du plancher - L'événement Floor Mute est déclenché lorsque l'interprète commence la traduction. Cela permet à la plateforme hôte de réagir en coupant le son de sa source audio. Par exemple, si l'utilisateur est abonné à la chaîne française et que l'interprète français commence à parler sur cette chaîne, l'événement suivant sera publié :
{
event:”floor-mute”,
floorMute:”true”,
issuerLang:”FRA”
}
Voici un exemple de code iframe :
<!DOCTYPE html>
<html>
<head>
<title>Exemple de page d'intégration iFrame 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"
défilement="non"></iframe>
</body>
</html>
La largeur minimale est de 300 px et la hauteur minimale de 100 px. Les plateformes peuvent utiliser des dimensions d'iframe plus importantes pour s'adapter à la conception de l'interface utilisateur. Interprefy recommande un placement sur le côté de la fenêtre vidéo.
Les participants verront le sélecteur de langue sur la même page que la diffusion en direct. Le code de démonstration diffuse en boucle l'audio d'un interprète traditionnel et la traduction vocale par IA d'Interprefy. Les utilisateurs peuvent ensuite choisir la langue d'écoute (veuillez noter que l'option de sélection des sous-titres sera affichée, mais aucun sous-titre n'est activé dans cette version de démonstration ; veuillez contacter l'équipe pour organiser un test des sous-titres). Une fois la langue sélectionnée, veuillez couper le son de la diffusion en direct.
Recommandations :
- N'insérez le widget que sur les pages protégées par une authentification utilisateur afin d'éviter un trafic excessif.
- Ajoutez un bouton (par exemple « interprétation ») pour que seuls les utilisateurs ayant besoin d'interprétation puissent lancer le widget.
Exemple : Interpréter un widget iframe intégré sur la plateforme événementielle ON24


Option 2 : Fenêtre contextuelle de sélection de la langue
Vous pouvez ajouter en deux étapes simples un petit bouton ou un lien sur votre site web qui ouvre une fenêtre contextuelle de sélection de la langue :
- Ajoutez le court extrait HTML suivant à votre page de webdiffusion :
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');
- Remplacez « thisisyourtoken » par le jeton d'événement réel fourni par Interprefy.
Lorsque vos participants cliqueront sur le bouton/lien ajouté et sélectionneront leur langue, ils entendront instantanément l'interprétation en temps réel. Pour éviter d'entendre deux flux audio, ils devront couper le son de la conférence originale.
Exemple : Fenêtre contextuelle de sélection de la langue sur la plateforme événementielle Zuddl

Option 3 : Nouvelle fenêtre de navigateur
La troisième option consiste à ajouter un lien ou un bouton qui ouvrira le sélecteur dans une nouvelle fenêtre de navigateur internet.
- Envoyez le lien suivant à vos participants et demandez-leur de le coller dans une nouvelle fenêtre de navigateur :
https://interpret.world/integrationlink?token=livedemo (où livedemo est remplacé par le jeton de votre événement)
2. Les participants saisissent ensuite le jeton d'événement fourni par Interprefy.
Lorsque vos participants cliquent et sélectionnent leur langue, ils entendront instantanément l'interprétation en temps réel ou pourront accéder aux sous-titres en direct. Dans le cas de l'interprétation audio, ils doivent couper le son de la diffusion web originale afin d'éviter d'entendre deux flux audio simultanément.
Exemple : Nouvelle fenêtre de navigateur avec interprétation en langue des signes activée

