How to Structure HTML Code for Interactive Module Slides – SMARTFENSE

This article explains the minimum requirements and recommended structure for HTML content to work correctly inside HTML Content 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 with that iframe directly.

To allow the iframe to adjust its height to the slide content, the platform automatically injects the auto-sizing script when displaying the slide in the final view. You do not need to include it in your HTML.

That automatic adjustment requires the slide to have a natural height, defined by its own content. If the HTML forces a fixed or viewport-relative height on html, body, or the main container, the platform cannot correctly calculate how much the iframe needs to grow and the content gets cut off (see the "Heights: what to avoid" section below).

Mandatory requirements

An HTML slide must meet these requirements to work correctly on the platform.

1. Self-contained HTML

The slide must not reference external files of its own. All styles must be embedded in the <head> inside a <style> tag.

2. Notify completion (only if the slide blocks advancement)

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.

Heights: what to avoid

The automatic height adjustment measures the natural height of the slide content. Any CSS rule that forces a fixed or viewport-relative height breaks that measurement: the content gets cut off in the final view, even if it appears complete in the editor preview (that preview has its own scroll, which is why it does not show the problem).

Avoid declaring, on html, body, or the slide's main container:

height: 100% (or any percentage) on html or body.
min-height: 100vh, height: 100vh, or any other viewport-relative unit (vh, vw) on the main container. Inside the iframe, the "viewport" is the iframe itself, not the user's screen, so that unit does not represent the actual available height.

Let html and body have their natural height (without declaring height, or with height: auto), and let the main container grow with the content. If you need a minimum height, use a fixed pixel value, never vh.

Recommended base structure

html

<!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>
  <style>
    /* Slide-specific styles */
    /* Do not declare height:100% on html/body or min-height:100vh on the main container */
  </style>
</head>
<body>
  <!-- Slide content -->

  <script>
    // Slide logic

    // Only if the slide blocks advancement:
    function notifyCompleted(success = true) {
      window.parent.postMessage({ type: 'ACTIVITY_COMPLETED', success }, '*');
    }
  </script>
</body>
</html>

Personalization 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 reporting area name
`$incident_report_email`	Incident reporting email
`$incident_report_phone`	Incident reporting 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 in the HTML where needed: