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