How to Embed a LiveClass Session in WordPress

Embed a specific LiveClass session on a WordPress page using a custom server-side plugin or shortcode. Your WordPress developer must configure the integration to request a fresh, secure embed URL whenever the page loads.

Who this is for: WordPress site owners and developers

Before You Begin

Complete these steps before configuring WordPress:

1. Create a LiveClass session. Note the session ID. You do not need to copy or store the attendee invite token.

2. Add your WordPress site to the allowlist. In LiveClass, go to Integrations → Embed → Allowed sites and add the exact origin, such as https://training.example.com. Include the scheme and hostname, but no path. The www version and subdomains are separate origins.

3. Generate an Embed API key. Go to Integrations → Embed and generate a key. Store it in your hosting provider's secret manager or protected server configuration. You can rotate or revoke it from the same page.

4. Test the embed. Under Integrations → Embed → Quick test, select the session and allowed origin. Use the temporary iframe snippet on a page served from that origin.

Important: The Embed API key is different from the general LiveClass integration API keys under Integrations → API keys. The Embed API key creates attendee-only access and works only with the embed-launch endpoint. Never expose either key in browser-side code.

📸 Screenshot: LiveClass Embed settings showing the allowed WordPress origin and Embed API key.

Step 1: Create a WordPress Shortcode

Ask your developer to create a shortcode, such as [liveclass_session], using a small custom plugin or server-side integration.

The shortcode should retrieve the LiveClass session ID from private plugin data and request a fresh embed URL from LiveClass whenever the page renders.

Store the Embed API key in server-only configuration, such as a constant defined in wp-config.php using an environment variable. Never put the key in WordPress page content, browser JavaScript, source control, or logs.

Step 2: Request a Fresh Embed URL

Use the WordPress HTTP API to send a server-side POST request to the LiveClass embed-launch endpoint.

$response = wp_remote_post(
    'https://api.liveclass.io/v1/integrations/embed-launch',
    [
        'timeout' => 15,
        'headers' => [
            'Authorization' => 'Bearer ' . LIVECLASS_EMBED_API_KEY,
            'Content-Type'  => 'application/json',
        ],
        'body' => wp_json_encode([
            'sessionId'   => $sessionId,
            'embedOrigin' => 'https://training.example.com',
        ]),
    ]
);

if (
    is_wp_error($response) ||
    wp_remote_retrieve_response_code($response) < 200 ||
    wp_remote_retrieve_response_code($response) >= 300
) {
    // Show a safe error to the learner and log diagnostic details server-side.
    return '<p>LiveClass is temporarily unavailable. Please try again later.</p>';
}

$result = json_decode(wp_remote_retrieve_body($response), true);
$iframeUrl = 'https://app.liveclass.io' . $result['embedPath'];

Check for a successful response before rendering the URL. The shortcode should return a safe error message if the request fails and keep diagnostic details in server-side logs.

The example shows the core request flow. Your developer should also validate the response and safely escape the URL when rendering the iframe.

📸 Screenshot: WordPress shortcode configuration for a LiveClass session.

Step 3: Display the Session in an Iframe

Render the fresh URL returned by LiveClass as the iframe's escaped src attribute.

<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 the server. Do not construct the URL manually or include an invite token.

Important security requirements:

• Embed URLs expire after 10 minutes. Request a fresh URL for each page render.

• Do not save the URL in WordPress page content or cache the rendered page with the URL.

• Keep the Embed API key on the server.

• Use HTTPS for camera and microphone access.

• The iframe's allow attribute enables the listed browser capabilities, subject to browser permissions and policies.

📸 Screenshot: A LiveClass session displayed within a WordPress page.

Step 4: Support Multiple Sessions

To offer multiple LiveClass sessions:

1. Create a separate WordPress page or course for each session.

2. Store each LiveClass session ID in private plugin data.

3. Configure the shortcode to request an embed URL for the session associated with the current page.

Each iframe opens one specific session. The embed does not provide a session catalog.

Step 5: Verify the Integration

1. Open the WordPress page from the exact HTTPS origin registered in LiveClass.

2. Allow camera and microphone access in the browser.

3. Confirm the iframe includes the required permissions, including display-capture if screen sharing is needed.

4. Test from an origin that is not on the allowlist. The browser should block framing.

5. Verify the session inside the WordPress page. Opening the embed URL in a separate tab does not test the browser's frame-ancestors policy.

📸 Screenshot: A learner joining a LiveClass session from a WordPress page.

Troubleshooting

Conclusion

Embedding LiveClass in WordPress requires a custom server-side plugin or shortcode, an approved site origin, and a fresh embed URL for each page render. Keep API keys private, prevent caching of expiring URLs, and test the session within the actual WordPress page to ensure learners can join securely.