This article is intended for a developer audience.
If you've explored our Step types thoroughly, you'll have noticed that StepDemo has a special 4th tab in its editor, Export/Embed.
This tab offers two Javascript snippets that you can cut and paste on your sites to load StepDemo experiences into them.
The snippet has two parts. First, a script-include that loads our player and all of its dependencies (which includes jQuery). Second, an invocation that populates a 'container' div with the demo's contents.
If you scan the scripts carefully, you'll notice that they are nearly identical. This is because the second excludes 'revision,' which serves to 'pin' the demo to a specific version. So, if you want to display the latest version (always), use the second snippet. If you're going to pin it to a particular version (as a kind of version control), then use the first (which contains the 'revision' JSON member).
You can search through revision history as well. If you are looking for a specific, older version, click on the "View Past Revisions" hyperlink near the bottom of the editor panel.
Here's a CodePen that you can fork and edit, which demonstrates how an embed might work:
This code example shows you how to leverage the two event callbacks.
Planning to Embed Many Demos?
If you were planning to embed a series of demos to create a custom support portal - have you considered Digital Academy? It's a turnkey support system with a built-in employee-to-public sharing that can feature both demos and videos! It's likely to save you a fortune in development costs; and we're constantly improving it! Get in touch if you have any questions!