This article explains the minimum requirements and the recommended structure for HTML content to work properly within HTML Content type slides in SMARTFENSE interactive modules.
How the Platform Container Works
The HTML Content activity renders the slide inside an iframe managed internally by the platform. The developer does not interact directly with that iframe.
For the iframe to adjust its height to the slide content, the platform needs to find the script iframe-resizer.contentWindow.min.js within the HTML. If it is not present, the container cannot expand and the content will be cut off.
Mandatory Requirements
An HTML slide must meet only three requirements to work properly on the platform.
1. Include the auto-sizing script
Add the following script in the document <head>:
<script src="https://cdn.takesecurity.com/media/trainings/iframe-resizer.contentWindow.min.js"></script>
2. Self-contained HTML
The slide must not reference its own external files. All styles should be embedded in the <head> inside a <style> tag.
3. Notify completion (only if the slide blocks progression)
If the slide is configured as mandatory to advance, the code must notify the platform when the user completes the activity:
function notifyCompleted(success = true) {
window.parent.postMessage({ type: 'ACTIVITY_COMPLETED', success }, '*');
}Call this function at the moment the user completes the defined activity.
Recommended Base Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Slide Title</title>
<script src="https://cdn.takesecurity.com/media/trainings/iframe-resizer.contentWindow.min.js"></script>
<style>
/* Slide-specific styles */
</style>
</head>
<body>
<!-- Slide content -->
<script>
// Slide logic
// Only if the slide blocks progression:
function notifyCompleted(success = true) {
window.parent.postMessage({ type: 'ACTIVITY_COMPLETED', success }, '*');
}
</script>
</body>
</html>Customization Variables
The editor supports variables that are dynamically replaced with user and organization data when the module is viewed.
User Variables:
| Variable | Description |
|---|---|
$name | User's first name |
$lastname | User's last name |
$email | User's email address |
$username | Username |
$manager_email | Direct manager's email |
Organization Variables (configured in Settings > Organization > Organization Data):
| Variable | Description |
|---|---|
$organization_name | Organization name |
$tenant_name | Tenant name |
$domain | Main domain |
$main_organization_domain | Main organization domain |
$help_desk_area | Help desk area name |
$help_desk_email | Help desk email |
$help_desk_phone | Help desk phone |
$compliance_area | Compliance area name |
$hr_area | Human resources area name |
$is_area | Information security area name |
$is_email | Information security area email |
$incident_report_area | Incident report area name |
$incident_report_email | Incident report email |
$incident_report_phone | Incident report phone |
$ceo | CEO name |
$ceo_email | CEO email |
$cto | CTO name |
$ciso | CISO name |
$ciso_email | CISO email |
$cpo | CPO name |
$cpo_email | CPO email |
$chro | CHRO name |
$cco | CCO name |
$cco_email | CCO email |
$cco_area | CCO area name |
$procurement_area | Procurement area name |
$procurement_area_email | Procurement area email |
To use a variable, insert it directly into the HTML where appropriate:
<p>Hello, <strong>$name $lastname</strong>. In case of any incident, contact <strong>$incident_report_area</strong> at <strong>$incident_report_email</strong>.</p>
Organization variables are updated in one place and automatically propagate to all modules that use them.
💡 Best Practices
- Start with an existing slide from the SMARTFENSE gallery. It already includes the required script and the correct base structure.
- Use the Preview button after each change before saving.
- Always test with a trial campaign before launching the module to end users.
- Ensure all styles are embedded in the
<head>and that the HTML does not reference its own external files.