Ai-Live Captions in an iframe

You can display Ai-Live captions on your own website using an iframe.

What is an iframe?

An iframe is a way to embed content from one website into another.

In our case, we use iframes to enable you to embed live captions from Ai-Live into your own web pages.

Using the Ai-Live iframe

We can work with you to set up any iframe or viewer settings you may need for your live events. However, you can also configure things yourself using the below parameters.

Standard iframe Code

You can use the below code as a starting point for your iframe embed into your website.

<iframe frameborder="0" scrolling="no" 
src="https://au.ai-live.com/CaptionViewer/Join/WhiteLabel?
		sessionID=XXXXXXXXXXX
		&font=
		&size=
		&colour=
		&background=
		&oneword=
		"
width=""
height="">
</iframe>

• Copy and paste this into the HTML code of your page, blog post or wherever you’d like to display your captions
• At the sessionID= line, you will just need to replace XXXXXXXXXXX with the unique Session ID we provide you with
• This will work with default settings, needing no further input from you

Customise Your iframe

We support a number of different customisation options to change the way your captions are displayed in your iframe.

The supported parameters are:

Font

You can change the font of your captions using the &font= parameter.

Type the name of the font you’d like your captions to appear in, such as Verdana or Times New Roman.

For example:

&font=Verdana

Leave this parameter blank (or delete it entirely if you’d like) to use the default font.

Text Size

You can change the text size of your captions using the &size= parameter.

Enter the size you’d like to display your text in using pixels (px) or points (pt).

For example:

&size=12pt
or
&size=20px

Leave this parameter blank (or delete it entirely if you’d like) to use the default text size of 20pt.

Text Colour

You can change the text colour of your captions using the &colour= parameter.

Type the colour you’d like your captions to appear in, such as White or Red, or as a colour value in the format $000000.

For example:

&colour=White
or
&colour=$ffffff

Leave this parameter blank (or delete it entirely if you’d like) to use the default text colour of white.

Background Colour

You can change the background colour of your caption display using the &background= parameter.

Type the colour you’d like your background to be in words, such as White or Red, or as a colour value in the format $000000.

For example:

&background=Black
or
&background=$000000

Leave this parameter blank (or delete it entirely if you’d like) to use the default background colour of black.

Caption Display Mode (“One Word at a Time”)

You can choose to display your Ai-Live captions flowing along “one-word-at-a-time”, or as whole phrases or sentences appearing all at once.

You set this using the &oneword= parameter.

The options for &oneword= are:

• off
• slow
• medium
• fast

Using off will turn off “one-word-at-a-time” mode, and make your captions appear in phrases or sentences. Slow, medium and fast will set how quickly each word should appear.

For example:

&oneword=off
or
&oneword=medium

iframe Width

You can change the width of the iframe itself using the width= parameter. Enter the width you’d like your iframe to be, in pixels (px).

For example:

width="500"

iframe Height

You can change the height of the iframe itself using the height= parameter. Enter the height you’d like your iframe to be, in pixels (px).

For example:

height="200"

Complete Sample iframe Code

<iframe frameborder="0" scrolling="no" 
src="https://au.ai-live.com/CaptionViewer/Join/WhiteLabel?
		sessionID=XXXXXXXXXXX
		&font=Verdana
		&size=20pt
		&colour=White
		&background=Black
		&oneword=medium
		"
width="500"
height="200">
</iframe>