Embedded Files
Clevero allows you to incorporate online enrolment into your website in three different ways. Below, we’ll walk through each option, from the simplest to the most comprehensive and fully branded approach.
Option 1: Link Directly to a Course or Program
Option 1: Link Directly to a Course or Program
This is the simplest option and works well when you want to promote a specific activity. Each course or program in Clevero has its own dedicated enrolment URL. You can link directly to this page from your website.
Example
You add a banner promoting Zumba Gold on your homepage.
When users click the banner, they are taken directly to the enrolment page for that activity.
The enrolment URL can be found in the URL field on the relevant Course/Program record.
This approach is ideal when you want to highlight a single event. However, it’s less suitable if you want to list multiple or all activities together.
Option 2: Link to Your Events Listing Page
Option 2: Link to Your Events Listing Page
Example
Each Clevero account includes a default Events Listing Page that displays all available activities in one place. Example events listing page: https://nhs.clevero.co/neighbourhood-house-demo-account/.
You can link directly to this page from your website. For example, from your navigation menu or a “What’s On” page, allowing users to browse all activities and enrol from there.
How to find your Events Listing Page URL
Copy the URL of any course or program. This URL is automatically generated, unique to each course or program, and directs members or participants to the online enrolment page.
Remove /view and anything that follows it. For example:
This option works well, but the experience may feel less seamless because users are redirected away from your website. If you want a more integrated and branded experience, consider Option 3.
Option 3: Embed Clevero into Your Website Using an iframe
Option 3: Embed Clevero into Your Website Using an iframe
What is an iframe?
An iframe allows you to embed external content directly into your website so it appears as part of the page. Common examples include embedded videos, maps, social media feeds, or enrolment widgets.
By embedding Clevero using an iframe and combining it with filtering, branding, and customisation options. You can create an experience that feels like a natural part of your website rather than a separate system.
Example use case
You embed the Clevero Events Listing Page directly into your website’s What’s On page, allowing users to browse and enrol without leaving your site.
How to Embed Clevero Using an iframe
⚠️ This option requires basic technical knowledge and access to add custom HTML and JavaScript to your website. Most web developers or site builders can complete this in 5–10 minutes.
Step 1: Add the iframe
In your website builder, add a Custom HTML element where you want the content to appear, then insert the following code:
<iframe
id="nh-houses-iframe"
width="100%"
src="(the URL of the page you want to display)">
</iframe>
Replace the src value with the URL you want to embed.
<iframe
id="nh-houses-iframe"
width="100%"
src="https://nhs.clevero.co/neighbourhood-house-demo-account/">
</iframe>
Step 2: Optional styling
You can remove the iframe border or apply styling using CSS. This can be added inline on the page or in your site’s global styles.
<style>
#nh-houses-iframe {
border: none;
margin: auto;
}
</style>
Step 3: Enable dynamic height resizing
Because the content inside the iframe changes in height, you’ll need to add a script that dynamically resizes it.
<script>
window.onmessage = function (e) {
try {
const data = typeof e.data === "string" ? JSON.parse(e.data) : e.data;
if (data.channel !== "nh-houses") return;
const { blockSize } = data;
document.getElementById("nh-houses-iframe").height = blockSize;
} catch (e) {}
};
</script>
Depending on your website builder, this script may need to be added:
to the page itself, or
to the site’s custom header or global script settings.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clevero Embed</title>
</head>
<body>
<iframe
id="nh-houses-iframe"
width="100%"
src="https://nhs.clevero.co/neighbourhood-house-demo-account/">
</iframe>
</body>
<style>
#nh-houses-iframe {
border: none;
margin: auto;
}
</style>
<script>
window.onmessage = function (e) {
try {
const data = typeof e.data === "string" ? JSON.parse(e.data) : e.data;
if (data.channel !== "nh-houses") return;
const { blockSize } = data;
document.getElementById("nh-houses-iframe").height = blockSize;
} catch (e) {}
};
</script>
</html>
Page updated
Report abuse