Home/Documentation

Exporting & Embedding

How Export Works

Click Export in the top bar to generate a self-contained HTML file. The export process:

1.Converts all screenshots to base64 data URLs (embedded in the file)
2.Bundles the walkthrough engine (vanilla HTML/CSS/JS)
3.Includes all hotspot configuration and settings

The result is a single HTML file with zero external dependencies — no internet connection required, no expiring URLs, no frameworks to load.

Embedding in Articulate Rise

1.Export your walkthrough from Walkthrough Studio
2.In Rise, edit your lesson and insert a block
3.Choose Code → Add code
4.Click Copy HTML in the export modal, then paste into the Rise code editor
5.In the block settings, enable Set completion requirements to gate progress
6.Add a Continue block below to control lesson flow

Embedding via iFrame

Upload the HTML file to any web server, then embed it:

<iframe src="your-walkthrough.html" width="400" height="800" frameborder="0"></iframe>

Standalone Use

The downloaded HTML file can be opened directly in any browser — just double-click it. This is useful for testing, sharing via email, or embedding in local training materials.

Completion Signaling

The exported walkthrough automatically sends a completion signal when the learner finishes:

window.parent.postMessage({ type: 'complete' }, '*')

This integrates with Rise's Continue blocks and can be used by any parent page listening for postMessage events.

File Size

Exported files are typically 200KB–2MB depending on the number and resolution of screenshots. Rise handles files well within this range. For very large walkthroughs (10+ high-resolution screens), consider compressing your screenshots before uploading.