Angular page demo

Question

I have an angular page that I want to use a plugin like intro.js to demo the different features of the page. However, the issue is that not the entire page is displayed on load. The user is presented with an input box at first that they have to fill out with an id and hit submit. Once they hit submit, the page makes an $http post call and then displays the rest of the page with the data and the other features.

So in this situation, what is the best way to demo this page when only a part of it is display at the beginning? I had 2 ideas

1. Use a static image of the full page and do a demo on the image
2. Have a demo button that presents the first part of the page and then when the user submits the id, provide a separate button that demos the rest of the page features

Are those the only 2 ways to do it? Is there any other way?

Answer 1

there are 2 ways

1. once initial demo is complete, add a hint button (it is feature in intro.js) and restart demo once user click hint

2. use programmatic way to add steps. first display 2 steps, let user submit the form and on load of controller. restart introjs again