{"id":10457,"date":"2025-09-22T20:10:16","date_gmt":"2025-09-23T00:10:16","guid":{"rendered":"https:\/\/learndash.com\/support\/?post_type=docs&p=10457"},"modified":"2025-09-23T10:33:08","modified_gmt":"2025-09-23T14:33:08","password":"","slug":"how-to-add-h5p-interactive-content-to-your-learndash-app","status":"publish","type":"docs","link":"https:\/\/learndash.com\/support\/kb\/learndash-app\/managing-content-for-learndash-app\/how-to-add-h5p-interactive-content-to-your-learndash-app\/","title":{"rendered":"How to Add H5P Interactive Content to Your Learndash App"},"content":{"rendered":"\n

Introduction<\/strong><\/h2>\n\n\n\n

H5P enables you to create rich, interactive HTML5 content such as quizzes, flashcards, and interactive videos.<\/p>\n\n\n\n

This guide walks you through installing the H5P plugin, creating content, embedding it into LearnDash lessons using the H5P App Block, and previewing it in your Learndash App.<\/p>\n\n\n\n

Install the H5P Plugin<\/strong><\/h2>\n\n\n\n
    \n
  1. In your WordPress Dashboard, go to Plugins > Add Plugin<\/strong>.<\/li>\n<\/ol>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n
      \n
    1. Search for H5P<\/strong> and install the plugin developed by the H5P Community<\/strong>.<\/li>\n<\/ol>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
        \n
      1. Click Activate<\/strong> once installation completes.
        <\/li>\n<\/ol>\n\n\n\n

        Create H5P Content<\/strong><\/h2>\n\n\n\n
          \n
        1. In the Dashboard, navigate to H5P Content > Add New<\/strong>.<\/li>\n<\/ol>\n\n\n\n
          \"\"\/<\/figure>\n\n\n\n
            \n
          1. Select a content type (e.g., Image Pairing<\/strong>) and click Get<\/strong> (first-time use) or Use<\/strong>.
            <\/li>\n\n\n\n
          2. Enter a Title<\/strong>
            <\/li>\n\n\n\n
          3. Configure the interactive fields (e.g., image pairs, quiz questions).
            <\/li>\n\n\n\n
          4. Click Save<\/strong> to create the H5P item.
            <\/li>\n<\/ol>\n\n\n\n

            Embed H5P in a LearnDash Lesson<\/strong><\/h2>\n\n\n\n
              \n
            1. Go to LearnDash LMS > Lessons<\/strong> and edit the lesson where you want to add the H5P content.
              <\/li>\n\n\n\n
            2. Click the + icon<\/strong> and search for the H5P block<\/strong> (with the mobile icon).
              <\/li>\n\n\n\n
            3. Insert the H5P block and select the H5P item by title from the block settings.
              <\/li>\n\n\n\n
            4. Click Update<\/strong> to save the lesson.
              <\/li>\n<\/ol>\n\n\n\n

              Preview H5P on the Web<\/strong><\/h2>\n\n\n\n
                \n
              1. Visit the course lesson on your site\u2019s frontend.
                <\/li>\n\n\n\n
              2. Confirm the interactive content displays and works correctly within the theme layout.
                <\/li>\n<\/ol>\n\n\n\n

                Preview H5P in the Learndash App<\/strong><\/h2>\n\n\n\n
                  \n
                1. Open the Learndash App<\/strong> on your mobile device.
                  <\/li>\n\n\n\n
                2. Navigate to the course and open the lesson containing H5P content.
                  <\/li>\n\n\n\n
                3. Tap the H5P block<\/strong>. It will open in a scrollable modal web view.
                  <\/li>\n\n\n\n
                4. Interact with the content (e.g., match pairs or complete quizzes).
                  <\/li>\n\n\n\n
                5. After finishing, close the modal and tap Mark Complete<\/strong>.
                  <\/li>\n<\/ol>\n\n\n\n

                  Troubleshooting and FAQs<\/strong><\/h2>\n\n\n\n

                  Q: Why isn\u2019t the H5P block showing up in the lesson?<\/strong>
                  <\/strong> A: Make sure you\u2019re using the H5P Gutenberg block<\/strong>, not a shortcode. Shortcodes are not supported in the Learndash App.<\/p>\n\n\n\n

                  Q: Why doesn\u2019t the H5P content load in the app?<\/strong>
                  <\/strong> A: Ensure the H5P plugin<\/strong> is activated and that you selected the content in the block settings. Force-close and reopen the app to refresh the cache.<\/p>\n\n\n\n

                  Q: Can users access H5P content offline?<\/strong>
                  <\/strong> A: No. H5P content loads via a web view and requires an active internet connection.<\/p>\n","protected":false},"excerpt":{"rendered":"

                  Introduction H5P enables you to create rich, interactive HTML5 content such as quizzes, flashcards, and interactive videos. This guide walks you through installing the H5P plugin, creating content, embedding it into LearnDash lessons using the H5P App Block, and previewing it in your Learndash App. Install the H5P Plugin Create H5P Content Embed H5P in…<\/p>\n","protected":false},"author":58,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_helpful_status":1,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"doc_category":[288],"doc_tag":[],"knowledge_base":[283],"class_list":["post-10457","docs","type-docs","status-publish","hentry","doc_category-managing-content-for-learndash-app","knowledge_base-learndash-app"],"year_month":"2026-04","word_count":382,"total_views":"697","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"display_name":"Stephanie Liy","author_link":"https:\/\/learndash.com\/support\/author\/stephaniei\/"},"doc_category_info":[{"term_name":"Managing Content for LearnDash App","term_url":"https:\/\/learndash.com\/support\/kb\/learndash-app\/managing-content-for-learndash-app\/"}],"doc_tag_info":[],"taxonomy_info":{"doc_category":[{"value":288,"label":"Managing Content for LearnDash App"}],"knowledge_base":[{"value":283,"label":"LearnDash App"}]},"featured_image_src_large":false,"comment_info":0,"knowledge_base_info":[{"term_name":"LearnDash App","term_url":"https:\/\/learndash.com\/support\/kb\/learndash-app\/","term_slug":"learndash-app"}],"knowledge_base_slug":["learndash-app"],"_links":{"self":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/comments?post=10457"}],"version-history":[{"count":1,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10457\/revisions"}],"predecessor-version":[{"id":10458,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/docs\/10457\/revisions\/10458"}],"wp:attachment":[{"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/media?parent=10457"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_category?post=10457"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/doc_tag?post=10457"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/learndash.com\/support\/wp-json\/wp\/v2\/knowledge_base?post=10457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}