Embedding live captions on your church website

Add Glossa's live translation to your own website with a simple, customizable iframe.

glossa

Last Update il y a un mois

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 URLThe basic address is:
https://glossa.live/embed/{SERVICE_ID}

Replace {SERVICE_ID} with your unique Service ID from your admin dashboard.


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 target language code, such as en, es, or fr. If you leave it off, it falls back to the service's primary language or English.
  • 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.

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.

 

Was this article helpful?

0 out of 0 liked this article