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. Example:

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

Source URL

The url to use as the source should contain the Wordly session ID that you want. The format is:

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

Example:

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

where ABCD-1234 is the Wordly session ID obtained from the session.

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 don't 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. Read Language Codes 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. The default is the container text size and is not often used.
tags: a boolean value that can be set to “false” to prevent the display of speaker names in the iframe. The default is “true.”
speakerLanguage: a boolean value that can be set to “false” to hide the display of the language the speaker is using. The default is “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.The default is “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 Language Codes 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.
Example: ?show=en,es,fr reduces all language menus to just English, Spanish, and French. See Language Codes 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 embedded 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