Before you read this article make sure you have installed Rivia's chrome extension and have logged into the dashboard. If you need help with this, please refer to this article.
Within this article we'll talk about how you can create and publish your first interactive demo using Rivia.AI.
Capturing product screens for your demo
Open your product inside Google Chrome for which you want to create the demo for. For the purpose of this guide, we'll use HubSpot.
Click on the Rivia.AI Chrome extension
Give your demo a name and click on "Create New Demo"
Click on "Add Capture" and wait for the extension to display a success message. This step usually takes 5-10 seconds to complete.
Repeat the above step for all the product screens that you want to include in your demo. For example - if your product has 7 different screens, you will repeat the "Add Capture" step for each of those screens.
Once you are done, click on "Complete Demo".
Few Points to keep in mind:
Once you click on "Add Capture", the extension will capture the entire HTML of the page including CSS, fonts, animations, etc.
If your product has lazy loading enabled, make sure to scroll till the bottom of the page before clicking on "Add Capture"
After clicking on "Add Capture", don't do anything until the extension shows the success message.
Adding steps to your demo
The demo editor is divided into two parts. On the right hand side, you can view the product screens that you have captured using the extension and on the left hand side, you have an editor using which you can edit your product screens or add steps to your demos.
To add a step to your demo, simply click on "Add Step".
Select the type of step you want add. Currently Rivia.AI supports 4 different types of steps. For this example, let's select a modal.
You'll notice that a modal has been added on top of your product screen. Now using the left hand side editor you can modify the text, styling and other settings of the modal.
Once you are done, simply click on "Save".
In order to add more steps to your demo, simply repeat the above steps.
👉 If you want to add steps to a different screen, simply change the selected screen using the "Change Selected Screen" option.
Publishing your demo
Once you are ready with your demo, click on the "Publish" button on the top right corner.
Click on "Publish"
This will open up a new tab with your published demo URL. This is a public URL and you can use this to embed your demo on your website or you can also share this URL separately.