---
title: "Configurar a extensão de Passo a Passo do App"
description: "Crie um tutorial integrado e oriente seus usuários durante a primeira inicialização do seu app. O passo a passo está disponível apenas em dispositivos móveis (n"
canonical_url: "https://pt.goodbarber.com/help/organizar-seu-conteudo-r93/configurar-a-extensao-de-passo-a-passo-do-app-a418/"
lang: pt
---

# Configurar a extensão de Passo a Passo do App

Source: https://pt.goodbarber.com/help/organizar-seu-conteudo-r93/configurar-a-extensao-de-passo-a-passo-do-app-a418/

Crie um tutorial integrado e oriente seus usuários durante a primeira inicialização do seu app. O passo a passo está disponível apenas em dispositivos móveis (não está disponível no iPad)

Crie um tutorial integrado e oriente seus usuários durante a primeira inicialização do seu app.
O passo a passo está disponível apenas em dispositivos móveis.

## 1. Instale a extensão Passo a Passo do App

1. Vá para o menu **Loja de extensões > Todas as extensões > Extensão Passo a Passo do App**
2. Clique em "**Instalar**"*

**Dependendo da sua oferta GoodBarber, pode ser uma extensão paga.
O preço é exibido na página de extensão.*

## 2. Configuração do backoffice

Depois de instalada a extensão, acesse suas configurações no menu **Meu app > Passo a passo**

**1. Selecione o modelo:**
**Imersivo:** a imagem é exibida em tela inteira
**Polaroid:**a imagem é exibida acima do título da etapa

![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/77828994-56534659.jpg?v=1782293341.1966953)

**2. Adicione até 5 etapas:**
- Clique em "**Adicionar um passo**"
- Selecione sua imagem (tamanho recomendado: Imersivo:1536*2048 / Polaroid: 1200*1200) e adicione um título e uma descrição
ou
- Adicione uma animação [LottieFiles](https://pt.goodbarber.com/help/organizar-seu-conteudo-r93/adicionar-lottiefiles-ao-passo-a-passo-do-seu-app-a427/)

**3. Configurações gerais:**
Defina os elementos das telas passo a passo do seu app
- Botão Pular
- Título da página (comum a todas as etapas)
- Efeitos na imagem
- Fontes e cores dos textos
- Cor do pager
- Cores do botão Próximo / Começar

## 3. Comportamento geral

**1. Navegação entre etapas**
Clicar no botão "Avançar" faz com que os usuários naveguem para a próxima tela. Os usuários também podem navegar entre as telas rolando horizontalmente.

**2. Nome dos botões**
Em todas as etapas, o título do botão é “Avançar”, exceto na última que é “Começar”.
Se houver apenas uma tela, o título do botão será “Começar”

**3. Pager**
O pager é atualizado sempre que os usuários avançam para outra etapa. Se houver apenas uma etapa, o pager não será exibido.

**4. Passo a passo = integração**
O passo a passo é um padrão de onboarding. Ele é exibido apenas na primeira vez que um usuário abre o app após instalá-lo.
No PWA, o passo a passo é exibido apenas na versão do navegador (não na [versão instalada no aparelho](https://pt.goodbarber.com/help/personalizar-as-configuracoes-do-pwa-r123/adicionar-o-icone-do-seu-pwa-a-tela-inicial-a320/) )

**5. Popups e notificações**
Os popups de consentimento (cookies ou Funding Choices) são exibidos antes do passo a passo.
Outras notificações (sms, permissão de push, permissão de localização, popup de instalação) são exibidas após o passo a passo.

**6. Extensão de autenticação**
Quando o app está completamente bloqueado através da extensão de autenticação , a prioridade é dada ao passo a passo.
O que significa que as etapas do passo a passo são exibidas antes da caixa de login.