How to embed a static page inside a Moodle content page

4 comments

Sometimes you may want to embed a static page inside your Moodle course content. Why would you want to do this? 

You may have a notification that will be spread across many different courses that you want to change in only one location or you may want to dynamically load the page rather than have it as inline content. 

For this example we will create a page on our Moodle server in a folder called /custompages/example.html 

This page will have the following initial HTML content. 

<p><b>IN DEVELOPMENT BY CHRIS</b></p>
<p>This is currently being updated and as a result, you may see changes each time you view this page</p>

When embedded in a page it will look like this.

To create this dynamically embedded HTML content we will use a Moodle Plugin called Generico.

Generico can be used for many different tasks that require templating or adding dynamic Javascript to a page.

You can download the Generico plugin from here https://moodle.org/plugins/filter_generico and install it on your test or staging server.

How to install the Generico plugin can be found here. https://www.youtube.com/watch?v=tQms8KnhPbY&t=1s

Now that you have Generico installed, you will need to create a Generico Template that we will use to create the inline HTML embed function.

In your Moodle administration go to the Generico plugin Site Admin > Plugins > Filters > Generico > Templates 

 

Select a new template from the numbers on the left. Then complete the template with the following information.

 

Instructions Template:  {GENERICO:type=”inlinepage”,page=”/”}{GENERICO:type=”inlinepage_end”} 

The Body Template: <div id=”@@AUTOID@@” class=”infopanel”><i class=”fa fa-spinner fa-spin center”></i></div>

Variable Defaults: page=”blankpage.html”

Load via AMD: YES

The last two code snippets to be added are in the Custom JS panel.  

async function fetchHtmlAsText(url) {
  const contentDiv = document.getElementById("@@AUTOID@@");
  contentDiv.innerHTML = await (await fetch(url)).text();
}

(function() {
   fetchHtmlAsText("@@page@@");
})();

And in the Custom CSS panel.

.infopanel
{    background-color: #f3f7f9;
    padding: 20px;
    border-radius: 10px;
    border-width: 1px;
    border-color: #eee;
    border-style: solid;
    width: 100%;
    margin-bottom:10px;
}

Assuming you have added all the correct code, Save the template and you are ready to use it. 

It is also useful if the theme you are using has Font Awesome as part of the theme as this will display a loading spinner when the page is being requested. 

All you need to do now is add the Generico template to your Moodle page and add the URL to your static page. 

To do this, open a Moodle page and paste in the Generico template code. 

{GENERICO:type="inlinepage",page="/custompages/example.html"}{GENERICO:type="inlinepage_end"}

Make sure you enter the static page name for your HTML page with a / (slash) in front of the page.

What Generico will do is find the static page and dynamically load it into your page content.

Below is a demo of the static page loading into a Moodle page.

I hope you find this useful .

Feel free to ask any questions and if you have an interesting Moodle issue you would like to see solved. Let me know as I am always interested in solving unusual issues in Moodle. 

4 Comments

  1. santosh magar
    santosh magar on January 16, 2021 at 10:01 pm

    it doesn’t work on moodle 3.9.3
    i fill all the requirement from above but its not working if i use the Generico Template inlinepage on certain page/

    • Chris Richter
      Chris Richter on January 17, 2021 at 10:05 am

      Hi Santosh,

      A few things to check.

      1. Make sure the Generico plugin is enabled.
      Site administration >Plugins > Filters > Manage filters
      Then make sure Generico is ‘On’.
      2. If you copy and pasted the code from the website, in some browsers the double quotes are copied as quotes that can cause Generico to break.
      Replace any “ with normal ”
      3. Double check to make sure all the code elements are in place.
      4. Check for javascipt issues/errors in the browsers developer tools > console.

      Hope this helps.
      Thanks,
      Chris

  2. Kepa
    Kepa on February 17, 2021 at 12:27 am

    Hello!

    Nice tutorial, but I’m facing some problems…

    I have copied the inlinepage template (and checked twice) and created a new folder in the Moodle root directory, with a testing html in it. But when embedding that basic html, as you have done, in a Page module, no content is shown.

    Using the browser console, i see an Uncaught (in promise) TypeError saying that contentDiv is null.

    Any other type of generico templates, for example the Hello World or the iframepage ones, they work like a charm.

    Can you help me?
    Thanks a lot.

    Kepa

    • Chris Richter
      Chris Richter on February 17, 2021 at 9:16 am

      Hi Kepa,
      If you copied and pasted from the website, sometimes the quotes ” are added as the wrong type of quote.
      Could you replace the quotes in the The Body Template:

      This may fix the issue.
      Thanks,
      Chris

Submit a Comment