How to Embed LiveClass on Your Website

Embed a LiveClass session directly into your website so learners can join as attendees without leaving your page. You can test the embed using the LiveClass dashboard or set up a production integration that generates a secure, temporary embed URL for each page load.

Step 1: Access Embed

Step 2: Add Site

Under 'Allowed sites', add the origin of the page that will contain the session, such as https://www.example.com.

Include the scheme and hostname, and optionally the port. Do not include a page path, query, or wildcard.

Add each hostname separately if needed. example.com, www.example.com, and courses.example.com are different origins. The page containing the iframe must use HTTPS for browser camera and microphone access.

Step 3: Select a LiveClass Session

Create a LiveClass session before embedding it.

For a quick test: Select the session from the 'Quick test' session picker.
For production: Configure your website to associate each page or course with the correct LiveClass session ID.

Each embed opens one specific session. It does not display a session catalog.

You do not need to retrieve or store the attendee invite token. LiveClass resolves the attendee invite on the server. The Embed API key cannot launch a host.

Step 4: Test the Embed from the Dashboard

Under 'Quick test', select a session and an origin already listed under 'Allowed sites'. Generate the 'Temporary attendee embed'.

Step 5: Copy the iframe Code

'Copy' the iframe snippet and add it to a page served from the selected origin. Open that page to verify that the session loads correctly.

The temporary URL expires after 10 minutes. Do not save it in a permanent page, share it as a reusable join link, or reuse it after expiration.

Opening the URL in a new tab does not test whether your website is permitted to frame it. Test the iframe on the actual allowed website, not inside the LiveClass dashboard, which uses a different origin.

Step 6: Generate an Embed API Key

For a production integration, create an Embed API key.

Under 'Integrations' → 'Embed', find 'Embed API key' and select 'Generate key'. Copy the full key when it appears. LiveClass will not show the secret again.

If the key is lost, use 'Rotate' to replace it and update your server configuration. Rotation immediately invalidates the old key.
Use 'Revoke' to disable a key you no longer need.

The Embed API key is separate from your dashboard sign-in and the general integration API keys under 'Integrations' → 'API keys'. It works only with the embed-launch endpoint and is limited to attendee launches.

Step 7: Request a Temporary Embed URL

When your backend renders a session page, send a server-to-server request to LiveClass. Include the session ID and the registered website origin.

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: 'YOUR_LIVECLASS_SESSION_ID',
      embedOrigin: 'https://www.example.com',
    }),
  },
);

if (!response.ok) {
  throw new Error(
    `LiveClass could not create an embed URL (${response.status})`
  );
}

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

Check for a successful response before rendering the URL. The response includes an embedPath and an expiresAt value.

Use the generated iframeUrl as the iframe's src in the HTML returned to the browser.

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

Replace FRESH_URL_RETURNED_BY_LIVECLASS with the URL generated by your backend.

The embed URL contains a random, short-lived token bound to the selected session and allowed origin. It expires after 10 minutes.

Security requirements:

Generate a fresh URL whenever the page is rendered.
Disable caching for the response containing the temporary URL.
Never construct the token yourself or store the URL as a permanent link.
Never expose the Embed API key to the browser.

How the Credentials Differ

Credential	Purpose	Where to use it
Dashboard sign-in	Sign in to LiveClass	LiveClass dashboard
Embed API key	Request a temporary attendee embed URL	Website server's secret manager
Embed URL token	Load one session in an iframe for up to 10 minutes	Short-lived iframe URL
General integration API key	Access other supported integration APIs	Only with its documented integration endpoints

The Embed API key is not an iframe token. Your backend uses it to request a short-lived embed URL whenever it needs to display a session.

Troubleshooting

Issue	What to check
Website origin is rejected	Confirm the exact scheme and hostname under Allowed sites. HTTP and HTTPS, or hostnames with and without `www`, are different origins.
Embed URL has expired	Request a fresh URL from your backend.
Camera or microphone is unavailable	Use HTTPS and check browser permissions and the iframe's `allow` attribute.
Embedding is not configured or returns a 504 error	Contact LiveClass support with the request time and request ID. The LiveClass `/embed*` app-domain/CDN route may need attention. Changing your site's CORS settings will not fix this routing issue.
URL works in a new tab but not in an iframe	Test the iframe on the exact allowed website. A new tab does not test the browser's `frame-ancestors` rule.

Embedding LiveClass requires an approved website origin, a selected session, and a secure way to generate temporary attendee URLs. Use Quick test to verify browser behavior, then move to a server-side integration for production. Keep API keys private, avoid caching expiring URLs, and always test the embed on the actual website where learners will use it.

Was this article useful?

Dislike