Userlove - Help Center
Go to UserloveContact Support
  • Getting Started
    • What is Userlove?
    • Installation
    • JavaScript Installation
    • Installing with Google Tag Manager
    • Install the Chrome Extension
    • FAQs
  • User Experiences
    • How to create Product Tour?
    • How to create Surveys?
      • Web-App Survey
      • Sharable Survey
    • How to create Checklist?
    • How to create DemoX?
      • Record with chrome extension
      • Build manually
    • Segments and Filters
    • Create Net Promoter ScoreĀ® (NPS)
    • Styling & Customization
  • Developers
    • JavaScript API
  • Sandbox
    • How to use sandbox
  • Account & Subscriptions
    • Account
    • Team, roles & permissions
    • Security
    • Manage your subscription
  • Contact Us
  • Changelog
    • Version: 1.2.2
    • Version: 1.2.3
    • Version: 1.2.4
    • Version: 1.3.1
    • Version: 1.3.2
    • Version: 1.3.3
    • Version: 1.3.4
    • Version: 1.4.1
    • Version: 1.4.2
    • Version: 1.4.3
    • Version: 2.1.1
    • Version: 2.1.2
    • Version: 2.3.1
    • Version: 2.3.3
    • Version: 2.3.4
    • Version: 2.4.1
    • Version: 2.4.2
    • Version: 2.4.3
    • Version: 3.1.1
    • Version: 3.1.2
    • Version: 3.1.3
    • Version: 3.1.4
  • Profile & Security
    • Profile Settings
  • SSO Setup
    • SSO using SAML
Powered by GitBook
On this page
  • Video tutorial
  • Design DemoX
  • Publish demoX
  1. User Experiences
  2. How to create DemoX?

Record with chrome extension

Recording is the basic step in creating DemoX.

PreviousHow to create DemoX?NextBuild manually

Last updated 10 months ago

Video tutorial

Before start building DemoX you'll need to install

install userlove extesnsion

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

  1. Click on the Create Demo button to record 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

  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.

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.

  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. To resume recording you have to click on the resume button

  5. click on the stop button recording will be stop

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

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.

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

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.

search userLove extesnsion in

Userlove Google Chrome Extension
Userlove Google Chrome Extension
userlove extension
userlove extension
create demox
tab selection
screen recording
play pause extension
processing screen
Action Bar
Overlay Button