Como configurar o Acionador por CSS no chat da Leadster

O Acionador por CSS é uma nova forma de personalizar quando o chat da Leadster será exibido no seu site, com base em elementos visuais da página — como botões, seções ou componentes específicos do layout.

Essa configuração é ideal para casos em que você deseja exibir o chat apenas quando um visitante interagir com determinado elemento, por exemplo: clicar em um botão “Fale com um especialista”, abrir um modal ou rolar até uma seção específica.

Como configurar o Acionador por CSS

1. Acesse o painel da Leadster e vá até o menu Gerenciar Fluxos.
2. Escolha o fluxo que deseja editar e clique no Step 2: “Personalize para seu público”
3. E role a tela até encontrar a seção “Acionadores do Chat" e escolha a opção "Clique em botão/elemento da página".

4. No campo de seletor, insira o elemento CSS que deve acionar o chat.
   • Exemplo: .botao-contato    ou #fale-conosco   
5. Defina se o acionamento ocorrerá ao clicar ou ao visualizar o elemento na tela.
6. Salve as alterações.

Para garantir que o seletor funcione corretamente:

• Verifique se o elemento está presente em todas as páginas onde o chat deve ser exibido.
• Use seletor único (ID ou classe exclusiva).
• Teste o acionador acessando o seu site e interagindo com o elemento definido.

Como configurar na LP da RD Station?

1. Identifique o seletor CSS do botão

1. No editor da RD, clique sobre o botão desejado.
2. No painel direito, verifique o ID ou Class do botão (exemplo: .rd-button   ou #rd-button-abc123  ).
3. Copie essa informação — ela será usada na configuração da Leadster.

2. Ajuste o comportamento do botão na RD

1. No campo Link Type, selecione Web address.

   Em Link Address, insira apenas o caractere #   (hashtag).

   • Isso impede o redirecionamento da página e permite que o clique acione o chat corretamente.

📸 Exemplo:

Button text: Agendar Demonstração  

3. Configure o acionador na Leadster

1. Acesse o painel da Leadster → Acionadores.
2. Crie um novo acionador do tipo “Clique em botão/elemento da página”.
3. Em Classe CSS, insira o seletor copiado da LP (exemplo: .rd-button  ).
4. Publique as alterações e teste clicando no botão da landing page.

💡 Dica

Se, ao clicar no botão, a página recarregar em vez de abrir o chat:

• Verifique se o campo Link Address está com #  ;
• Confira se o seletor CSS usado na Leadster corresponde exatamente ao da LP (inclusive ponto .   para classe e #   para ID).

Qualquer dúvida, entre em contato com a nossa equipe via suporte.

Abraços 👋