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.