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 (a seta ao lado escolhe começar deste passo ou do início) ou Shift+P para o Preview automático e veja 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.

Incorporar o tour no seu site

Com o GuiaFlow Pro, o link permanente vira um tour dentro da sua página: ajusta à largura da tela, não fecha com um clique sem querer e espera o visitante clicar em ▶ para começar.

No editor, abra Compartilhar → Incorporar no site, escolha a aba e clique em Copiar código. Se ainda não houver link permanente, o diálogo oferece Publicar link permanente.

HTML puro

Cole o código no ponto da página onde o tour deve aparecer. Ele ocupa a largura disponível (até 1200 px) e mantém a proporção das capturas.

WordPress

  1. No editor de blocos, clique em + e escolha HTML personalizado.
  2. Cole o código da aba WordPress e publique a página.
  3. Se o tour não aparecer, algum plugin de segurança ou de AMP pode estar removendo iframes. Libere o domínio guiaflow.pro nesse plugin.

Webflow

  1. No Designer, abra Add (+) e arraste o elemento Code Embed para a página.
  2. Cole o código da aba Webflow, salve e publique o site. O tour só aparece no site publicado, não no Designer.

Republicar o tour atualiza todos os sites onde ele está incorporado. A opção Começar automaticamente pula o botão ▶; o navegador pode segurar o som até o visitante interagir. Se o seu site usar sandbox no iframe, inclua allow-scripts e allow-same-origin, senão o tour não roda.

Privacidade