Como criar um guia interativo do produto no WordPress sem programador
Uma ajuda que mostra em vez de explicar no WordPress: um checklist de temas práticos, cada um abre a página certa e guia o usuário com tooltips.
- Tempo
- ● 30 minutos
- Preço
- Teste grátis de 14 dias, sem cartão
- Quem faz
- Administrador do WordPress
Exemplo: um guia interativo no WordPress
Uma agência entrega sites WordPress a clientes que esquecem como publicar. Na página /docs um guia lista temas; “Publicar um post” abre /wp-admin/post-new.php?tutorial=publish-post com um tour do editor.
Este formato faz parte do plano Pro. Toda conta nova começa com 14 dias de teste grátis com todos os formatos e regras de público, sem cartão. Quando o teste acaba, nada é apagado e o que foi publicado continua aparecendo; tours e tooltips seguem grátis no plano Free.
Como criar o guia interativo 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
Crie os tours e depois o checklist do guia
Primeiro crie um tour Tooltips passo a passo por tema com Editar no seu site e Escolher elemento e anote o Slug (usado nos links) de cada um. Depois crie um Checklist de onboarding: um item por tema e, em URL do link, o endereço da página mais
?tutorial=e o slug do tour.
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 Checklist Formato Checklist de onboarding Onde mostrar (URL da página) Seção por prefixo /docsQuando mostrar Assim que a página carregar Segmentação de público Sem regras: todo mundo que abre a página Frequência A cada visita Tour do produto Formato Tooltips passo a passo Onde mostrar (URL da página) Seção por prefixo /wp-admin/post-new.phpQuando 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: guia interativo do produto no WordPress
“Atrasar JavaScript” esconde o guia interativo 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.
Não perca os parâmetros da URL
Alguns sites redirecionam e descartam parâmetros (por exemplo, ao forçar a barra final). Abra cada link de tema uma vez: se ?tutorial= sumir da barra de endereço, use a URL final no link.
O botão de ajuda precisa de um seletor estável
Ao clicar num elemento escuta cliques no seletor que você informa. Use um id ou atributo data-tour no botão de ajuda, não uma classe que uma mudança de estilo pode renomear.
Perguntas e respostas
O tour funciona dentro do wp-admin?
Só se a linha também carregar na área administrativa: adicione com um snippet para o admin no WPCode.
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).
Quanto custa?
Tours são grátis; o checklist do guia faz parte do Pro. Toda conta nova ganha 14 dias de teste com os dois, sem cartão.
O mesmo tour pode aparecer sozinho para usuários novos?
Sim. Um tour aberto com ?tutorial= ignora as regras dele, então esse mesmo tour pode ter a própria regra de URL e Uma vez por visitante para quem chega pela primeira vez.
O que mais dá para adicionar no WordPress
- Como colocar um pop-up em um site WordPress sem programador
- Como criar um tour do produto no WordPress sem programador
- Como adicionar um tooltip em um site WordPress sem programador