Embedding live captions on your church website

If you stream services on your own website, you can show the live translation right alongside the video using Glossa’s embed view. It’s a lightweight page you drop in with an iframe, and you can style it to match your site.

The embed URL

The basic address is:

https://glossa.live/embed/{SERVICE_ID}

Replace {SERVICE_ID} with your Service ID: the code at the end of your listener link, shown next to the Start Streaming button on the service page.

Adding it to your page

Paste an iframe like this into your site where you want the captions to appear:

<iframe
  src="https://glossa.live/embed/YOUR_SERVICE_ID?lang=es&bg=000000&color=ffffff&font-size=36px"
  width="100%"
  height="400"
  frameborder="0"
  allow="autoplay"
></iframe>

We recommend keeping allow=“autoplay” so that any audio features work correctly without an extra tap, even though the embed view is mainly for text.

Customization options

Add any of these to the end of the URL as settings (join the first one with ? and the rest with &):

lang sets the language, such as en, es or fr. Always set it: without lang the embed falls back to the first language in Glossa’s list, which is not your service’s language.
bg (or background-color) sets the background color as a hex code, with or without the hash. Default is white (ffffff). Example: ?bg=000000 for black.
color (or font-color) sets the text color as a hex code. Default is black (000000). Example: ?color=ffffff for white.
font-size accepts standard CSS units like px, rem, em, or vw. The default is responsive. Example: ?font-size=32px.
align (or text-align) sets alignment to left, center, right, or justify. Default is center.
font-family sets a CSS font stack. The default is a standard system sans-serif.
padding sets the space around the text, in CSS units. Example: ?padding=24px.
sentences (or lines) sets how many recent sentences stay on screen. Example: ?sentences=2.

Backgrounds are solid colours only. The embed view cannot be made transparent: a colour code with a transparency value is ignored and falls back to white, so match the background to the page or screen behind it.

A worked example

This shows the Spanish translation in white text on a black background, left aligned, at 32 pixels:

https://glossa.live/embed/YOUR_SERVICE_ID?lang=es&bg=000000&color=ffffff&align=left&font-size=32px

If you want to offer more than one language on your site, you can add a separate embed for each, or give visitors a set of links that open the embed in their chosen language.

The complete parameter reference, including the full listener page in an iframe, is on Embed and iframe parameters.

Still stuck?Chat with us on glossa.live or write to info@glossa.live. Most questions get an answer within the day.

Chat with us Submit a ticket