Encontrando e Verificando Seletores CSS
"Um guia prático para identificar botões e formulários no seu site, sem precisar ser um programador."
Para que o Intentyon rastreie ações específicas — como um clique no botão do WhatsApp ou a visualização da sua tabela de preços — ele precisa saber exatamente onde olhar.
O Seletor CSS é simplesmente o "endereço" desse elemento no código do seu site. Se você entregar o endereço certo, o Intentyon nunca errará a entrega.
1. O Padrão Ouro: Usar um ID
A maneira mais segura e infalível de rastrear um elemento é dar um nome único (ID) para ele. A maioria dos construtores de sites permite isso facilmente.
Como fazer no seu construtor:
- Elementor (WordPress): Clique no botão/seção > Aba Avançado > Campo ID CSS. Digite algo como
botao-compra. - Shopify/Webflow/Yampi: Procure nas configurações do elemento por um campo chamado "ID" ou "Atributos".
- HTML Puro: Adicione
id="botao-compra"na tag do elemento.
Como usar no Intentyon:
No campo de configuração da regra, basta digitar o ID com uma cerquilha na frente:
#botao-compra
Por que usar ID? Um ID é como um CPF: só deve existir um por página. Isso garante que o Intentyon nunca confunda seu botão de compra com outro botão qualquer.
2. Como Encontrar o Seletor (Sem criar ID)
Se você não consegue editar o site ou adicionar um ID, pode descobrir o endereço que o elemento já possui.
- Abra seu site no navegador (Chrome, Edge, etc).
- Clique com o botão direito exatamente em cima do elemento que quer rastrear (ex: o botão).
- Selecione Inspecionar (ou Inspect). Um painel com código abrirá.
- O código do elemento já estará destacado em azul. Clique com o botão direito nessa linha de código.
- Vá em Copiar > Copiar seletor (Copy selector).
Volte ao Intentyon e cole (Ctrl+V) no campo. Geralmente se parecerá com algo assim:
#main-content > div > button.btn-primary
3. Como o Intentyon Verifica seu Seletor
Sabemos que lidar com códigos pode ser inseguro. Por isso, criamos um sistema de Verificação de Duas Etapas dentro do criador de eventos.
Sempre que você insere um seletor e uma URL, o botão "Verificar" fica disponível.
Passo 1: O "Robô Verificador" (Automático)
Ao clicar em verificar, nosso sistema envia um navegador virtual para o seu site. Ele escaneia o código em busca do endereço que você forneceu.
- Sucesso: Se ele encontrar, o status muda para "Verificado" instantaneamente.
- Falha: Se o site for muito complexo ou protegido, ele pode não encontrar. Não se preocupe, isso é normal. O sistema ativará o Passo 2.
Passo 2: A Verificação Humana (Manual)
Se o robô falhar ou a página onde o seletor está presente é protegida por login, você verá uma mensagem: "Aguardando sua interação...".
- Abra a página do seu site em uma nova aba.
- Interaja com o elemento: Clique no botão, passe o mouse na seção ou digite no formulário.
- O script do Intentyon instalado no seu site detectará essa ação e enviará um sinal: "Ei, encontrei o elemento!".
- O painel no Intentyon confirmará a verificação automaticamente.
Atenção ao Cache: Se você acabou de adicionar um ID no seu site e o Intentyon não o encontra, limpe o cache do seu site/plugin. O Intentyon não consegue ver alterações que ainda não foram publicadas ou atualizadas.
Dicas para Seletores Complexos
O Intentyon.js é inteligente. Ele tenta encontrar o elemento de várias formas.
- Classes: Se o botão tem uma classe única (ex:
class="btn-whatsapp"), você pode usar apenas.btn-whatsapp(com ponto na frente). - Flexibilidade: Se você usar o seletor
#form-contato, nosso script procurará por um elemento comid="form-contato"OUclass="form-contato".
Se estiver em dúvida, prefira sempre a opção 1 (Criar um ID) ou use a Verificação Manual para ter 100% de certeza que está rastreando o item correto.