Intégration d'iFrame

Souvent, le moyen le plus simple d'intégrer les traductions Wordly dans une plateforme ou une application Web est d'intégrer le client « assister » dans une iFrame HTML.

Intégration d'iFrame

Le code HTML de base pour intégrer les traductions Wordly dans une iFrame utilise la balise iFrame HTML standard :

    <iframe src="url" />

Vous placez ceci dans votre application partout où vous souhaitez que les traductions Wordly apparaissent. Généralement, vous voulez définir width (largeur) et height hauteur pour que l'iframe remplisse l'espace que vous lui laissez. Ceci peut être fait directement dans la balise iframe, ou via un attribut de classe. Exemple :

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

URL Source

L'URL à utiliser comme source doit contenir l'ID de session Wordly souhaité. Le format est :

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

Exemple :

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

où ABCD-1234 est l'ID de session Wordly obtenu à partir de la session.

Paramètres d'URL source

L'URL prend un certain nombre d'arguments facultatifs qui peuvent être utilisés avec des sessions nécessitant un code d'accès et pour modifier la manière dont le contenu de l'iframe est affiché:

• key: le code d'accès de la session si un est requis pour y assister. Les sessions ouvertes ne nécessitent pas de code d'accès.
• lang: le code de langue initial des traductions pour cet utilisateur. Ceci n'est pas souvent utilisé. La langue de traduction sera l'anglais par défaut ou celle que l'utilisateur a choisie dans le passé. Lisez Codes de langue pour la liste des codes de langue.
• fgcolor: une couleur HTML pour le texte dans l'iframe. Cette valeur peut être n'importe quel nom de couleur HTML valide ou une couleur hexadécimale RGBA personnalisée. La valeur par défaut est blanc.
• bgcolor: une couleur HTML pour l'arrière-plan de l'iframe. Cette valeur peut être n'importe quel nom de couleur HTML valide ou une couleur hexadécimale RGBA personnalisée. La valeur par défaut est noir.
• fgsize: une valeur de taille HTML pour le texte dans l'iframe. Cette valeur peut être n'importe quelle taille de texte HTML valide, y compris les unités. La valeur par défaut est la taille du texte du conteneur et n'est pas souvent utilisée.
• tags: une valeur booléenne qui peut être définie sur "false" pour empêcher l'affichage des noms des intervenants dans l'iframe. La valeur par défaut est "true".
• speakerLanguage: une valeur booléenne qui peut être définie sur "false" pour masquer l'affichage de la langue utilisée par l'intervenant. La valeur par défaut est "true".
• enableTTS: une valeur booléenne qui peut être définie sur "true" pour activer la prise en charge de la synthèse vocale (Text-to-Speech). Lorsque cette valeur est "true", de nouveaux boutons sont ajoutés à la barre inférieure permettant à l'utilisateur de sélectionner une voix pour que le texte soit lu à haute voix, ainsi qu'un bouton muet/rétablir le son. La valeur par défaut est "false".
• finalOnly: une valeur booléenne qui peut être définie sur "true" pour modifier la valeur par défaut du paramètre utilisateur "Afficher uniquement les phrases complètes". Lorsque cette valeur est "true", seules les traductions complétées seront affichées à l'utilisateur et les traductions partielles seront supprimées.
• showScrollbar: une valeur booléenne qui peut être définie sur "false" (faux) pour empêcher l'apparition de la barre de défilement dans le cadre. Lorsque cette valeur est définie sur "false" (faux), les utilisateurs ne peuvent pas faire défiler l'écran pour lire les parties antérieures d'une transcription.
• hide: une liste de codes de langue Wordly à masquer à l'utilisateur. Ce paramètre est une chaîne de codes séparés par des virgules. Les langues spécifiées seront supprimées des différents menus présentés à l'utilisateur. Par exemple : ?hide=en,es,fr supprimera l'anglais, l'espagnol et le français des menus de langue. Consultez Codes de langue pour la liste des codes de langue.
• show: une liste de codes de langue Wordly à afficher à l'utilisateur. Ce paramètre est une chaîne de codes séparés par des virgules. Les langues spécifiées seront les seules incluses dans les différents menus présentés à l'utilisateur. Exemple : ?show=en,es,fr réduit tous les menus de langue à l'anglais, l'espagnol et le français uniquement. Consultez Codes de langue pour la liste des codes de langue.

Exemples:

Une url pour afficher la session 'DCBA-4321' en espagnol avec du texte gros et vert serait:

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

et ceci intégré dans un iframe dans votre HTML pourrait ressembler à :

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

Un url pour afficher la session « DCBA-4321 » avec la synthèse vocale activée :

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

et ceci intégré dans un iframe dans votre HTML pourrait ressembler à :

<iframe src="https://attend.wordly.ai/frame/DCBA-4321?enableTTS=true" width="100%" />