Como começar
Personalização
🎨 Como começar a editar uma demo
Basicamente, existem dois modos de acessar a tela de edição de demos: sendo redirecionado assim que finalizar uma gravação ou clicando sobre o primeiro ícone que aparece ao passar o mouse em cima de uma demo na biblioteca (desde que tenha acesso de editor). Lembrando que usuários visualizadores podem apenas ver e compartilhar as demos.
💬 Guiar a jornada do usuário
Assim que você finalizar uma demo e ser redirecionado para a edição, é possível notar que cada clique que realizou gerou um frame (observável pelas miniaturas numerdas na parte inferior da tela) e a plataforma adicionou automaticamente uma tooltip (balão) destacando cada elemento clicado.
As tooltips servem como indicador de passagem de frames, portanto, é obrigatório ter uma por frame (com exeção aos cartões de abertura de demo e de frame - que já tem os botões como indicadores de passagem - e o último, uma vez que não há mais passos a serem seguidos). É possível realocar uma tooltip de lugar, bastando excluir a antiga para inserir uma nova pelo caixa de ferramentas (botão com um “+” na lateral direita). Caso já exista uma tooltip no frame, a plataforma irá duplica-lo automaticamente, mantendo a antiga na tela anterior.
Clicando sobre elas, é possível editá-las. Além de adicionar textos e ter todas as opções de personalização de cor, tamanho e orientação, é possível colar imagens e gifs com o CTRL + V diretamente na tooltip, copiando a imagem da web. A cor de fundo, borda, arredondamento, destaque do elemento clicado, botão de prosseguir e voltar também são personalizáveis.
💳 Adicione cartões
Além de falar de elementos específicos, podemos conversar com os nossos interlocutores através de cartões, que interrompem as demos para falar de um contexto geral. Todos eles são completamente editáveis e além de fotos, podemos adicionar vídeos incorporados (como do youtube e vimeo) e podem ser divididos em 3 tipos:
-
Cartão de abertura da demo: vem antes da demo começar e serve para dar uma contextualização incial do que a pessoa irá ver, explicar que é uma demo interativa e qual o objetivo dela.
-
Cartão de abertura do frame: pode ser adicionado antes de qualquer frame para explicar aquela tela.
-
Cartão de Call to Action: uma das maneira de finalização, permite que a criação de diversos botões com links de redirecionamento (próximos passos para a pessoa que finalizou a demo).
📄 Página incorporada no final
Além do cartão de CTA, é possível incorporar uma página ou site inteiro no final da sua demo, desde que ela permita isso. Para incorporar basta clicar na opção da caixa de ferramentas e inserir o link no local indicado. Para liberar para uma página ser incorpora em um domínio externo, é preciso configurar o seu Header set X-Frame-Options para "ALLOW-FROM https://app.getdemo.com.br", e o modo como isso é feito, vai depener do seu construtor de páginas.
🧊 Congelar menus flutuantes
Caso o seu sistema possua menus ou elementos que só aparecem ao passar o mouse em cima e tenha realizado a caura das telas por HTML, eles provavelmente ficarão escondidos até que o usuário final também passe o mouse sobre eles. Portanto, caso deseje fixar essa animação para que o menu ou elemento permaneça aberto e poder, por exemplo, adicionar uma tooltip sobre ele, basta usar a função de “Congelar estado” da caixa de ferramentas.
✏️ Edição dos elementos (exclusivo para o HTML)
Na captura por HTML, todos os elemento são completamente editáveis. Clicando duas vezes sobre eles, o menu de edição se abrirá com as seguintes opções:
-
Edição de texto: permite trocar o que está escrito (nomes, números...).
-
Cor do Texto: permite alterar a cor do que está escrito.
-
Cor do Fundo: altera o fundo do elemento.
-
Borrar: gera um blur na frente do elemento, impedindo a leitura.
-
Apagar: deleta o elemento por completo, muitas vezes ajustando o espaço onde estava de acordo com o código (reordenando os elementos da região).
Existem duas maneira de aplicar as alterações feitas: o “Aplicar” é para salvar as mudanças no frame selecionado, já o “Aplicar em todos os frames” usa uma inteligência para tentar identificar se aquele elemento repetiu em outros e mudar neles também.
🖼️ Adicionar imagens
Com a caixa de ferramenta, é possível selecionar a opção “Adicionar imagem” que permite o editor selecionar uma imagem do seu computador para substituir algum elemento da tela (como uma foto, gráfico, ícone ou qualquer outro). As imagens seguem o tamanho dos elementos, mas vale ressaltar a importância de terem dimensões parecidas para um bom ajuste.
🔙 Desfazer alterações e salvamento
Todas as edições que você fizer em uma demo ficarão salvas no seu navegador. Enquanto você não clicar no botão salvar, as alterações podem ser revertidas com o CTRV+Z ou pelo botão “Desfazer alterações”, uma vez que é só nesse momento que o seu trabalho será aplicado oficialmente e aparecerá para outras pessoas.