How to Embed a Live Class Session in a Custom Website

You can embed a specific Live Class session in your website using an iframe. Live Class does not provide a class catalog through the embed, so you must manage your class list or course pages on your own website or LMS.

This guide explains how to configure your website, generate secure embed URLs, and display sessions to learners.

Step 1: Create a Session and Record Its ID

Create the required session in Live Class.
Record the session ID in your website or application.
Make sure the session has an attendee invite link.

You will use the session ID to request an embed URL for the selected session.

📸 Screenshot: Live Class session details showing the session ID.

Step 2: Configure Your Website Origin

In Live Class, go to Integrations → Embed.
Add the exact origin of the website page that will contain the iframe.

For example:

https://courses.example.com

Enter only the scheme, hostname, and optional port. Do not include a page path or wildcard.

📸 Screenshot: Integrations → Embed showing the allowed origins.

Step 3: Generate and Secure Your Embed API Key

In Integrations → Embed, generate an Embed API key.
Store the key securely in your server's secret manager or equivalent secure configuration.
Use this key only from your backend when requesting embed URLs.

Important security requirements:

The key is displayed only once. You can rotate or revoke it from the Embed settings.
The Embed API key is accepted only by the embed-launch endpoint.
Do not use a general lc_... integration key or extract the dashboard account bearer token from browser storage.
Never expose the Embed API key in frontend JavaScript or send it to the browser.

📸 Screenshot: Embed API key generation in Integrations → Embed.

Step 4: Test the Embed from the Dashboard

You can test the setup before integrating it into your application.

Go to Integrations → Embed → Quick test.
Select an existing session with an attendee invite link.
Select an origin that has already been allowed.
Generate a temporary embed URL.
Copy the generated iframe markup and paste it into a page hosted on the selected origin.

The Quick test resolves the attendee invite on Live Class servers and returns a temporary, attendee-only embed URL that expires after 10 minutes. The invite token is not returned to the browser.

Note: The Quick test does not add allowed origins or preview the iframe inside the dashboard. Test the iframe on your actual website to verify browser framing behavior.

Opening the URL directly in a new tab does not test whether embedding is allowed. Similarly, embedding it on app.liveclass.io does not verify that your own website's origin is configured correctly.

If the embed URL returns a 504 error, contact Live Class support with the timestamp and request ID. The embed host's /embed* route must reach the API.

📸 Screenshot: Integrations → Embed → Quick test.

Step 5: Request an Embed URL from Your Backend

For each page response that needs to display a session, your backend must request an attendee embed URL using the Embed API key.

The following JavaScript example demonstrates the request:

const response = await fetch(
  'https://api.liveclass.io/v1/integrations/embed-launch',
  {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.LIVECLASS_EMBED_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      sessionId: session.id,
      embedOrigin: 'https://courses.example.com',
    }),
  },
);

if (!response.ok) {
  throw new Error(`LiveClass embed request failed (${response.status})`);
}

const { embedPath, expiresAt } = await response.json();
const iframeUrl = new URL(
  embedPath,
  'https://app.liveclass.io'
).toString();

Replace session.id with the selected session's ID and the example origin with your website's configured origin. Keep the API key on the server.

The response provides an embedPath and an expiresAt value. Build the iframe URL using the returned path and the Live Class app base URL, rather than constructing the embed path yourself.

Step 6: Display the Session in an Iframe

Render the freshly generated URL in an iframe on your website.

Use the following example markup, replacing the placeholder src with the URL returned by your backend:

<iframe
  src="FRESH_URL_RETURNED_BY_LIVECLASS"
  title="LiveClass session"
  allow="camera; microphone; display-capture; autoplay; fullscreen; clipboard-write"
  referrerpolicy="no-referrer"
  style="width:100%;min-height:640px;border:0"
></iframe>

The allow attribute grants the browser permissions the session may need, including camera, microphone, screen sharing, autoplay, fullscreen, and clipboard access.

Your website must use HTTPS for camera and microphone access.

📸 Screenshot: A Live Class session embedded in a website page.

Step 7: Manage Embed URL Expiry and Caching

Embed URLs contain short-lived credentials.

The Embed API key flow generates URLs that expire after 10 minutes.
The legacy account-bearer exchange supports expiry periods ranging from 1 minute to 1 hour.
Generate URLs server-side for each page response that needs a session.
Return the rendered page with caching disabled.
If an embed URL expires, request a fresh one.

Do not treat an embed URL as a permanent class link, cache it for reuse, or place an attendee invite token directly in the URL.

Step 8: Build Your Own Class List

If your website needs a course catalog or list of available sessions, manage it within your website or LMS.

Create and maintain your class list on your own platform.
Store the corresponding Live Class session IDs.
When a learner selects a class, send its session ID to your backend.
Request a fresh embed URL for that session.
Return the page containing the iframe.

The Live Class embed displays only the selected session. It does not list available classes or allow learners to switch to another session through the embed itself.

Security and Troubleshooting

Keep the API key on the server. Only the short-lived embed URL should be sent to the browser. The dashboard Quick test uses the signed-in session and resolves the attendee invite internally.

Use attendee access for learners. The Embed API key flow mints attendee access. The legacy account-bearer flow can also exchange a host invite, but you must never use a host invite on a learner-facing page.

Verify the origin and framing policy. Confirm that your website's exact origin is allowed and that Live Class serves the /embed route through its API/CDN configuration with the appropriate origin-specific framing policy. Test from the actual website, not just a browser tab.

Request a new URL when one expires. Do not reuse expired URLs or rely on cached embed credentials.

Conclusion

To embed Live Class securely, configure your website's allowed origin, generate an Embed API key, request a short-lived attendee URL from your backend, and render it in an iframe. Manage your class catalog separately and generate a fresh embed URL whenever a learner opens a session.

Was this article useful?

Dislike