Manual

How to record a demo

The extension photographs the product screen. The editor turns that into a tour with highlight, click, and narration.

Desktop app

In the Electron app, use the Capture button in the editor. It opens a window with the product page: photograph, mark the click, and create the project. It only captures what is in that window. In the browser, continue with the extension below.

1. Install the extension

The GuiaFlow — Capture extension is on the Chrome Web Store. One click installs it, and Chrome updates it on its own.

Install from the Chrome Web Store

  1. Open the extension page and click Add to Chrome.
  2. Confirm with Add extension.
  3. Pin the GuiaFlow icon on the Chrome toolbar so capture is easy to find.
Manual install (zip)

Download the extension (zip)

  1. Unzip the archive. The folder must contain manifest.json.
  2. Open chrome://extensions.
  3. Turn on Developer mode.
  4. Click Load unpacked and choose that folder.
  5. When a new version ships, download again and click Reload on the extension card.

2. Record the screens

Keep the editor open at this address. In the store extension, the Editor field already points at the published GuiaFlow. If the address below is different, paste it into that field:

  1. Open the product page you want to show.
  2. Click the extension icon and Start on this tab.
  3. In the capture bar, Capture freezes the current screen.
  4. Click the element that should be highlighted. That click does not take another photo.
  5. Follow the product flow and repeat capture + click.
  6. Create project opens the editor with a new project, already with images and click points.

Undo removes the last step. Download JSON saves a file if the editor is not open. Shortcuts: Option+Shift+C captures, Option+Shift+E creates the project.

Prefer Capture and only then click. A direct click on the page also creates a step, but the photo may show the screen after it already changed.

3. Build the tour in the editor

On the first visit, GuiaFlow opens the sample project in Auto preview. Esc returns to the editor.

  1. Adjust each step’s text in the right panel.
  2. Drag the rectangle to move the highlight and the point to move the simulated click.
  3. Use Preview (the arrow next to it starts from this step or from the beginning) or Shift+P for Auto preview to see what the audience will see; Esc returns to editing.
  4. In Export, choose browsable HTML or video.

Without the extension, you can create an empty project and upload screenshots with + Images.

Embed the tour on your site

With GuiaFlow Pro, the permanent link becomes a tour inside your page: it fits the screen width, doesn't close on an accidental click and waits for the visitor to press ▶ to start.

In the editor, open Share → Embed on your site, pick a tab and click Copy code. If there's no permanent link yet, the dialog offers Publish permanent link.

Plain HTML

Paste the code where the tour should appear on the page. It takes the available width (up to 1200 px) and keeps the screenshots' aspect ratio.

WordPress

  1. In the block editor, click + and choose Custom HTML.
  2. Paste the code from the WordPress tab and publish the page.
  3. If the tour doesn't show, a security or AMP plugin may be stripping iframes. Allow the guiaflow.pro domain in that plugin.

Webflow

  1. In the Designer, open Add (+) and drag the Code Embed element onto the page.
  2. Paste the code from the Webflow tab, save and publish the site. The tour only shows on the published site, not in the Designer.

Republishing the tour updates every site where it's embedded. Start automatically skips the ▶ button; the browser may hold the sound until the visitor interacts. If your site uses sandbox on the iframe, include allow-scripts and allow-same-origin, or the tour won't run.

Privacy