One of the more advanced Steps to create. Don't worry, with practice you'll be a pro in no time!
Learners will interact with a guided, step-by-step tutorial that will train (and test) them on how to navigate an app, program, or website.
Want to offer learners an interactive, unguided simulation? Build this Step's Simulation variant instead!
How to Build
To begin:
CREATE and CONFIGURE your Demo Step
SELECT "NEXT"
"SAVE"
Create your demo
SELECT "Launch Demo Editor"
If you plan to create a Mobile Simulation Demo, select the Mobile Frame icon to activate it:
From here, REPEAT as needed!
- Choose your image -
To upload a new image:
SELECT the cloud with the "up" arrow in the middle of the screen
FIND the image you wish to use
CHOOSE the image
To use an existing image:
SELECT "Launch Asset Manager"
FIND the image you wish to use
HOVER over the image
SELECT "USE"
Once selected, ENTER a "Screen Name" to identify the image you're using.
- Create hot spots -
DECIDE where your "hot spots" will be (where learners will click)
CLICK, HOLD, AND DRAG mouse over the area you want to use
ENTER "Guiding Text" (what learners need to do - e.g. "Enter your username")
- Optional stuff -
ADJUST location and size of hot spot to the pixel
INCLUDE hyperlinks within Guiding Text
ENTER "Autotext" if desired (text overlay, will show within hotspot box)
CHOOSE "Autotext Font Size" from drop-down menu (if applicable)
CHOOSE "Autotext color" if applicable)
CHOOSE whether you want to "Force Autotext Background Color" and SELECT a color (if applicable)
ENTER "Learn More Link Text" (shown in the page header, something like "Why do I need this?")
ENTER "Learn More Description" (the answer to above Link - when Learn More Text Link is selected, header will reveal this text)
SELECT "Set Hotspot Order" if you want to change their order (when you have more than one)
SELECT the "+" sign to add your next stage
Once you're done, SELECT "Finish!"
Final touches
- Exit Summary -
WRITE an "Exit Summary" that learners will see when the last stage is complete. (E.g. "Great Job! You now know how to deposit checks through our app!")
- Completion Action -
When you want learners to put what they just learned into practice or simply view the web page/application, you can link to it from here!
To do this:
UPLOAD an appropriate image
ENTER "Link Text" (such as "Try it for yourself!")
ENTER "Link URL" (the web page where the actual program is)
ENTER "Action Description" (explain what the learner will be doing in more detail)
Make your demo available to the public!
In addition to all of the above, you can also include any Demo Step you create in a public-facing page!
Digital Academy
Our Digital Academy makes it easy to offer your collection of demos (and videos) to the public - no coding knowledge required! All it takes is a few clicks and it's ready to roll!
Embedding code in an external site
To embed the code into your own site, load the LemonadeLXP Demo Player javascript and use this embed directive to reuse compelling employee demos as you see fit! Coding knowledge is essential here!
Hot Tip!
Check out our Guide to Maximizing Each Step Type's Teaching Potential for some hot tips on this and other Step types!
Need some help with images?
Read our Demo Step Images and Flow Guide!
Try an Alternate Approach
Our Guide to Training Game-Specific Variations offers even more ways to approach this and other Step types!