# Layerpath documentation Canonical URL: / Description: Learn how to create a project, edit its tour and steps, and present it as an interactive tour, guide, or video export. # Create a project. Share it as an interactive tour, guide, or video export. [#create-a-project-share-it-as-an-interactive-tour-guide-or-video-export] Start with existing material or record a browser workflow. Then improve it and share it in the format your audience needs. Create your first project ## How should I start? [#how-should-i-start] Choose the path that matches the material you have now. Add new images or video, reuse library media, or use a supported link, then describe what viewers should learn. Capture a browser task in the order viewers should follow it. ## What happens next? [#what-happens-next] Review the initial tour, make focused changes, then preview the complete experience. Confirm that the project is ready before judging its final step order and content. Review the ordered steps and make changes in the editor. Decide whether viewers should use an interactive tour, read a guide, or watch a video export. ## How Layerpath fits together [#how-layerpath-fits-together] A **workspace** contains projects. Each project has one editable tour made of ordered steps. The tour is the source for the interactive experience, guide, and video export. [Understand the Layerpath product model](/get-started/what-is-layerpath). --- # Choose how to start a project Canonical URL: /create/choose-how-to-start Description: Choose Create with Agent for existing media or Record your screen for a browser workflow. Choose **Create with Agent** when you already have images or video. Choose **Record your screen** when you need to capture a browser workflow as you perform it. Both paths create a project with one editable tour made of ordered steps. ## What you need [#what-you-need] Decide what source you have before you start: * Existing images, video, or reusable media → **Create with Agent**. * A browser workflow that has not been captured yet → **Record your screen**. Keep the outcome narrow. “Show a new customer how to connect a calendar” gives the first tour a clearer purpose than “Explain the product.” ## Start the project [#start-the-project] On **Home**, find **Choose how to start your project**. Select **Create with Agent** for media you already have. Select **Record your screen** for a browser workflow you need to capture in order. **Create with Agent** opens **Start with media or a link**. **Record your screen** continues in the Chrome extension. ## What happens next [#what-happens-next] Create with Agent asks for source media and the outcome viewers should reach. Record your screen captures the browser workflow. Layerpath then prepares an initial tour for the project. If you are starting from media, continue with [Create a project with Agent](/create/create-with-agent). Create with Agent ## Choose based on the source [#choose-based-on-the-source] | What you have | Start with | Why | | ----------------------------- | ---------------------- | ------------------------------------------------------------ | | Product screenshots or images | **Create with Agent** | Arrange existing media around one viewer outcome. | | An existing video | **Create with Agent** | Use the video as source material for the initial tour. | | A Loom link | **Create with Agent** | Use **Import Loom** when that option is shown. | | A live browser task | **Record your screen** | Capture the actions in the order viewers should follow them. | * **Record your screen** captures browser workflows through the Chrome extension. * Use **Import Loom** only when it appears in **Create with Agent**. * A preview can appear before processing is complete. Check the visible processing state before editing. ## When the result is not what you expect [#when-the-result-is-not-what-you-expect] ### You opened the wrong path [#you-opened-the-wrong-path] Select **Back**, return to **Choose how to start your project**, and choose the other path. ### A starting choice is missing [#a-starting-choice-is-missing] Return to **Home** and check the available creation actions. If the action still does not appear, open **Help** from the Layerpath navigation. ### Recording does not begin [#recording-does-not-begin] Return to Layerpath and open **Help**. Include what happened after you selected **Record your screen** and any message shown by the extension. The starting path changes how Layerpath receives source material, not the object it creates. The project contains one editable tour, and that tour contains ordered steps. A guide mirrors the tour, while a video export renders it. Read [What is Layerpath?](/get-started/what-is-layerpath) for the complete product model or [Understand project processing](/create/understand-processing) before reviewing an early preview. --- # Create a project with Agent Canonical URL: /create/create-with-agent Description: Combine source material with a creation prompt to prepare an editable initial tour. Create with Agent requires both source material and a creation prompt. The source shows the workflow. The prompt states what the tour should help viewers understand or accomplish. ## What you need [#what-you-need] Prepare: 1. Source material that shows the useful workflow in its intended order. 2. A creation prompt naming the audience, task, and expected result. 3. A final success or confirmation state when the workflow has one. Remove repeated, irrelevant, outdated, or sensitive material before adding the source. ## What Layerpath can use during creation [#what-layerpath-can-use-during-creation] * **Visible source content and sequence** help establish what happens and in what order. * **Useful narration in a source video** can provide additional context about intent, terminology, sequence, and important moments. It does not guarantee a better result. * **The creation prompt** explains what the tour should teach and where it should finish. * **Steps** controls granularity for supported video creation. **Voiceover** and **Tone** refine the requested presentation when you change them from Auto. * **Brand memory Beta**, when configured, can provide bounded workspace identity and voice guidance. Layerpath may not apply every input exactly as you expect. Compare the initial tour with the source and creation prompt. ## Create the project [#create-the-project] ## What usually produces a stronger initial tour [#what-usually-produces-a-stronger-initial-tour] * Include the complete workflow, including its final success state. * Keep images in the order viewers should follow when possible. * Keep useful spoken narration in a source video. * State one narrow viewer outcome. * Remove repeated screens, long pauses, unrelated states, and sensitive information. These choices are guidance, not enforced requirements. A clear source reduces ambiguity, but the resulting tour still needs review. ## Choose the source [#choose-the-source] Uploaded and library images and videos can be combined in one creation. A Loom or YouTube URL cannot currently be combined with other media. When either URL option is available, use that URL as the only source. | Choice | Use it when | | ----------------------- | ---------------------------------------------------------------------------------------------------------- | | **Upload from device** | The images or video are stored on your device. | | **Choose from library** | The source media already exists in the Layerpath media library. Provide the current creation prompt again. | | **Import Loom** | The option is shown and your source is a Loom link. | Library reuse provides convenient access to saved media. Do not assume that a library item preserves or reuses interaction details from an earlier Chrome extension recording. Provide the current creation prompt and review the result as a new creation. ## Decide whether to change advanced options [#decide-whether-to-change-advanced-options] | Choice | Keep or select it when | | ------------------------------ | --------------------------------------------------------------------------------- | | **Steps: Auto** | Layerpath should choose the initial level of detail for supported video creation. | | **Steps: Short** | A supported video workflow needs a more compact starting sequence. | | **Steps: Detailed** | A supported video workflow needs more intermediate moments represented. | | **AI voiceover: Auto** | You want the default creation behavior. | | **AI voiceover: On** | The initial tour should include generated narration. | | **AI voiceover: Off** | The initial tour should remain silent. | | **Tone: Auto** | Layerpath should infer the writing style from the source and creation prompt. | | **Clear, Friendly, or Formal** | The audience or use case requires that specific writing style. | Advanced options refine the request. They do not replace a clear creation prompt or complete source. When the creation contains images only, **Steps** remains on **Auto**. **Short** and **Detailed** apply to supported video creation. ## How Brand memory relates to creation [#how-brand-memory-relates-to-creation] Brand memory is Beta. When it is configured for the workspace, Layerpath can use bounded identity and voice guidance while preparing the initial tour. This can include approved terminology, writing guidance, and identity defaults. Application can vary, so review wording, visual choices, and voice settings in the editor. This page does not define Brand memory setup or promise that every generated element will follow it. ## What happens next [#what-happens-next] Open the initial tour in the editor. Compare it with the source and creation prompt. Review and refine the generated steps, Intro, Outro, callouts, and requested voiceover. Verify that each is accurate before sharing the tour. Understand processing * Use **Import Loom** only when it appears in the source picker. * Use a Loom or YouTube URL by itself. It cannot currently be combined with uploaded or library media. * Follow the file guidance shown in the current upload screen. * The preview can change until processing reaches **Done**. * Narration, Advanced options, and Brand memory provide context. They do not guarantee a specific result. * Verify generated steps, Intro, Outro, callouts, and voiceover before sharing the tour. ## When the result is not what you expect [#when-the-result-is-not-what-you-expect] ### The arrow button is unavailable [#the-arrow-button-is-unavailable] Confirm that source media appears in the composer and that the creation prompt is not empty. If an upload is in progress, wait for it to finish. ### Add source is unavailable [#add-source-is-unavailable] Select a media item in the library first. The selected-item count updates before **Add source** becomes available. ### Import Loom is not shown or the link is not accepted [#import-loom-is-not-shown-or-the-link-is-not-accepted] Use **Upload from device** or **Choose from library** when either path fits your source. If you need help with the link, open **Help** from the Layerpath navigation. ### Processing does not finish [#processing-does-not-finish] Keep the existing project and open **Help**. Include the project name, visible phase, and exact message shown. --- # Record your screen with the Chrome extension Canonical URL: /create/record-with-chrome-extension Description: Capture a browser workflow as ordered steps, then review the resulting tour in the editor. Use **Record your screen** when the browser workflow itself is the source. Layerpath turns accepted clicks into ordered steps inside one editable tour. Use [Create with Agent](/create/create-with-agent) instead when you already have images, video, a supported link, or library media. ## What the extension captures [#what-the-extension-captures] Each accepted click is the main step boundary. The extension captures the visible page state for that click, the click location, and useful page context such as the page title, URL, and visible control labels. Typing, focus changes, and scrolling can provide supporting interaction signals. They do not create steps by themselves. The typing signal does not include the characters you type, but the visible page screenshot can still contain text, form values, names, or other sensitive information. Optional microphone narration can provide additional context while Layerpath prepares the tour. It requires microphone permission. When narration is on, audio playing in the recorded tab may also be captured. Narration can help communicate intent, terminology, sequence, and important moments, but you must review all generated content. ## What is not captured reliably [#what-is-not-captured-reliably] * Hover-only actions do not create a step. * Typing or scrolling without a click does not create a step. * Drag interactions, canvas controls, and short-lived visual states may not produce a useful step. * Dropdowns and modals are useful only when the intended state is visible at the captured click. * Content inside embedded frames may be incomplete, especially when the embedded content comes from another site. * Chrome settings, the Chrome Web Store, extension pages, and other restricted browser pages are not recordable. * Other browsers are outside the current supported boundary for this page. You can switch between normal Chrome tabs during a recording. Page access and visible state can vary between tabs, so verify every step before sharing. ## Before you start [#before-you-start] * [Choose Record your screen as the starting path](/create/choose-how-to-start). * Install the official [Layerpath Chrome extension](https://chromewebstore.google.com/detail/layerpath-create-interact/bckkboajpcaejmbajljhebicnflhdajc). * Sign in to Layerpath in Chrome and confirm the workspace where the project should appear. * Open a normal website. Chrome internal pages cannot be recorded. * Use test data where possible. Remove passwords, personal information, API keys, private messages, and unrelated tabs from the workflow. * Rehearse one clear path from start to finish. Deliberate actions produce a tour that is easier to review. * Keep Chrome open until the Layerpath processing view appears after you finish. ## Record the workflow [#record-the-workflow] On Layerpath Home, choose **Record your screen**. Go to the normal web page where the workflow starts, then open the Layerpath extension from the Chrome toolbar. If the extension asks you to sign in, complete sign-in in the opened tab. Return to the starting page and reopen the extension. Turn on narration only if you want to speak during the workflow. If Chrome asks for microphone permission, allow it or turn narration off before continuing. Choose **Start recording**. On a first recording, Layerpath may show **How recording works**. Review it and choose **Start recording** again. Wait for the countdown to finish before interacting with the page. Select only the controls a viewer needs to follow. Each accepted click increases the step count. Use the count as an orientation aid, then verify every step in the editor after finishing. If you need a break, open the extension and choose **Pause**. Pause stops step capture and pauses the screen and narration recording. Choose **Resume** when you are ready to continue the same recording. Choose **Finish** when the workflow is complete. The control changes to **Finishing...** while the extension submits the recording and opens Layerpath. The Layerpath processing view is the handoff acknowledgment. The **Finishing...** label alone does not prove that the recording reached Layerpath. After the processing view opens, the source page is no longer needed for the active recording. Keep the Layerpath tab open to monitor processing. Choose **Discard** only when you want to abandon the capture. At **Discard recording?**, choose **Discard** to delete the active recording or **Cancel** to return to it. Do not choose **Discard** if you may need the capture. The current flow does not offer a restore action after you confirm deletion. Layerpath creates a project with one editable tour. The recorded clicks become ordered steps. A preview can appear before callouts, content, and optional voiceover are complete. Follow the visible processing stages. Treat the handoff as complete only when processing reaches **Done** and **Edit** is available. Compare the step count and sequence with the workflow you performed. Open several steps and confirm that each one shows the expected page state and target. Then continue with [Editor basics](/edit/editor-basics). ## Review the result before sharing [#review-the-result-before-sharing] The expected result is a new project whose tour contains the browser actions in order. Verify all of the following before sharing: * The project appears in the intended workspace. * The tour opens in the editor. * The number and order of steps match the recorded path. * Each captured step shows the expected page state. * Hotspots and callouts point to the intended action. * Intro, Outro, callouts, and optional voiceover are accurate and supported by the recorded workflow or your narration. * No password, token, personal information, or unrelated browser content is visible. * The complete tour works in Preview. If Layerpath is still preparing the project, use [Understand processing](/create/understand-processing) to identify the visible state. Do not assume that a completed extension animation means processing has finished. ## Known limitations and common mistakes [#known-limitations-and-common-mistakes] | Situation | What to do | | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | The capture is shorter than three seconds or contains no accepted click | Start again and record one complete, deliberate path with at least one click. A very short or empty capture may not create a project. | | You clicked the wrong control | If the rest of the recording is useful, finish and remove the unwanted step in [Manage steps](/edit/manage-steps). Otherwise, discard and start again. | | A dropdown, modal, or loading state disappeared too quickly | Pause before the action, prepare the state, resume, and click only after the intended state is visible. Confirm the result in the editor. | | You need a hover, drag, canvas action, or embedded control | Record the closest reliable click state, then inspect the result. Do not assume the interaction itself was captured. | | The page reloads during recording | Reopen the extension and check whether the recording and step count are still active. Continue only after the active state is visible, then verify the surrounding steps in the editor. | | You close the original tab before finishing | Reopen the extension immediately. Continue only if the active recording and step count are visible. Screen and narration continuity may stop when the original tab closes. | | You see a microphone permission error | Allow microphone access in Chrome, or turn narration off and start without it. | ## Sensitive data and privacy [#sensitive-data-and-privacy] The extension can capture website content and user activity that is visible during the workflow. Treat every captured page as publishable source material. * Use a test account and synthetic records whenever possible. * Close private messages, unrelated tabs, notifications, and password managers before starting. * Mute unrelated tab audio, calls, and videos before turning narration on. * Do not enter passwords, access tokens, payment details, health information, or customer data during the recording. * Remember that typed characters are not required for the page screenshot to reveal the final visible value. * Review every step at full size before sharing the tour. * If sensitive information appears, remove the affected step or record the workflow again with safe data. ## When the result is not what you expect [#when-the-result-is-not-what-you-expect] ### The extension shows **Restricted Page** [#the-extension-shows-restricted-page] Open a normal website in Chrome, then reopen the extension. Chrome internal pages and extension pages are not recordable. ### The extension asks you to sign in [#the-extension-asks-you-to-sign-in] Complete sign-in, return to the website, and reopen the extension. Confirm the intended workspace before starting. ### **Start recording** does not begin a countdown [#start-recording-does-not-begin-a-countdown] Keep the source tab open and note the visible error. Reopen the extension once. If the countdown still does not begin, open **Help** in Layerpath and include the time, Chrome version, website domain, and exact message. ### The processing view does not appear after **Finish** [#the-processing-view-does-not-appear-after-finish] Keep Chrome open and connected. Check **Projects** once for the new project. If it is not there, preserve the exact visible message and open **Help** in Layerpath. The extension attempts background retries, but a user-controlled retry is not currently available in the visible flow. ### Processing does not reach **Done** [#processing-does-not-reach-done] Keep the project and note the visible stage. Read [Understand project processing](/create/understand-processing). If the stage remains unchanged, open **Help** and include the project name, time, and visible message. ### The project appears with missing or incorrect steps [#the-project-appears-with-missing-or-incorrect-steps] Do not share it. Remove an unwanted step when the source is otherwise correct. If steps are missing or the captured page state is wrong, preserve the project and open **Help** with the affected step numbers. --- # Understand project processing Canonical URL: /create/understand-processing Description: Distinguish an early tour preview from a completed project and interpret the visible processing phases. A tour preview can appear before project creation is complete. Judge progress by the highlighted phase, not by the appearance of the preview. The initial tour is ready to inspect when the sequence reaches **Done** and **Edit** is available. ## How to know when the project is ready [#how-to-know-when-the-project-is-ready] Check two visible signals: 1. The phase sequence reaches **Done**. 2. **Edit** is available. Until both signals appear, callouts, requested voiceover, or final project preparation may still be in progress. ## Review progress [#review-progress] Use the active label in the progress indicator. Do not infer readiness from how complete the preview looks. Check whether the source media and step sequence reflect the intended workflow. During **Callouts**, expect the guidance copy to change. Continue reviewing until the sequence reaches **Done** and **Edit** becomes available. Select **Edit** and verify the step order, callouts, source media, and any requested voiceover. ## What happens next [#what-happens-next] The editor opens the tour that Layerpath prepared. Review the complete sequence before changing styles or sharing it. Learn editor basics | Phase | What it means for your review | | -------------- | -------------------------------------------------------------------------- | | **Callouts** | The preview can appear while Layerpath writes and refines callout copy. | | **Voiceover** | Voiceover work is in progress when it is part of the creation flow. | | **Finalizing** | Layerpath shows **Getting your project ready**. Keep waiting for **Done**. | | **Done** | Confirm that **Edit** is available, then inspect the tour. | * Processing time can vary; this page does not provide a fixed duration. * A visible preview is not a completion signal. * **Edit** and **Share** can remain unavailable while a processing phase is active. * Check requested voiceover and callout wording after **Done**. ## When the result is not what you expect [#when-the-result-is-not-what-you-expect] ### **Edit** and **Share** are unavailable [#edit-and-share-are-unavailable] Check the highlighted phase. If **Callouts**, **Voiceover**, or **Finalizing** is active, wait for **Done**. ### Callout wording changes while you review [#callout-wording-changes-while-you-review] The **Callouts** phase indicates that the copy is still being refined. Review it again after **Done**. ### The phase stops changing or an error appears [#the-phase-stops-changing-or-an-error-appears] Keep the existing project and open **Help**. Provide the project name, active phase, exact message, and whether a preview is visible. ### The result looks incomplete after **Done** [#the-result-looks-incomplete-after-done] Open **Edit** and compare the steps with the source workflow. Note which step, callout, source item, or requested voiceover is missing before opening **Help**. --- # Editor basics Canonical URL: /edit/editor-basics Description: Orient yourself in the tour editor: select a step, use its contextual controls, make one change, and Preview. Use this page to learn the manual editing loop, not every editor control. ## What you need [#what-you-need] * A project that opens in the editor. If the project is still being prepared, [check its processing state](/create/understand-processing). * One specific change you want to make. * Any replacement image or copy needed for that change. ## The basic editing loop [#the-basic-editing-loop] Choose the step counter in the lower-left corner to open the step list, then select the step you want to edit. The canvas and toolbar update for the selected step. Confirm the step type above the canvas, then read the controls below it. An Image step can expose **Insert**, **Layout**, **Voiceover**, and more actions. If the expected control is missing, check the selected step and its type before continuing. Choose one toolbar control, make the change, and confirm the result on the canvas before moving to another step. For example, a Blank step can expose its color choices. Choose **Preview** in the editor header. Move through the tour from the beginning and check the step order, content, guidance, and ending. Return to the editor to correct anything that does not match your intended result, then preview again. This orientation deliberately stops after one manual change and Preview. Continue with [Manage steps](/edit/manage-steps), [Layouts and backgrounds](/edit/layouts-and-backgrounds), or [Hotspots, areas, and callouts](/interactivity/hotspots-areas-callouts) for a focused walkthrough. * The toolbar is contextual, so controls change with the selected step and element. * This page covers manual orientation only; it is not a complete editor reference. * **Agent** opens Edit with Agent, a separate Beta editing path that this page does not teach. * Use **Preview** after each focused change before continuing. ## When the result is not what you expect [#when-the-result-is-not-what-you-expect] ### The toolbar does not show the control you expected [#the-toolbar-does-not-show-the-control-you-expected] Confirm the selected step and its type. The toolbar is contextual. Return to the step list, select the intended step, and check the toolbar again. ### You cannot find the step you need [#you-cannot-find-the-step-you-need] Open the step selector again and confirm the step label above the canvas. If the step is still missing, stop editing and contact support with the project and expected step. ### A change is missing in **Preview** [#a-change-is-missing-in-preview] Return to the editor and reopen the affected step. Confirm that the editor shows the intended value, then preview again. If the editor and Preview still differ, stop and contact support with the project, step, and visible mismatch. ## What to do next [#what-to-do-next] Manage steps --- # Layouts and backgrounds Canonical URL: /edit/layouts-and-backgrounds Description: Place step media and choose a supporting color or abstract background. Choose a composition that keeps the step media readable and leaves enough room for its guidance. ## What you need [#what-you-need] * A supported step selected in the editor. * Media that is already cropped closely enough to remain useful at the chosen size. * A clear reason to leave space beside or above the media. ## Choose the composition [#choose-the-composition] Select the step, then choose **Layout** in the contextual toolbar. If the control is missing, check the step type before continuing. Choose one of the five visible positions: | Layout | Use it for | | ---------- | ----------------------------------------------------- | | **Full** | Media that should occupy the available canvas. | | **Right** | Media on the right with supporting space on the left. | | **Left** | Media on the left with supporting space on the right. | | **Bottom** | Media below supporting space. | | **Top** | Media above supporting space. | If a fit control is available, choose **Cover** to fill the media area or **Fit** to keep the complete media visible. Check the canvas for unwanted cropping or unused space. Choose **Colors** for a quiet field or **Abstract** for one of the available image backgrounds. Keep the media, guidance, and any text readable against the result. Preview the previous step, the edited step, and the next step. Confirm that the composition does not create an abrupt scale or contrast change. * Layout availability can change with the selected step type. * Intro and Outro have additional theme behavior that this page does not cover. * The current evidence does not include a selected video step. * Always use **Preview** to check the final crop, spacing, and guidance position. ## When the composition is not what you expect [#when-the-composition-is-not-what-you-expect] ### Important content is cropped [#important-content-is-cropped] Switch from **Cover** to **Fit**, choose a different layout, or replace the source with a closer crop. ### The background competes with the step [#the-background-competes-with-the-step] Return to **Colors** and choose a quieter background. The viewer action should remain the strongest visual element. ### Layout is missing [#layout-is-missing] Confirm the selected step and its type. If **Layout** is still unavailable, use a supported step type or contact support with the project and step. ## What to do next [#what-to-do-next] Configure tour playback --- # Manage steps Canonical URL: /edit/manage-steps Description: Add, reorder, duplicate, hide, and delete the ordered steps in a tour. Build a clear tour sequence by adding only the steps viewers need and placing them in the right order. ## What you need [#what-you-need] * A project that opens in the editor. * A simple outline of the viewer journey from first step to last step. * Any media needed for a new Image step or Video step. ## Arrange the tour [#arrange-the-tour] Choose the step counter in the lower-left corner. Select a step to inspect its content and its place in the sequence. At the intended insertion point, choose **Add step** to add sourced media or **Blank step** to begin with an empty canvas. Confirm the new step appears in the step list. Drag a step thumbnail to its intended position. Read the full sequence from top to bottom, then choose **Preview** and move through it in the same order a viewer will. Open the menu for the selected step, then choose the action that matches your intent: | Action | Use it when | | ------------------ | ---------------------------------------------------------------------------------------- | | **Duplicate step** | You want a copy to adapt without rebuilding the step. | | **Hide step** | You want to retain the step in the editor while you test the sequence without it. | | **Delete step** | You no longer need the step. Confirm the deletion only after checking the selected step. | Start at the beginning. Check that every step has a clear purpose, the order is logical, and the tour reaches the intended result without unrelated content. * Reorder is supported, but the current public evidence bundle does not include a focused drag-state image. * Hidden step behavior should be checked in **Preview** before the tour is shared. * Deletion is permanent after confirmation. Duplicate first when you want a safe copy to compare. * This page does not cover bulk selection or step-specific media editing. ## When the sequence is not what you expect [#when-the-sequence-is-not-what-you-expect] ### A new step appears in the wrong place [#a-new-step-appears-in-the-wrong-place] Open the step list, drag the step to the intended position, and preview again. ### A hidden step still affects the experience [#a-hidden-step-still-affects-the-experience] Return to the step list and confirm that you hid the intended step. Preview from the beginning. If the step still appears, contact support with the project and step name. ### You deleted the wrong step [#you-deleted-the-wrong-step] Stop editing and contact support. Do not make additional structural changes until you know whether the step can be recovered. ## What to do next [#what-to-do-next] Add viewer guidance --- # Tour playback settings Canonical URL: /edit/tour-playback-settings Description: Configure navigation, auto zoom, motion, autoplay, cursor, and callout visibility. Set how viewers move through the tour, then preview the complete experience before sharing it. ## What you need [#what-you-need] * A tour with its final step order. * A decision about whether viewers should control the pace or follow an automatic sequence. * A desktop and mobile device for Preview review. ## Configure playback [#configure-playback] Open the selected step menu, choose **Settings**, then open **General**. Turn on **Show navigation bar** when viewers should see progress and jump directly to another step. If **Auto zoom** is available, turn it on to let Layerpath frame steps automatically. Choose **Slow**, **Smooth**, or **Quick** for the motion between steps. Auto zoom is a tour setting. An [authored zoom](/interactivity/hotspots-areas-callouts#add-an-authored-zoom) is a focus region you add to one step. Turn on **Enable autoplay** when the tour should control the pace after the viewer begins. Choose 3, 5, 7, or 9 seconds per step. Silent image steps advance after the selected duration. A step with voiceover waits for the voiceover to finish, even when it runs longer than the selected duration. Choose **Default**, the pointer, or the circle. Use the style that makes the intended action easy to follow without covering the target. Open **Callouts** in Tour Settings. Choose whether to show callouts, arrows, and the Back and Next navigation buttons. Move through the complete tour. Check direct navigation, motion, step timing, cursor placement, callout readability, and Back and Next behavior. ## How autoplay works [#how-autoplay-works] * A viewer begins the tour by interacting with the first screen. Autoplay does not start before that first action. * Silent image steps use the duration selected in **Tour Settings**. * Image steps with voiceover advance after the voiceover finishes. * A step that requires a choice can wait for the viewer instead of advancing on the timer. * An authored zoom finishes before the tour advances. * The tour stops after the final step. It does not automatically restart. - Browsers can block audio until the viewer interacts with the page. If audio cannot play, the tour can continue using the step duration. - On a public share link, interactive controls are unavailable after autoplay begins. - Auto zoom may not be available in every environment. - Settings shown here describe the tour. This page does not establish behavior for other outputs. - Preview every settings change on the devices your audience uses. ## When playback is not what you expect [#when-playback-is-not-what-you-expect] ### The tour advances too quickly [#the-tour-advances-too-quickly] Increase the duration per step or turn off autoplay. Preview steps with longer voiceover before choosing a duration. ### The share link does not begin automatically [#the-share-link-does-not-begin-automatically] Interact with the first screen to begin playback. Browsers require this first action before Layerpath can start voiceover reliably. If the tour still does not advance, return to **Tour Settings** and confirm **Enable autoplay** remains on. Preview the tour again before reopening the share link. ### The tour waits on one step [#the-tour-waits-on-one-step] Check whether the step contains a form or more than one button. Complete the choice to continue. ### Framing moves too quickly [#framing-moves-too-quickly] Choose **Slow** or **Smooth**. If one step still needs a specific focus region, add an authored zoom to that step. ### Navigation or callout controls are missing [#navigation-or-callout-controls-are-missing] Return to Tour Settings and check both **General** and **Callouts**. Preview again after changing the relevant toggle. ## What to do next [#what-to-do-next] Refine viewer guidance --- # Create your first project Canonical URL: /get-started/create-your-first-project Description: Choose Create with Agent or Record your screen, then review the resulting tour in the editor. ## Choose your starting point [#choose-your-starting-point] Layerpath has two entry points. Start from material you already have, or record the browser workflow as you perform it. ### Start with media or a link [#start-with-media-or-a-link] Use **Create with Agent** when the source material already exists. Choose one source path: * **Upload from device** for new images or video. * **Choose from library** to reuse media already saved in your workspace. Choose only the items needed for the viewer outcome. * **Import Loom** when the option is shown and your source is a Loom link. Add the source, then describe what the project should help viewers do. [Create a project with Agent](/create/create-with-agent). ### Record a workflow [#record-a-workflow] Choose **Record your screen** when the browser workflow is the source you need to capture. Perform the task in its intended order and keep unrelated tabs, personal data, and credentials out of the recording. After the recording is added to Layerpath, review the resulting tour in the editor. ## Create the project [#create-the-project] Write one sentence that names the audience, the task, and the intended result. Keep the first project narrow enough to review from start to finish. Add new media or a supported link, choose existing workspace media, or record the browser workflow. Include only what the viewer needs. Open the project in the editor. Check that the steps are accurate, useful, and in the intended order. Experience the tour from the beginning. Confirm that each step makes the next action clear before sharing it with viewers. A preview can appear while a project is still being prepared. Check the visible processing state before treating the initial tour as complete. Check the step order, accuracy, sensitive information, and next action before sharing it as an interactive tour. 1. Confirm that the tour opens with the information viewers need and ends with the intended result. 2. Remove unrelated steps and put the remaining steps in a useful order. 3. Check every step for private information or outdated source media. 4. Make sure the guidance explains the next action without repeating what is already clear on screen. 5. Preview the complete tour as a viewer would experience it. ## What happens next? [#what-happens-next] * If the project is still being prepared, read [Understand project processing](/create/understand-processing). * To review the canvas, step list, and preview controls, continue to [Editor basics](/edit/editor-basics). * To compare interactive tour, guide, and video export, read [What is Layerpath?](/get-started/what-is-layerpath#choose-how-people-experience-it). Create with Agent --- # What is Layerpath? Canonical URL: /get-started/what-is-layerpath Description: Understand how a Layerpath workspace, project, tour, steps, guide, and video export relate. Layerpath turns one workflow into a **project** that people can experience as an **interactive tour**, a **guide**, or a **video export**. You edit one tour made of ordered **steps**; each output uses that source. ## Three ideas to remember [#three-ideas-to-remember] 1. A **project** is the item you create and organize in a workspace. 2. The **tour** is the source you edit inside that project. 3. A **step** is one ordered part of the tour. Edit the tour when you need to change the content, sequence, or guidance. The other formats use that same source. ## Choose how people experience it [#choose-how-people-experience-it] ### Interactive tour [#interactive-tour] Use an interactive tour when viewers should move through the workflow one step at a time. ### Guide [#guide] Use a guide when viewers should scan or read the steps as a document. The guide mirrors the tour; it does not have a separate editor. ### Video export [#video-export] Use a video export when viewers should watch a rendered version without interacting with the tour. A project has one editable tour. A guide mirrors that tour, and a video export renders it. Change the tour when the content needs to change. | Term | What it means | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | **Workspace** | The container for projects and workspace-level areas such as team folders, Playlists, Brand memory (Beta), Insights, members, and settings. | | **Project** | The top-level item you create, find, and organize. Each project contains one editable tour. | | **Tour** | The source you edit inside a project. It contains the ordered steps. | | **Step** | One ordered part of a tour. The step types are Intro, Image step, Video step, Blank step, and Outro. | | **Guide** | A reading presentation that mirrors the tour and its steps. | | **Video export** | A rendered version of the tour. | A guide can also be copied as steps or downloaded as a PDF. A hotspot, Area, or callout can add guidance within a step; these are not additional step types. ## One project, three viewer experiences [#one-project-three-viewer-experiences] For example, one customer-onboarding project can keep a single tour as its source. The same ordered steps can support an interactive tour, a guide for a help center, and a video export for asynchronous training. Create a project --- # How Brand memory affects creation Canonical URL: /brand-memory/how-it-affects-creation Description: What changes in the projects you create after Brand memory is set up, and why projects you already made keep the look they were created with. Once Brand memory is set up, Layerpath consults it every time it generates. This page explains what that changes in each creation path, and why the projects you already made stay as they are. Brand memory is Beta. It provides guidance to generation rather than a guarantee. Review wording, visual choices, and voice settings in the editor before you share a project. ## What each creation path uses [#what-each-creation-path-uses] Both creation paths read Brand memory. What differs is which parts of the project each one generates. | Path | What Brand memory shapes | | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Create a project with Agent](/create/create-with-agent) | Titles and body copy in the plan Layerpath drafts from your prompt, then the callouts, step titles, connecting prose, and voiceover script generated as the tour is built out | | [Record your screen](/create/record-with-chrome-extension) | The callouts on each step, the step titles, the connecting prose, and the voiceover script written after Layerpath analyzes your recording | Both paths also take your visual identity, so the colors, logo, and fonts are applied to the project as it is created. ## Your voice varies by situation [#your-voice-varies-by-situation] Brand memory does not hold one single writing style. It holds several, and the one Layerpath uses depends on what the project is for. The project category, such as a product walkthrough, a sales demo, customer onboarding, or internal training, selects which part of your voice applies. The same Brand memory produces a different register for a sales demo than for internal training, which is what the **Position** and **Enable** cards on the Voice tab describe. ## What Brand memory does not do [#what-brand-memory-does-not-do] * It does not rewrite projects you already created. * It does not change voiceover audio that has already been generated. Existing audio is a finished file. * It is not used at all until you choose **Apply brand voice** on the Brand voice tab. Before that, generation runs on Layerpath's defaults. * It guides generation. It does not guarantee that every generated element follows it, which is why reviewing the result in the editor still matters. ## Why projects you already made do not change [#why-projects-you-already-made-do-not-change] When Layerpath creates a project, it records your visual identity as it stands at that moment and keeps that record with the project. The project renders from its own copy afterwards, in the editor, in the player, on a shared link, and in an exported video. Setting up Brand memory later, or changing it, does not reach back into that copy. So if you create two projects and then set up Brand memory: | Project | How it looks | | -------------------------------- | --------------------------------------- | | The two you created first | Layerpath's default branding, unchanged | | Everything you create afterwards | Your own brand | This is deliberate. Finished work that has been shared with customers stays as it was when you shared it. There is currently no action that applies your current brand to a project you made earlier. If an existing project needs your branding, recreate it. ## The watermark is the exception [#the-watermark-is-the-exception] The watermark setting follows your workspace as it stands now rather than being recorded with each project. Turning the watermark off removes it from projects you already created as well as new ones. Language and voiceover voice settings behave the same way. A billing entitlement or a workspace-wide preference should not be frozen into work you already finished. ## Check the result [#check-the-result] Brand memory changes what Layerpath generates, so review these in the editor before sharing: * Step titles and callout wording read the way your company writes. * Preferred words from **Language rules** are used, and words you asked Layerpath to avoid are absent. * The voiceover script matches your intended register for this kind of project. * Colors, logo, and fonts are the ones you set on the Identity tab. * The register suits the audience, whether you are positioning to a prospect or guiding an existing user. When wording is wrong across several projects rather than in one place, correct the voice itself on [Review your brand voice](/brand-memory/review-your-brand-voice) instead of editing each project. --- # Review your brand voice Canonical URL: /brand-memory/review-your-brand-voice Description: Read what Layerpath learned about how your company writes, correct what sounds wrong, then put the voice into use. The Brand voice tab shows what Layerpath learned about the way your company writes, and two worked examples so you can judge it. Read the examples, correct anything that sounds wrong, then choose **Apply brand voice** to put it into use. Brand memory is Beta. Read the generated wording before you put a voice into use, and check the results in the editor after you create your next project. ## Nothing changes until you choose to use it [#nothing-changes-until-you-choose-to-use-it] Layerpath keeps new results separate from the settings your projects use now. New results are marked as not yet in use, and the projects you create continue to use your current settings until you choose **Apply brand voice**. This means you can read everything on this tab, correct it, and read it again, without affecting anyone's work in the meantime. ## How to read the two examples [#how-to-read-the-two-examples] Under the heading that asks how Layerpath will write for you sit two cards. Each shows a sample screen, a callout, and the voiceover script Layerpath would write. The pair is deliberate. **Position your product** is how you communicate value to someone who has not bought yet. **Explain how it works** is how you guide someone already using the product. Most companies sound different in those two situations, and showing both is the quickest way to check that Layerpath understood the difference. Choose **Hear voiceover** to play a script aloud in your default AI voice. Feedback on these cards is optional, and the two responses do not do the same thing. **Yes, sounds good!** records your agreement and teaches Layerpath nothing. **Needs some change** is the response for a correction. ## Correct what sounds wrong [#correct-what-sounds-wrong] Because both examples come from one underlying voice, a correction to either one rewrites both together. Choose **Needs some change** on the example that reads badly. Pick a reason, or describe the problem in your own words, then choose **Review change**. Layerpath states the change it wants to make to your voice, then shows both examples rewritten so you can compare the previous and current wording side by side. Read the proposed change itself, not only the rewritten samples. It describes how every future generation will be affected, not just these two examples. Choose **Accept change** to keep it, **Refine** to describe what is still wrong, or **Cancel** to discard it. Nothing reaches your brand voice until you choose **Accept change**. A correction is never applied on your behalf. ## What Layerpath learned [#what-layerpath-learned] Below the examples, the tab lays out its understanding of your writing as a set of cards. | Card | What it holds | | -------------------- | --------------------------------------------------------------------------- | | **How you write** | Your tone, rhythm, and style, with the adjectives Layerpath matched to them | | **Position** | How you present value to prospective customers | | **Enable** | How you guide customers who are already using the product | | **Writing patterns** | The recurring constructions that make your writing recognizable | | **Language rules** | The words to prefer, avoid, and keep consistent | Most of these cards are Layerpath's reading of your company, useful to check for accuracy. **Language rules** is different: it is applied directly when Layerpath writes. If you need a particular word used or avoided, that is the card to check. Open **Advanced understanding** for the company overview, positioning, messaging, writing detail, and the evidence behind each conclusion. Each card names the source it came from. ## Put the voice into use [#put-the-voice-into-use] Choose **Apply brand voice** at the top of the tab. From that point, projects you create use this voice for callouts, step titles, connecting prose, and voiceover scripts. Until you choose it, generation runs on Layerpath's defaults no matter how much you have read or corrected on this tab. ## Known limitations [#known-limitations] * Corrections are held with the new results and reach generation only after you accept them and put the voice into use. * A voice built from too little material is not used for generation. When that happens, the tab says so and offers a different address or a manual setup instead. * Putting a voice into use does not change projects you already created, and does not regenerate voiceover audio that already exists. ## When the result is not what you expect [#when-the-result-is-not-what-you-expect] ### The voice does not sound like your company [#the-voice-does-not-sound-like-your-company] Choose **Needs some change** on whichever example is furthest off and describe the problem in the free text field. The quick reasons cover tone and length. Wording that is specific to your company usually needs the field. ### You accepted an example and then noticed a problem [#you-accepted-an-example-and-then-noticed-a-problem] Choose **Needs some change** on it anyway. Layerpath warns you that the correction rewrites both examples, then proposes the change for your review as usual. ### You corrected the voice but new projects read the same way [#you-corrected-the-voice-but-new-projects-read-the-same-way] Check that you chose **Accept change** on the proposed change, and then **Apply brand voice**. Both are required. Reading and correcting alone does not change what Layerpath generates. ### The tab says the voice was not used for generation [#the-tab-says-the-voice-was-not-used-for-generation] Research found too little to work from. Choose a different address if a better one exists, or set the voice up by hand. ### You want to start over [#you-want-to-start-over] Discard the new results to go back to the settings currently in use. The control asks you to confirm before anything is removed. --- # Set up Brand memory Canonical URL: /brand-memory/set-up-brand-memory Description: Set up Brand memory from a website URL, a brand PDF, or your own assets before you create your next project. Brand memory holds two things Layerpath reuses when it writes and designs for you: an **identity**, which is your logo, colors, fonts, and voice settings, and a **brand voice**, which is the words and tone your company uses. Set it up from a URL, a PDF, or your own assets before you create the next project. Brand memory is Beta. Review the identity and voice it produces before you rely on either one, and check generated wording and visual choices in the editor. ## Where to find it [#where-to-find-it] Open **Brand memory** in the workspace navigation. The page has **Identity** and **Brand voice** tabs and opens on Identity. ## What you need [#what-you-need] * A workspace where you can edit settings. Viewer access is read only. * A company website URL, a PDF with brand material, or the assets and writing examples you want to enter yourself. | Way to start | What it does | | ------------------------------ | ------------------------------------------------------------------------- | | Website URL, then **Generate** | Imports your logo, colors, fonts, and brand voice from the website. | | **Upload PDF** | Uses a style guide, design system, or brand-guidelines PDF up to 25 MB. | | **Create manually** | Lets you enter identity assets and provide brand-voice examples yourself. | ## Create with a URL [#create-with-a-url] Enter your website address and choose **Generate**. Layerpath prepares identity and brand-voice results for review. When the result is ready, review the Identity tab and choose **Apply identity** only after the logos, colors, icons, fonts, language, voice, and watermark are correct. ## Upload a PDF [#upload-a-pdf] Choose **Upload PDF**, then add a PDF of your style guide, design system, or brand guidelines. PDF upload is available to everyone. The visible stages show which part of preparation is running. Choose **Stop** only when you want to end a running job. Once the Identity tab is ready, correct it and choose **Apply identity**. ## Create manually [#create-manually] Choose **Create manually** when you want to upload identity assets and set the workspace details yourself. The manual Brand voice form accepts a tagline, product description, optional tone characteristics, positioning, product guidance, and preferred or avoided words. Choose **Derive brand voice** when those examples are ready. ## Review the identity [#review-the-identity] Once the identity arrives, work through the sections on the Identity tab and correct anything that is wrong. Confirm the logos, icons, and colors. Each color carries a hex value, so you can check it against your brand reference directly. Choose **Add color** to add a color Layerpath did not find. Layerpath sets a heading typeface and a body typeface. Both are shown with a preview of the name. **Language** sets the language for generated voiceovers. **Voice** picks the AI voice for the workspace. Choose **Preview** to hear it before you apply the identity. The watermark toggle shows or hides the Layerpath watermark in your projects. ## What happens next [#what-happens-next] When the identity is saved, the projects you create afterwards use it. Layerpath keeps working on the voice in the background, and tells you when the results are ready to read on the Brand voice tab. Continue with [Review your brand voice](/brand-memory/review-your-brand-voice) when that notice appears. ## Choices and variations [#choices-and-variations] | Situation | What to do | | ------------------------------------------------------- | --------------------------------------------------------------------------------- | | You would rather not share a website | Choose **Create manually** and supply your logo, colors, and fonts yourself. | | Your website changed | Choose **Try different URL** to run research against a different address. | | Layerpath could not reach your site | Check the address, then choose **Create manually** if the site stays unreachable. | | The address is not your own company site | Layerpath asks you to confirm before it spends research on it. | | Your workspace inherits branding from another workspace | The tab is read only. Switch to custom branding to edit it. | | You have Viewer access | The tab is read only. Ask an Owner or Admin to make the change. | ## Known limitations [#known-limitations] * Brand memory shapes projects you create from now on. It does not repaint projects that already exist. [How Brand memory affects creation](/brand-memory/how-it-affects-creation) explains why. * The voice is not used for generation until you choose **Apply brand voice** on the Brand voice tab. * Research reads your public website. It cannot read pages behind a sign-in. ## When the result is not what you expect [#when-the-result-is-not-what-you-expect] ### Research is still running well past 10 minutes [#research-is-still-running-well-past-10-minutes] Leave it running and close the page if you want to. Layerpath emails you when the result is ready. If nothing arrives and the page still shows work in progress much later, note the time and the website address, then open **Help** in Layerpath. ### The colors or logos are wrong [#the-colors-or-logos-are-wrong] Correct them on the Identity tab. Research reads a website, so an out of date or inconsistent site produces an inaccurate identity. Supplying the assets yourself is faster than repeated research when the site itself is the problem. ### Research finished but the Brand voice tab has nothing to read [#research-finished-but-the-brand-voice-tab-has-nothing-to-read] The identity finishes before the voice. Wait for the notice that voice results are ready. If the voice never arrives, choose **Try different URL** to run research against a different address. ### You cannot edit anything on the tab [#you-cannot-edit-anything-on-the-tab] Check whether you have Viewer access or whether the workspace inherits branding from another workspace. Both make the tab read only, and the page names the workspace it inherits from. --- # Hotspots, areas, and callouts Canonical URL: /interactivity/hotspots-areas-callouts Description: Guide attention with a point, region, or message, and add an authored zoom when a step needs focused framing. Point to the right target, explain the next action, and keep the guidance readable at the size viewers will use. ## Choose the right guidance [#choose-the-right-guidance] | Type | Use it when | | ----------- | --------------------------------------------------------- | | **Hotspot** | One precise point is the target. | | **Area** | A larger region is the target. | | **Callout** | The viewer needs a guidance message attached to a target. | Use the smallest target that remains clear. The guidance should name the action or expected result without repeating everything already visible on screen. ## Add and refine guidance [#add-and-refine-guidance] Choose the step, open **Insert**, then choose **Hotspot**. Place it on the control or region the viewer should use. Select the guidance, open its type menu, then choose **Hotspot**, **Area**, or **Callout**. Confirm that the target remains attached to the intended interface element. Use a direct action such as “Choose Add member.” Include the result only when it helps the viewer confirm the action. Use the contextual toolbar to format text, add a link when appropriate, choose readable colors, and open the position menu. Choose **Auto** first. If the message covers the target or important content, choose **Top**, **Left**, **Right**, or **Bottom**, then check the full step. Choose **Preview**. Check that the target is accurate, the message does not cover important content, and the next action is obvious on desktop and mobile. ## Add an authored zoom [#add-an-authored-zoom] Use an authored zoom when one step needs a specific focus region. Add the zoom to that step, select it, then choose **Preview Zoom** to check the framing. Each step supports one authored zoom. Delete it when the framing no longer helps. Authored zoom is separate from the tour-level **Auto zoom** setting. * Guidance types are not step types. * A guidance position that works on desktop can cover content on a smaller screen. * This page does not cover masks, embeds, text overlays, arrows, buttons, or images. * Preview the complete tour after changing guidance or Zoom. ## When guidance is not what you expect [#when-guidance-is-not-what-you-expect] ### The message covers the target [#the-message-covers-the-target] Choose **Auto** or move the message to another side. Shorten the instruction if it still takes too much space. ### The target moves away from the control [#the-target-moves-away-from-the-control] Return to the editor, select the guidance, and place it again. Preview at desktop and mobile sizes. ### Zoom makes the step harder to understand [#zoom-makes-the-step-harder-to-understand] Preview the Zoom, then delete it if the wider context is more useful than the focus region. ## What to do next [#what-to-do-next] Configure tour playback --- # What's new Canonical URL: /whats-new Description: Recent Layerpath changes and the Help Docs pages that explain them. Find recent changes that affect how you use Layerpath or follow these Help Docs. Product changes and documentation changes are labeled separately. Start with images, video, library media, or a supported link. Agent prepares an initial tour for your review. New task pages explain steps, layouts, visual settings, and playback behavior. A dedicated page now explains hotspots, areas, and callouts. ## July 15, 2026 [#july-15-2026] ### Create with Agent [#create-with-agent] **Create with Agent** is the creation path for material you already have. Add images or video, reuse saved library media, or use a supported link, then describe what viewers should accomplish. Agent prepares an initial tour that you review and refine in the editor. The complete procedure, source choices, and Advanced options are in [Create a project with Agent](/create/create-with-agent). * **Record your screen** remains the separate path for capturing a browser workflow. * Use the source choices and Advanced options shown in your current workspace. ### New Help Docs for core editing tasks [#new-help-docs-for-core-editing-tasks] The Help Docs now include focused task pages for: * [Managing steps](/edit/manage-steps). * [Layouts, backgrounds, and core visual settings](/edit/layouts-and-backgrounds). * [Navigation, zoom, motion, autoplay, and cursor behavior](/edit/tour-playback-settings). * [Hotspots, areas, and callouts](/interactivity/hotspots-areas-callouts). These pages explain controls that are already available in the editor.