HTML Editor- Sections

Sections are a way to organize your screens and group them by, for example, product types or problem solves. Section navigation allows your viewers to move through different sections of your HTML Environment without having to progress through a predefined linear experience. It can also help builders stay organized as they're editing their demo. 

Follow the instructions below to learn how to setup Sections and see what it looks like when it's published for your viewer: 

1. Navigate to your HTML Editor and go to the Assets Tab 

Assets Tab.JPG

2. Press "Add Section" in the top right hand corner above the screens 

Add Sections.JPG


3. Give your Section a name 

Name it.JPG

4. Drag and drop the screens you want in that Section or use the three dots next to the screen to select "Move to Section" 

Drag and Drop the screens.JPG

Move to Section.png

5. Repeat for all the Sections you want 

Repeat Process.JPG

6. You can drag Sections to change the order or press the 3 little dots to delete a Section (and all the screens within it) 

Delete Sections.png

7. When you capture new screens they will be placed into the un sectioned area until you move them 

Newly Added Screens.JPG

8. All of the Sections you added will also appear in the Builder tab under Screen Flow 

Builder Tab Screen Flow.JPG

9. Publish your demo to see the Sections menu appear in the bottom left hand corner which will allow you to move through your demo and also will mimic the style you have setup in your Reprise portal. You'll notice there's a "Show Guides" toggle.  If a demo has Sections, you have the option to continue the tour unguided (click actions/pulses are still active.) The Sections menu can be dragged and repositioned if it blocks part of your demo. It will stay in the new spot for the rest of that demo session, but when a new demo is started, the menu will return to its default location in the bottom-left corner.
 
Sections with guie toggle.JPG

10. If you do not want sections to appear for users on a published demo, you can turn this off in the settings tab. For example, if you want to use sections for organization as you build but not for user navigation during your demo, go to settings and turn it off using this toggle. You can also use the "unguided navigation" toggle on this settings page if you want your end user to have the option to toggle guides off when using the sections menu (see step 9 above). 

Sections Toggle.JPG




Was this article helpful?
0 out of 0 found this helpful
Have more questions?
Submit a request
Share it, if you like it.