iFrame Integration

Often, the easiest way to integrate Wordly translations into a platform or web application is to embed the ‘attend’ client in an HTML iFrame.

iFrame Embed

The basic HTML code for embedding Wordly translations in an iframe uses the standard HTML iframe tag:

    <iframe src="url" />

You place this in your application wherever you would like Wordly translations to appear. Typically you want to set width and height so the iframe will fill the space you leave for it. This can be done directly in the iframe tag, or via a class attribute. For example:

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

Source URL

The url to use as the source is crafted from the Wordly session that you want to show your users. The basic format is:

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

for example, something like:

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

where ‘ABCD-1234’ would be replaced with a Wordly session ID obtained from the Portal at https://portal.wordly.ai.

Source URL parameters

The url takes a number of optional arguments that can be used with sessions that require a passcode and to change the way the iframe content is displayed:

• key: the session passcode if one is required to attend. Open sessions do not require a passcode.
• lang: the initial language code of the translations for this user. This is not often used. The translation languge will default to English or whatever the user has chosen in the past. See languages for the list of language codes.
• fgcolor: an HTML color for the text in the iframe. This value can be any valid HTML color name or a custom hex RGBA color. The default is white.
• bgcolor: an HTML color for the background of the iframe. This value can be any valid HTML color name or a custom hex RGBA color. The default is black.
• fgsize: an HTML size value for the text in the iframe. This value can be any valid HTML text size, including units. This defaults to the container text size and is not often used.
• tags: a boolean value that can be set to “true” to display speaker names in the iframe. This defaults to “false”.
• speakerLanguage: a boolean value that can be set to “false” to hide the display of the language the speaker is using. This defaults to “true”.
• enableTTS: a boolean value that can be set to “true” to enable text-to-speech support. When this value is ‘true,’ new buttons are added to the bottom bar allowing the user to select a voice for the text to be spoken out loud, and a mute/unmute button. This defaults to “false“.
• finalOnly: a boolean value that can be set to “true” to change the default value for the “Show only complete phrases” user setting. When this value is “true,” only completed translations will be shown to the user and partial translations will be suppressed.
• showScrollbar: a boolean value that can be set to “false” to prevent the scrollbar from appearing in the frame. When this value is set to “false,” users cannot scroll back to read earlier parts of a transcript.
• hide: a list of Wordly language codes to hide from the user. This parameter is a string of codes separated by commas. The specified languages will be removed from the various menus presented to the user. For example: ?hide=en,es,fr will remove English, Spanish, and French from the language menus. See languages for the list of language codes.
• show: a list of Wordly language codes to show to the user. This parameter is a string of codes separated by commas. The specified languages will be the only ones included in the various menus presented to the user. For example: ?show=en,es,fr will reduce all language menus to just English, Spanish, and French. See languages for the list of language codes.

Examples:

A url to display session ‘DCBA-4321’ in Spanish with big, green text would be:

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

and this emebedded in an iframe in your HTML might look like:

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

A url to display session “DCBA-4321” with TTS enabled:

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

and this emebedded in an iframe in your HTML might look like:

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