# How to create a demo with the extension

You'll open the demos dashboard and start a new project to showcase your product.

Viewport: 3022x1706 @1x

Playback: autoplay=false durationMs=3000 navBar=false arrows=true callouts=true browserBar=true browserTheme=dark

1. [Intro] How to create an interactive demo with the Layerpath extension
   - body: Record a workflow with the Layerpath extension and turn it into an interactive demo, step by step.
   - voiceover: In this walkthrough, you’ll learn how to use the Layerpath extension to record a workflow and turn it into an interactive demo.
   - audio: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/cmtd07oxt000104ibfkek10so.mp3
   - voice: XrExE9yKIg1WjnnlVkGX
   - voiceover metadata: status=ready source=ai language=en tone=Product walkthrough
1. step_01 [image] - Click Record your screen to get started.
   - source type: IMAGE
   - target: (1783.160169537326, 505.6636726546915), rect: top=409.4670658682645 left=1188.942650141104 width=594.2175193962214 height=192.393213572854
   - hotspots: 1
     - cmrna66hp0001l904alt4tl78-hotspot-0 (1783.160169537326, 505.6636726546915), rect: top=409.4670658682645 left=1188.942650141104 width=594.2175193962214 height=192.393213572854 style=STYLE2 label="Click Record your screen to get started."
   - dimensions: 3022x1706 @1x
   - layout: 1 (full) fit=cover
   - voiceover: Start by clicking Record your screen. This opens the Layerpath recording flow so you can capture the workflow you want to turn into a demo.
   - audio: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/cmtd08e8i000304ib83fk3zih.mp3
   - voice: XrExE9yKIg1WjnnlVkGX
   - voiceover metadata: status=ready source=ai language=en tone=Product walkthrough
   - image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/cmrna5xpb00003b73qa4tmxxd.png
   - rendered still: https://remotionlambda-useast1-gwa3o300a7.s3.us-east-1.amazonaws.com/slide-stills/cmrna66hp0001l904alt4tl78/75c73942c1f0b41e.jpg
   - thumbnail: https://remotionlambda-useast1-gwa3o300a7.s3.us-east-1.amazonaws.com/slide-stills/cmrna66hp0001l904alt4tl78/75c73942c1f0b41e.jpg
2. step_02 [image] - Click Add to Chrome to install the Layerpath extension.
   - source type: IMAGE
   - description: This adds the recording extension directly to your Chrome browser.
   - target: (2431.865373254872, 523.2636371093429), rect: top=523.2636371093429 left=2431.865373254872 width=150 height=48
   - hotspots: 1
     - cmqmohc3d000kl404sec8pqee-hotspot-0 (2431.865373254872, 523.2636371093429), rect: top=523.2636371093429 left=2431.865373254872 width=150 height=48 style=STYLE1 label="Click Add to Chrome to install the Layerpath extension."
   - dimensions: 3022x1706 @1x
   - layout: 1 (full) fit=cover
   - voiceover: Click Add to Chrome to install the Layerpath extension in your browser.
   - audio: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/cmtd0ai2u000104ie00gkck8k.mp3
   - voice: XrExE9yKIg1WjnnlVkGX
   - voiceover metadata: status=ready source=ai language=en tone=Product walkthrough
   - image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmohc3d000kl404sec8pqee.e84270b78abda1f3008d62aa970a315f.webp
   - processed image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmohc3d000kl404sec8pqee.e84270b78abda1f3008d62aa970a315f.webp
   - canvas elements: 1
3. step_03 [image] - Pin the Layerpath extension for quick access while recording.
   - source type: IMAGE
   - description: Confirming this step lets you proceed with launching the capture tool.
   - target: (3006.345697839129, 667.1544263072029), rect: top=195.7650087951953 left=2337.052242184545 width=669.2934556545836 height=942.7788350240153
   - hotspots: 1
     - cmqmok4b60005if04k2yjcb6j-hotspot-0 (3006.345697839129, 667.1544263072029), rect: top=195.7650087951953 left=2337.052242184545 width=669.2934556545836 height=942.7788350240153 style=STYLE2 label="Pin the Layerpath extension for quick access while recording."
   - dimensions: 3022x1706 @1x
   - layout: 1 (full) fit=cover
   - voiceover: Next, pin Layerpath to your toolbar so you can quickly open it when you’re ready to record.
   - audio: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/cmtd0ba0e000104l57mje0znr.mp3
   - voice: XrExE9yKIg1WjnnlVkGX
   - voiceover metadata: status=ready source=ai language=en tone=Product walkthrough
   - image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmok4b60005if04k2yjcb6j.c36321c4e668de7e29a7b3597050f6ef.webp
   - processed image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmok4b60005if04k2yjcb6j.c36321c4e668de7e29a7b3597050f6ef.webp
   - canvas elements: 1
4. step_04 [image] - Open the workflow you want to record, then click the Layerpath extension.
   - source type: IMAGE
   - description: Open the extension to configure and start your workflow capture.
   - target: (2625.486560520507, 170.3139018766121), rect: top=170.3139018766121 left=2625.486560520507 width=24 height=24
   - hotspots: 1
     - cmqmp5ygj0001ky04uo9klmci-hotspot-0 (2625.486560520507, 170.3139018766121), rect: top=170.3139018766121 left=2625.486560520507 width=24 height=24 style=STYLE1 label="Open the workflow you want to record, then click the Layerpath extension."
   - dimensions: 3022x1706 @1x
   - layout: 1 (full) fit=cover
   - voiceover: Go to the product or workflow you want to demonstrate, then click the Layerpath extension to open the recording menu.
   - audio: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/cmtd0cm8z000304l5hyitctn8.mp3
   - voice: XrExE9yKIg1WjnnlVkGX
   - voiceover metadata: status=ready source=ai language=en tone=Product walkthrough
   - image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmp5ygj0001ky04uo9klmci.cf30fe49b69438fc7ff92878be4a3a27.webp
   - processed image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmp5ygj0001ky04uo9klmci.cf30fe49b69438fc7ff92878be4a3a27.webp
   - canvas elements: 2
5. step_05 [image] - Click Start recording, then complete the workflow you want to capture.
   - source type: IMAGE
   - description: Open the extension to configure and start your workflow capture.
   - target: (2801.280269329974, 420.6575342465755), rect: top=188.2572298325727 left=2017.025294652462 width=784.2549746775122 height=464.8006088280056
   - hotspots: 1
     - cmqmtdwoh0001ky042dsmllbw-hotspot-0 (2801.280269329974, 420.6575342465755), rect: top=188.2572298325727 left=2017.025294652462 width=784.2549746775122 height=464.8006088280056 style=STYLE2 label="Click Start recording, then complete the workflow you want to capture."
   - dimensions: 3022x1706 @1x
   - layout: 1 (full) fit=cover
   - voiceover: Click Start recording, then go through the workflow as you normally would. Layerpath captures each step along the way.
   - audio: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/cmr4wq5y1000b04jmh5l8dbsy.mp3
   - voice: XrExE9yKIg1WjnnlVkGX
   - voiceover metadata: status=ready source=ai language=en tone=Product walkthrough
   - image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmtdwoh0001ky042dsmllbw.6a62cd42c91293f34f42de47a98e81d9.webp
   - processed image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmtdwoh0001ky042dsmllbw.6a62cd42c91293f34f42de47a98e81d9.webp
   - canvas elements: 4
6. step_06 [image] - When you’re done, open the extension and click Finish.
   - source type: IMAGE
   - description: This ends the session and prepares your interactive demo.
   - target: (2869.233943633523, 548.2229151526167), rect: top=196.3766442241545 left=2147.309062290086 width=721.9248813434373 height=703.6925418569244
   - hotspots: 1
     - cmqmpg72m000djm04k3drgcsl-hotspot-0 (2869.233943633523, 548.2229151526167), rect: top=196.3766442241545 left=2147.309062290086 width=721.9248813434373 height=703.6925418569244 style=STYLE2 label="When you’re done, open the extension and click Finish."
   - dimensions: 3022x1706 @1x
   - layout: 1 (full) fit=cover
   - voiceover: Once you’ve completed the workflow, open the extension and click Finish to stop recording and create your demo.
   - audio: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/cmtd0o6ok000104js8nf0312e.mp3
   - voice: XrExE9yKIg1WjnnlVkGX
   - voiceover metadata: status=ready source=ai language=en tone=Product walkthrough
   - image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmpg72m000djm04k3drgcsl.82e05e2db2be946202f7888d6ccddc1a.webp
   - processed image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmpg72m000djm04k3drgcsl.82e05e2db2be946202f7888d6ccddc1a.webp
   - canvas elements: 4
7. step_07 [image] - Your demo is ready. Review the captured steps in the preview.
   - source type: IMAGE
   - description: Review the automatic steps created from your screen actions.
   - target: (1511.652387580933, 1499.134730538922), rect: top=1499.134730538922 left=1511.652387580933 width=727.062404870624 height=259.6651445966514
   - hotspots: 1
     - cmqmog2cc000ljp0488v1hfrj-hotspot-0 (1511.652387580933, 1499.134730538922), rect: top=1499.134730538922 left=1511.652387580933 width=727.062404870624 height=259.6651445966514 style=STYLE3 label="Your demo is ready. Review the captured steps in the preview."
   - dimensions: 3022x1706 @1x
   - layout: 1 (full)
   - voiceover: You’ll now see a preview of your interactive demo, with each recorded action turned into a step you can review and edit.
   - audio: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/cmtd0onpq000304ieejfn3xvc.mp3
   - voice: XrExE9yKIg1WjnnlVkGX
   - voiceover metadata: status=ready source=ai language=en tone=Product walkthrough
   - image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmog2cc000ljp0488v1hfrj.1770403f875053d321d5406a489a609a.webp
   - processed image: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/processed/cmqmog2cc000ljp0488v1hfrj.1770403f875053d321d5406a489a609a.webp
   - canvas elements: 2
9. [Outro] You're all set<br>
   - body: Now it’s your turn. Record a workflow and create your<div>first interactive demo with Layerpath.</div>
   - voiceover: That’s it. You now know how to record a workflow with the Layerpath extension and turn it into an interactive demo.
   - audio: https://cdn.layerpath.com/cmbaqb5fv00hrl807k7az708m/cmqmo8rs900013b71edbmp8a2/cmtd0p91d000104la88v0dl2d.mp3
   - voice: XrExE9yKIg1WjnnlVkGX
   - voiceover metadata: status=ready source=ai language=en tone=Product walkthrough

Source: https://share.layerpath.com/share/cmqmo8rs900013b71edbmp8a2/tour