Record with chrome extension

Recording is the basic step in creating DemoX.

Video tutorial

Before start building DemoX you'll need to install Userlove Google Chrome Extension

search userLove extesnsion in Userlove Google Chrome Extension

install userlove extesnsion

userlove extension

Record the screen you have to click on userlove extension below popover will appear

userlove extension

1. Click on the Create Demo button to record demox

create demox

1. if you want to change record screen height and width according to your requirement

2. Click on resize button

3. Click on the Record Demo Button

tab selection

1. you can select chrome tab, Window and Entire screen (hotspot and image will not come in Entire Screen and Window you can record only Video)

2. select Chrome tab

3. select tab which you want to record and navigate that tab.

screen recording

after current tab select above screen will appear

1. Clicking on a specific point will reveal a hotspot, while scrolling and tab events will be displayed in the video steps.

play pause extension

1. if you want to pause recording you have to click on the extension button above popover will appear

2. click on the pause button recording will be pause

3. again click on extension below popover will come

4. 
5. To resume recording you have to click on the resume button

6. click on the stop button recording will be stop

7. after click on stop button it will navigate to below page

processing screen

Please note that your demo's progress is currently in the queue. Consequently, it may take some time for the demo video progress to be completed.

• Follow the demoX creation process. Once your demoX is created, you'll be redirected to the demoX update page.

1. You can add media even after demoX creation. Click on "+ Add step" button on the left sidebar if you want to add more media files.

Customize steps further using the options available on the right sidebar.

Action Bar

Click on overlay button on the right sidebar if you want to add introduction for your demoX.

Overlay Button

You can change the order of steps by simply dragging and dropping them.

Add hotspots to all image steps so that users can click on them to navigate to the next step in demoX.

• To add hotspot, double-click on the image on the preview side.

  OR

• Click on hotspot icon on the right sidebar.

  • Note: If you don't add hotspots on the image step, a yellow colored info icon will appear, indicating that users will not be redirected to the next step.

  • There are several customization available to edit hotspot's type, description and style. You can change target step also.

Design DemoX

If you are done with the demoX creation part, Let's design the DemoX.

1. Navigate to your demoX editing page.

2. Click on "Design" from the stepper or click on the continue button.

You will see the list of customization on the left sidebar from where you can change font, wrapper style and and demoX background.

You can try some design settings as follows:

• Change font style.

• Change the browser wrapper style.

• Choose a background image for demoX or upload your own background image.

• Toggle the switch next to "Navigation" to hide or show the navigation bar.

• Toggle the switch next to "Branding" to hide or show the branding button. You can also change the logo and URL.

Publish demoX

1. Navigate to your demoX editing page.

2. Click on "Publish" from the stepper or click on the continue button twice.

You'll be redirected to the share link step, where you'll find a shareable link for the demoX and Embed Code on the left sidebar.

1. Click on the "Copy link" button next to the URL to share demoX via a sharable link.

Click on the "Copy code" button from the Embed section on the left sidebar.