Manual

Como gravar um demo

A extensão fotografa a tela do produto. O editor vira isso num tour com destaque, clique e narração.

App desktop

No app Electron, use o botão Capturar no editor. Abre uma janela com a página do produto: fotografe, marque o clique e crie o projeto. Só captura o que estiver nessa janela. No navegador continue com a extensão abaixo.

1. Instalar a extensão

A extensão GuiaFlow — Captura está na Chrome Web Store. Um clique instala e o Chrome atualiza sozinho.

Instalar na Chrome Web Store

  1. Abra a página da extensão e clique em Usar no Chrome.
  2. Confirme em Adicionar extensão.
  3. Fixe o ícone do GuiaFlow na barra do Chrome para achar a captura rápido.
Instalação manual (zip)

Baixar a extensão (zip)

  1. Descompacte o zip. A pasta precisa conter o arquivo manifest.json.
  2. Abra chrome://extensions.
  3. Ligue o Modo do desenvolvedor.
  4. Clique em Carregar sem compactação e escolha essa pasta.
  5. Quando sair uma versão nova, baixe de novo e clique em Recarregar no card da extensão.

2. Gravar as telas

Deixe o editor aberto neste endereço. Na extensão da loja, o campo Editor já aponta para o GuiaFlow publicado. Se o endereço abaixo for outro, cole-o nesse campo:

  1. Abra a página do produto que você quer mostrar.
  2. Clique no ícone da extensão e em Iniciar nesta aba.
  3. Na barra de captura, Capturar congela a tela atual.
  4. Clique no elemento que deve ser o destaque. Esse clique não tira outra foto.
  5. Siga o fluxo do produto e repita capturar + clique.
  6. Criar projeto abre o editor com um projeto novo, já com as imagens e os pontos de clique.

Desfazer tira o último passo. Baixar JSON guarda um arquivo se o editor não estiver aberto. Atalhos: Option+Shift+C captura, Option+Shift+E cria o projeto.

Prefira Capturar e só então clicar. Um clique direto na página também gera um passo, mas a foto pode sair da tela já mudada.

3. Montar o tour no editor

Na primeira visita, o GuiaFlow abre o projeto de exemplo em Preview automático. Esc sai para o editor.

  1. Ajuste o texto de cada passo no painel da direita.
  2. Arraste o retângulo para mudar o destaque e o ponto para mudar o clique simulado.
  3. Use Preview ou Preview automático para ver como o público vai ver; Esc volta à edição.
  4. Em Exportar, escolha HTML navegável ou vídeo.

Sem a extensão, dá para criar um projeto vazio e enviar prints com + Imagens.

Privacidade