How to record a clickthrough demo using chrome extension
X Click here to view all steps
Don't show me again
How to record a clickthrough demo using chrome extension
0/5
Prev
Next
Steps
  • Start recording
  • %3Cp%3E%3Cspan%20style%3D%22font-size%3A%2013px%3B%22%3EOnce%20you%20have%20compelted%20all%20the%20steps%2C%20click%20the%20recorder%20icon%20to%20stop%20the%20recording.%3C/span%3E%3C/p%3E
  • Continue to customize the clickthrough demo
  • The clickthrough demo has been created
  • Thank you!

Start

How to record a clickthrough demo using chrome extension
1/5
Prev
Next
Steps
  • Start recording
  • %3Cp%3E%3Cspan%20style%3D%22font-size%3A%2013px%3B%22%3EOnce%20you%20have%20compelted%20all%20the%20steps%2C%20click%20the%20recorder%20icon%20to%20stop%20the%20recording.%3C/span%3E%3C/p%3E
  • Continue to customize the clickthrough demo
  • The clickthrough demo has been created
  • Thank you!

Start recording

Creating a clickthrough demo begins with recording a process . The chrome extention automatically tracks all the clicks and converts them into a step-by-step clickthrough demo.

How to record a clickthrough demo using chrome extension
2/5

Prev
Next
Steps
  • Start recording
  • %3Cp%3E%3Cspan%20style%3D%22font-size%3A%2013px%3B%22%3EOnce%20you%20have%20compelted%20all%20the%20steps%2C%20click%20the%20recorder%20icon%20to%20stop%20the%20recording.%3C/span%3E%3C/p%3E
  • Continue to customize the clickthrough demo
  • The clickthrough demo has been created
  • Thank you!

%3Cp%3E%3Cspan%20style%3D%22font-size%3A%2013px%3B%22%3EOnce%20you%20have%20compelted%20all%20the%20steps%2C%20click%20the%20recorder%20icon%20to%20stop%20the%20recording.%3C/span%3E%3C/p%3E

%3Cp%3E%3Cspan%20style%3D%22font-size%3A%2013px%3B%22%3EOnce%20you%20have%20compelted%20all%20the%20steps%2C%20click%20the%20recorder%20icon%20to%20stop%20the%20recording.%3C/span%3E%3C/p%3E

How to record a clickthrough demo using chrome extension
3/5
Prev
Next
Steps
  • Start recording
  • %3Cp%3E%3Cspan%20style%3D%22font-size%3A%2013px%3B%22%3EOnce%20you%20have%20compelted%20all%20the%20steps%2C%20click%20the%20recorder%20icon%20to%20stop%20the%20recording.%3C/span%3E%3C/p%3E
  • Continue to customize the clickthrough demo
  • The clickthrough demo has been created
  • Thank you!

Continue to customize the clickthrough demo

We will continue to customize the recorded clickthrough demo in the design editor next.

How to record a clickthrough demo using chrome extension
4/5
Prev
Next
Steps
  • Start recording
  • %3Cp%3E%3Cspan%20style%3D%22font-size%3A%2013px%3B%22%3EOnce%20you%20have%20compelted%20all%20the%20steps%2C%20click%20the%20recorder%20icon%20to%20stop%20the%20recording.%3C/span%3E%3C/p%3E
  • Continue to customize the clickthrough demo
  • The clickthrough demo has been created
  • Thank you!
1

The screen titles (annotations) are automatically added.

2

The hotspots are automatically placed. We can easily edit the position, size and color.

The clickthrough demo has been created

Here we notice the individual steps were automatically created from the screen recording. The hotspot is automatically placed where and the "action annotation - aka click on 17%" was automatically added.

How to record a clickthrough demo using chrome extension
5/5
Prev
Next
Steps
  • Start recording
  • %3Cp%3E%3Cspan%20style%3D%22font-size%3A%2013px%3B%22%3EOnce%20you%20have%20compelted%20all%20the%20steps%2C%20click%20the%20recorder%20icon%20to%20stop%20the%20recording.%3C/span%3E%3C/p%3E
  • Continue to customize the clickthrough demo
  • The clickthrough demo has been created
  • Thank you!

Thank you!