Como criar um tour do produto no WordPress sem programador
Um walkthrough guiado no WordPress em uns vinte minutos: instale uma linha, percorra a sua própria interface no editor visual e publique um tour que começa exatamente onde os usuários novos precisam.
- Tempo
- ● 20 minutos
- Preço
- Plano Free
- Quem faz
- Administrador do WordPress
Exemplo: um tour do produto no WordPress
Um site de cursos online em WordPress com um plugin LMS vê alunos perdidos depois da matrícula. Em /courses um tour de 3 passos mostra a lista de aulas, o botão “Marcar como concluída” e onde aparece o certificado.
Grátis no plano Free do Clew, sem cartão e sem prazo: um site e até 3 tours ou tooltips publicados. Regras de público e testes A/B vêm com o Pro.
Como criar o tour do produto no WordPress, passo a passo
- Passo 01
Copie o seu snippet do Clew
Crie uma conta grátis (ou entre), adicione o seu site e abra Visão geral no admin. Clique na linha do cartão O widget ainda não deu sinal. para copiar: ela já vem com a chave real do seu site no lugar do marcador.
<!-- Clew: troque COLE_AQUI_SUA_CHAVE pela chave do site em Admin > Visão geral --> <script src="https://tryclew.io/widget/COLE_AQUI_SUA_CHAVE.js" async></script>
Passo 1 · ilustração esquemática - Passo 02
Instale um plugin de código no cabeçalho
Em Plugins → Add New instale e ative o plugin gratuito WPCode (ou use a opção de “scripts no cabeçalho” do seu tema). Não edite o
header.php: as atualizações do tema sobrescrevem.
Passo 2 · ilustração esquemática - Passo 03
Cole a linha no campo Header
Abra Code Snippets → Header & Footer, cole a linha do Clew em Header e clique em Save Changes.
Passo 3 · ilustração esquemática - Passo 04
Limpe o cache
Se você usa WP Rocket, LiteSpeed Cache, W3 Total Cache ou uma CDN, limpe o cache. Nas opções de “atrasar JavaScript”, exclua
tryclew.io/widget.
Passo 4 · ilustração esquemática - Passo 05
Monte o tour por cima da sua página
No Clew abra Fluxos → + Novo fluxo, deixe Formato em Tooltips passo a passo e clique em Editar no seu site. Na sua página clique em Escolher elemento, clique no elemento do passo 1 e escreva um título e uma ou duas frases. Repita para 3–5 passos; a prévia se atualiza enquanto você digita.
Passo 5 · ilustração esquemática - Passo 06
Escolha onde, quando e para quem aparece
No mesmo editor, preencha Onde mostrar (URL da página), Quando mostrar, Segmentação de público e Frequência. Estas são as configurações do exemplo acima:
Configuração Valor Formato Tooltips passo a passo Onde mostrar (URL da página) Seção por prefixo /coursesQuando mostrar Assim que a página carregar Segmentação de público Sem regras: todo mundo que abre a página Frequência Uma vez por visitante 
Passo 6 · ilustração esquemática - Passo 07
Publique e confira no site real
Mude Status para Publicado e salve. Abra a página numa janela anônima: o Clew lembra quem já viu um item de “uma vez”, então o seu navegador de sempre pode pular. Visualizações, conclusões e abandonos aparecem nas estatísticas.
Passo 7 · ilustração esquemática
Armadilhas: tour do produto no WordPress
“Atrasar JavaScript” esconde o tour do produto até a interação
WP Rocket, LiteSpeed e Perfmatters podem adiar scripts até a primeira rolagem ou clique. O widget começa tarde e um item Assim que a página carregar parece quebrado. Adicione tryclew.io/widget às exclusões.
Páginas com login costumam ser diferentes
Áreas de membros (/my-account do WooCommerce, páginas de curso de um LMS) mostram outra marcação do que a vista por visitantes anônimos. Monte os passos logado como um membro típico, não como administrador com barras extras.
Prenda os passos a elementos que todos veem
Banners, blocos personalizados e variantes de teste A/B não aparecem para todo mundo. Use navegação, títulos e botões principais; se um elemento faltar, o passo aparece em Saúde.
Perguntas e respostas
Funciona com LearnDash ou Tutor LMS?
Sim. O Clew não se integra ao plugin: aponta os elementos da página do curso no navegador.
Funciona no WordPress.com?
Plugins como o WPCode precisam do plano Business do WordPress.com ou superior. WordPress auto-hospedado funciona em qualquer hospedagem.
Aparece no wp-admin?
Plugins de cabeçalho normalmente só adicionam código ao site público. Para guias dentro do /wp-admin, adicione a linha com um snippet para a área administrativa (o WPCode permite escolher).
O tour do produto é grátis?
Sim: tours estão no plano Free, com até 3 publicados. Você só precisa do Pro para regras de público, testes A/B e mais tours.
Preciso saber seletores CSS?
Não. Editar no seu site abre o editor na sua página e Escolher elemento preenche o seletor quando você clica num elemento.
O que mais dá para adicionar no WordPress
- Como colocar um pop-up em um site WordPress sem programador
- Como adicionar um tooltip em um site WordPress sem programador
- Como criar um guia interativo do produto no WordPress sem programador
Tour do produto em outras plataformas
- Google Tag ManagerComo criar um tour do produto com o Google Tag Manager sem programador
- LovableComo criar um tour do produto num app do Lovable sem programador
- Bolt.newComo criar um tour do produto num app do Bolt.new sem programador
- v0Como criar um tour do produto num app do v0 sem programador
- ReplitComo criar um tour do produto num app do Replit sem programador
- CursorComo criar um tour do produto num app feito no Cursor sem programador
- Claude CodeComo criar um tour do produto com o Claude Code sem programador
- ChatGPT CodexComo criar um tour do produto com o ChatGPT Codex sem programador
- Qwen CodeComo criar um tour do produto com o Qwen Code sem programador