How to Embed Glossa Live Translations

Glossa Live offers a lightweight, customizable embed view that allows you to display live translations directly on your own website or in presentation software like ProPresenter. This guide explains how to use the embed URL and customize its appearance.

The Embed URL Structure

The basic structure of the embed URL is:

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

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

Customization Options

You can customize the look and feel of the translation text by adding query parameters to the URL.

Language

lang

Specify the target language code (e.g., en, es, fr). If omitted, it defaults to the service's primary language or English.

Background Color

background-color (or bg)

Set the background color using a hex code. You can include or exclude the hash symbol.
Default: #ffffff (White)

Example: ?bg=000000 (Black)

Text Color

font-color (or color)

Set the text color using a hex code.
Default: #000000 (Black)

Example: ?color=ffffff (White)

Font Size

font-size

Set the font size. Supports standard CSS units (px, rem, em, vw).
Default: Responsive clamp(28px, 6vw, 48px)

Example: ?font-size=32px

Text Alignment

text-align (or align)

Align the text: left, center, right, or justify.
Default: center

Font Family

font-family

Specify a CSS font stack.
Default: System sans-serif stack

Example Usage

Here is an example of an HTML iframe tag that embeds a Spanish translation with white text on a black background:

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

Note: We recommend adding allow="autoplay" to ensure audio features (if enabled) work correctly without user interaction, although the embed view is primarily for text.

← Back to Home