Now that you have an account and the chrome extension we can start the capturing process. Here’s a video explaining how to create your first HTML demo.

This guide will take you through the following steps:

  1. Starting an HTML story

  2. Naming your story

  3. How to capture each page

  4. Finish the capture

  5. Demo overview

    1. Design Tab

    2. Guide Tab

  6. Linking screens

  7. Guided steps

    1. Adding the first step

    2. Adding the second step

  8. Publishing your demo

Step 1: Starting an HTML story

Click on the extension and select the Record HTML option.

Step 2: Naming your story

Give your demo a name such as “Mercury HTML Demo”, and begin the capture process.

Step 3: How to capture each page

To capture the page either press the capture button or use the shortcut “Ctrl + shift + S”. This will capture the entire screen including the scrollable area.

Step 4: Finish the capture

Go through the tabs you would like captured and hit the capture button on each of these. Once you have captured all the desired pages click on the tick next to the Capture button. This will save all your captures and create a demo.

Step 5: Demo overview

The saved demo will now open with all the saved pages.

There are two tabs:

Step 5. a): The design tab is where you can edit the HTML elements you've captured.

Step 5. b): The guide tab is where you can add guided steps.

We will first concentrate on the design tab to link the buttons from the left navigation bar to each page accordingly.

Step 6: Linking the screens

While on the "DESIGN" tab, click on the screens button, that's in the top left corner.

This will open up all the screens you've captured. We'll go on the first page, called "dashboard".

We'll now click on the "transactions" button and then on the "add link" button.

We'll now choose the page that we want to be linked with the "transactions" button.

After choosing the transactions page, you can click the save button. Because the "All pages" radio button is ticked, it will link the "transactions" button to the transactions page for all the screens we've captured.

The same steps can be followed to link the payments, cards, treasury, and accounts buttons to their page, accordingly.

Step 7: Guided steps

Step 7. a): Adding the first step

While on the "GUIDE" tab, a sidebar will appear on the right part of the screen. From that sidebar, you can click on the "ADD STEP" button and add the first widget.

There will be multiple widgets you can choose from. For now, we will add a Hotspot widget.

After you choose the hotspot widget, you'll have to choose where on the screen you want the hotspot to be added. To begin with, we'll add the hotspot to the "Home" button from the left navigation bar.

Now we can add text that explains to the user that this is the home page of the product.

Step 7. b): Adding the second step

Most likely, we want the next step to show to the user the transaction page. For that, we will go to the "Screens" tab and choose our second capture, the transaction page.

Following the steps from before we can similarly add a hotspot next to the "Transactions" button.

You can then follow the same steps to add guided steps for the rest of the actions you'd want a user to take.

Step 8: Publishing your demo

Once satisfied with how the demo looks go to the upper right-hand side of your screen and click on the “PUBLISH & SHARE” icon.

This will open up a modal that contains the link to the demo you just created.

Congrats! Check out the demo you just created by copying the demo link or pressing the button next to the "Copy" button.

What's next? -> Read about a few features that will help manage the stories you've created.

Did this answer your question?