How to Embed a Widget on LearnPress

Prerequisites

Before you embed your widget, you need:

• Your Embeddy embed code. Log in to your dashboard at https://embeddy.ai/dashboard, open your widget, and copy the iframe embed code. It looks like this:

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

• WordPress with LearnPress installed. You need a self-hosted WordPress site with the LearnPress plugin activated. LearnPress is free and available from the WordPress plugin repository.
• WordPress admin or editor access. Your WordPress account must have the Administrator or Editor role to embed iframes. Lower-privilege users have their HTML filtered by wp_kses().

Lesson Content (Gutenberg)

LearnPress lessons use WordPress's standard content editor. If your site uses the Gutenberg block editor (WordPress 5.0+), you can add a Custom HTML block directly in the lesson content area.

1. 1

   Open the lesson editor

   In WordPress admin, go to LearnPress > Courses, open your course, and click on the lesson you want to edit. Alternatively, go to LearnPress > Lessons and select the lesson directly.

2. 2

   Add a Custom HTML block

   In the lesson content editor, click where you want the widget to appear and type /html then press Enter. This inserts a Custom HTML block. You can also click the + button and search for "Custom HTML".

3. 3

   Paste your embed code

   Click inside the Custom HTML block and paste your Embeddy iframe code. The block will show the raw HTML in the editor.

4. 4

   Preview and update

   Click "Preview" in the Custom HTML block toolbar to verify the widget renders, then click Update to save the lesson.

Lesson Content (Classic Editor)

If your WordPress site uses the Classic Editor plugin, the embedding process uses the Text tab instead of Gutenberg blocks.

1. 1

   Open the lesson in the Classic Editor

   Navigate to LearnPress > Lessons and open the lesson you want to edit.

2. 2

   Switch to the Text tab

   Click the "Text" tab in the top-right of the editor toolbar. Do not paste the code in the Visual tab — it will strip the iframe.

3. 3

   Paste and save

   Paste your Embeddy iframe code at the desired position and click Update.

Course Landing Page

LearnPress course pages are standard WordPress posts of the lp_course post type. You can embed widgets in the course description that appears on the course landing page — the page students see before enrolling.

1. 1

   Edit the course

   Go to LearnPress > Courses and open the course you want to edit.

2. 2

   Add a Custom HTML block in the course description

   In the course content area (the main editor), add a Custom HTML block and paste your Embeddy iframe code.

3. 3

   Update the course

   Click Update to save. The widget will appear on the course landing page for all visitors.

Using Shortcodes

If you want to reuse the same embed across multiple lessons, you can create a WordPress shortcode for your Embeddy widget. This requires adding a small code snippet to your theme's functions.php file or a code snippets plugin.

// Add to functions.php or a code snippets plugin
function embeddy_widget_shortcode($atts) {
    $atts = shortcode_atts(array(
        'widget_id' => '',
        'props_id'  => '',
        'height'    => '500',
    ), $atts);

    if (empty($atts['widget_id']) || empty($atts['props_id'])) {
        return '';
    }

    return '<iframe src="https://embeddy.ai/webhost/' .
        esc_attr($atts['widget_id']) .
        '?widget_props_id=' . esc_attr($atts['props_id']) .
        '" width="100%" height="' . esc_attr($atts['height']) .
        '" frameborder="0" style="border:none;border-radius:8px;" ' .
        'loading="lazy" title="Embeddy Widget"></iframe>';
}
add_shortcode('embeddy', 'embeddy_widget_shortcode');

Then use the shortcode in any lesson or course content:

[embeddy widget_id="WIDGET_ID" props_id="PROPS_ID" height="500"]

Troubleshooting

Frequently Asked Questions