Manual

Cómo grabar un demo

La extensión fotografía la pantalla del producto. El editor lo convierte en un tour con destacado, clic y narración.

App de escritorio

En la app Electron, use el botón Capturar en el editor. Abre una ventana con la página del producto: fotografíe, marque el clic y cree el proyecto. Solo captura lo que esté en esa ventana. En el navegador continúe con la extensión de abajo.

1. Instalar la extensión

La extensión GuiaFlow — Captura está en Chrome Web Store. Un clic la instala y Chrome la actualiza solo.

Instalar en Chrome Web Store

  1. Abra la página de la extensión y haga clic en Añadir a Chrome.
  2. Confirme en Añadir extensión.
  3. Fije el icono de GuiaFlow en la barra de Chrome para encontrar la captura rápido.
Instalación manual (zip)

Descargar la extensión (zip)

  1. Descomprima el zip. La carpeta debe contener el archivo manifest.json.
  2. Abra chrome://extensions.
  3. Active el Modo de desarrollador.
  4. Haga clic en Cargar desempaquetada y elija esa carpeta.
  5. Cuando salga una versión nueva, descargue de nuevo y haga clic en Recargar en la tarjeta de la extensión.

2. Grabar las pantallas

Deje el editor abierto en esta dirección. En la extensión de la tienda, el campo Editor ya apunta al GuiaFlow publicado. Si la dirección de abajo es otra, péguela en ese campo:

  1. Abra la página del producto que quiere mostrar.
  2. Haga clic en el icono de la extensión y en Iniciar en esta pestaña.
  3. En la barra de captura, Capturar congela la pantalla actual.
  4. Haga clic en el elemento que debe ser el destacado. Ese clic no toma otra foto.
  5. Siga el flujo del producto y repita capturar + clic.
  6. Crear proyecto abre el editor con un proyecto nuevo, ya con las imágenes y los puntos de clic.

Deshacer quita el último paso. Descargar JSON guarda un archivo si el editor no está abierto. Atajos: Option+Shift+C captura, Option+Shift+E crea el proyecto.

Prefiera Capturar y solo entonces hacer clic. Un clic directo en la página también genera un paso, pero la foto puede salir de la pantalla ya cambiada.

3. Armar el tour en el editor

En la primera visita, GuiaFlow abre el proyecto de ejemplo en Vista previa automática. Esc vuelve al editor.

  1. Ajuste el texto de cada paso en el panel derecho.
  2. Arrastre el rectángulo para cambiar el destacado y el punto para cambiar el clic simulado.
  3. Use Vista previa (la flecha al lado elige empezar desde este paso o desde el inicio) o Shift+P para la vista previa automática y vea cómo lo verá el público; Esc vuelve a la edición.
  4. En Exportar, elija HTML navegable o vídeo.

Sin la extensión, se puede crear un proyecto vacío y subir capturas con + Imágenes.

Insertar el tour en tu sitio

Con GuiaFlow Pro, el enlace permanente se convierte en un tour dentro de tu página: se ajusta al ancho de la pantalla, no se cierra con un clic accidental y espera a que el visitante pulse ▶ para empezar.

En el editor, abre Compartir → Insertar en el sitio, elige la pestaña y haz clic en Copiar código. Si aún no hay enlace permanente, el diálogo ofrece Publicar enlace permanente.

HTML

Pega el código en el punto de la página donde debe aparecer el tour. Ocupa el ancho disponible (hasta 1200 px) y mantiene la proporción de las capturas.

WordPress

  1. En el editor de bloques, haz clic en + y elige HTML personalizado.
  2. Pega el código de la pestaña WordPress y publica la página.
  3. Si el tour no aparece, algún plugin de seguridad o de AMP puede estar quitando los iframes. Permite el dominio guiaflow.pro en ese plugin.

Webflow

  1. En el Designer, abre Add (+) y arrastra el elemento Code Embed a la página.
  2. Pega el código de la pestaña Webflow, guarda y publica el sitio. El tour solo aparece en el sitio publicado, no en el Designer.

Volver a publicar el tour lo actualiza en todos los sitios donde está insertado. La opción Empezar automáticamente salta el botón ▶; el navegador puede retener el sonido hasta que el visitante interactúe. Si tu sitio usa sandbox en el iframe, incluye allow-scripts y allow-same-origin; si no, el tour no funciona.

Privacidad