---
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/shop/organizar-seu-conteudo-r121/configurar-a-extensao-de-passo-a-passo-do-app-a505/"
lang: pt
---

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

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

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/1878443/art/default/77829060-56534754.jpg?v=1782305855.8288639)

**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
- Adicionar uma [animação LottieFiles](https://pt.goodbarber.com/help/shop/organizar-seu-conteudo-r121/adicionar-lottiefiles-ao-passo-a-passo-do-seu-app-a514/)

**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 = Onboarding**
O passo a passo é um padrão de integração. 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/shop/configurar-os-ajustes-do-pwa-r139/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.