Introdução
A plataforma Eloss permite a integração direta com páginas construídas em WordPress, por meio da inserção de scripts de rastreamento e identificação de afiliados. Essa integração é altamente recomendada para empresas que utilizam estratégias de vendas em rede e desejam personalizar suas páginas de conversão. A seguir, explicamos como implementar a integração de acordo com os três principais objetivos:
Como exibir dados pessoais do afiliado em uma landing page do WordPress
Para que essa personalização funcione corretamente, é necessário configurar a LP com os campos específicos e aplicar a classe de leitura de dados usada pela Eloss. Neste guia, você aprenderá como preparar visualmente a página para exibir essas informações de forma dinâmica e automática, respeitando a estrutura da plataforma.
A seguir, mostramos o passo a passo para realizar essa configuração.
Passo 1: Acessar o painel do wordpress
Antes de iniciar o processo de integração, acesse o painel administrativo do seu site WordPress. Para isso:
No navegador, digite o link do seu painel, normalmente em
seudominio.com/wp-admin;Informe seu usuário e senha para entrar no ambiente de administração.
Passo 2: Instalar o plugin wpcode lite
O plugin WPCode (anteriormente conhecido como Insert Headers and Footers) permite adicionar scripts personalizados no WordPress de forma segura e simples, sem a necessidade de editar os arquivos do tema diretamente. Isso é especialmente importante porque:
Evita erros técnicos ao manipular códigos diretamente no código-fonte do tema;
Mantém os scripts ativos mesmo após atualizações no tema ou plugins do site;
Centraliza o gerenciamento de scripts como códigos de rastreamento, redirecionamento e monitoramento;
Facilita o controle para usuários leigos, permitindo ativar e desativar scripts quando necessário.
Como instalar o WPCode Lite:
Passo 1: Acesse o painel administrativo do seu site WordPress. Para isso:
No navegador, digite o link do seu painel, normalmente em
seudominio.com/wp-admin;Informe seu usuário e senha para entrar no ambiente de administração.
No painel administrativo do WordPress, vá em Plugins > Adicionar novo.
- Usando o campo de pesquisa, procure por WPCode Lite
4. Agora pressione o botão Instalar próximo ao plugin que deseja instalar.
5. Agora o plugin já deve estar disponível no menu lateral da area administrativa do seu WordPress
Passo 3: Aplique o código de script no rodapé (footer) do site:
Para executar este passso, basta:
No painel administrativo do WordPress, clique em WPCode (ou Code Snippets).
Em seguida, clique na opção Header & Footer.
3. Localize o campo de adição de script do footer
4. Cole o código
<script src=”https://cadastro.seudominio.com.br/assets/authfast-data.js”></script>
⚠️ Atenção
Não se esqueça de substituir o trecho seudominio.com.br pelo domínio correto da sua operação no script de redirecionamento para o WhatsApp. Usar o domínio errado pode impedir que o rastreamento funcione corretamente e que os redirecionamentos sejam realizados com sucesso.
Exemplo correto:
Se sua empresa fictícia se chama Água Viva Saúde, o script deve ficar assim:
5. Após a aplicação, basta clicar em “Save Changes” para aplicar o script no seu site.
Passo 4: Personalização da Landing Page
Para que os dados do afiliado (como nome e foto) e o redirecionamento para o WhatsApp funcionem corretamente na LP, siga as orientações abaixo:
1. Como aplicar um texto com nome do afiliado
Para exibir o nome do afiliado, crie um campo de texto e insira o conteúdo com a variável {{nome}}:
Exemplo:
Olá, meu nome é {{nome}}, e serei seu consultor Plataforma Eloss.
Depois, aplique a classe CSS authfast-data neste campo.
Para aplicar a classe CSS no WordPress:
Clique no bloco de texto
Vá em Avançado no menu lateral direito
No campo Classes CSS, digite:
authfast-data
⚠️ atenção:
As instruções acima foram elaboradas com base na aplicação do editor Elementor. Se você estiver utilizando outro construtor de páginas (como Gutenberg, Divi, WPBakery, etc.), a interface pode ser diferente, mas o princípio é o mesmo: basta localizar a opção de Classes CSS do elemento e aplicar corretamente a variável ou o código HTML correspondente.
2. Como aplicar o botão do whatsapp com rastreamento
Primeiro, adicione um elemento de botão na sua landing page usando o editor de sua preferência (como Elementor ou outro construtor WordPress). Esse botão será utilizado para direcionar o visitante diretamente ao WhatsApp do afiliado responsável pela indicação.
Depois de inserir o botão, você irá configurá-lo com um link especial que inclui a variável dinâmica de WhatsApp e uma mensagem personalizada.
O link deve seguir o seguinte modelo:
Você pode alterar a mensagem do botão, substituindo o texto após ?text= pela frase que preferir, sempre trocando os espaços por %20.
Exemplo personalizado:
Após configurar o link, vá até as configurações do botão, acesse a aba Avançado, localize o campo Classes CSS e insira: authfast-data.
Essa classe é essencial para que o sistema substitua automaticamente a variável [[whatsapp]] pelo número do afiliado correto.
3. Como adicionar a imagem do afiliado
Para exibir automaticamente a foto do afiliado responsável pelo link da landing page, você deve utilizar um bloco de HTML personalizado, já que esse tipo de campo permite inserir o código necessário para que o sistema funcione corretamente.
Passo a passo:
Na sua landing page, adicione um novo bloco de HTML (geralmente chamado de “HTML personalizado” ou “HTML” no editor visual).
2. Dentro desse bloco, cole o seguinte código:
3. Esse código faz com que o sistema Eloss substitua automaticamente a variável {{photo}} pela foto do afiliado que estiver vinculado ao link de acesso da LP.
4. O estilo aplicado (style="...") garante que a imagem se ajuste corretamente ao layout da página, mas você pode personalizar visualmente de acordo com as diretrizes do seu site no WordPress.
⚠️ Importante:
Após configurar o link, vá até as configurações do botão, acesse a aba Avançado, localize o campo Classes CSS e insira: authfast-data.
4. Finalizando a personalização da página
Com todos os elementos de dados dinâmicos configurados corretamente (nome, WhatsApp e foto do afiliado), a estrutura funcional da sua landing page está pronta.
A partir deste ponto, você pode personalizar visualmente a página como desejar: alterar cores, fontes, tamanhos, disposição dos blocos, adicionar efeitos visuais, entre outras opções disponíveis no seu editor WordPress.
⚠️ Atenção:
Durante a customização, é fundamental que você não altere:\n>
As classes CSS
authfast-dataaplicadas nos elementos;\n>O formato das variáveis dinâmicas (
{{photo}},[[whatsapp]],{{nome}}, etc.);\n>O link estruturado para WhatsApp.
Essas configurações são responsáveis pelo funcionamento automático do preenchimento dos dados do afiliado na página. Modificá-las pode impedir que o sistema Eloss reconheça e substitua corretamente as informações.
Passo 5: Como disponibilizar a Landing Page para uso dos afiliados
Depois que a landing page estiver configurada e publicada, é hora de disponibilizá-la no Escritório Virtual para que os afiliados possam acessá-la com rastreamento automático.
Etapa 1: Acesse a area administrativa do seu Escritório Virtual:
No painel administrativo da plataforma Eloss, clique em Escritório > Designer.
2. Na tela “Layout do Dashboard”, localize a linha onde deseja incluir a landing page e clique no ícone amarelo com seta para editar os componentes da coluna.
ℹ️ Observação: Neste exemplo, o layout do Escritório Virtual já possui componentes criados. Caso sua estrutura esteja vazia ou você deseje criar uma nova linha ou coluna, recomendamos consultar a matéria “Customização do layout do Escritório Virtual” disponível em nosso manual. Lá você encontrará instruções detalhadas para organizar e estruturar o dashboard da forma mais adequada para o seu projeto.
Etapa 2: Selecione a linha de layout do escritório a qual deseja adicionar o elemento
Na área de Componentes, clique no botão + Adicionar (azul).
Logo após o clique em “+ Adicionar”, será aberta a janela de cadastro do novo componente.
No campo Componente, selecione obrigatoriamente a opção Produtos.
Preencha os demais campos:
Coluna: Defina a largura do componente selecionando a quantidade de colunas que ele irá ocupar na linha.
Descrição: Nome que será exibido para o afiliado (ex: “Página de vendas personalizada”).
Preencha:
Compensação: Selecione se este componente será visível para todos “Visão geral” (ou se será aplicado alguma regra de visualização).
Qualificações/Variações: Pode ser deixado em branco, a menos que haja deseje aplicar alguma regra de qualificação para exibição deste card. Neste caso você deverá colar aqui o código da qualificação a qual deseja aplicar a visualização.
Após a seleção do componente “produtos” um novo campo de configurações será exibido abaixo. Continue com o preenchimento conforme as orientações abaixo.
Etapa 3: Realizar as configurações visuais do componente
Nesta nova seção chamada Configurações do componente será exibida automaticamente.
Escreva um título para o card (ex: “Conheça nosso produto”).
Qtd de itens do slide: Especifique a quantidade de cards que deseja aplicar dentro do elemento.
Efeito dos links: Escolha o objetivo do link. Neste caso devemos escolher a opção “links para compartilhar”. Conforme a imagem abaixo:
4. Cores: Personalize as cores do título, fundo, links e preços do componente, conforme a identidade visual da sua marca.
5. Aplicar ID de afiliado ao link?: Selecione “Sim” para que o link da landing page funcione com rastreamento automático.
Etapa 4: Aplicar o card da landing page no elemento
Na seção Lista de produtos, você irá configurar o card que aparecerá para o afiliado:
Foto padrão: Adicione uma imagem de destaque da LP (ex: uma miniatura do site ou imagem de divulgação).
Nome do produto: Título que aparecerá no card (ex: “Landing Page de Apresentação”).
URL: Cole aqui o link completo da landing page criada no WordPress.
Texto URL: Frase do botão (ex: “clique aqui para copiar”).
Preço DE / POR / Riscado: Neste campo você pode aplicar um texto que ajude a comunicar o objetivo do card. (ex: “Promova sua página!”).
Clique em + Adicionar para salvar o card na lista.
Para adicionar mais cards basta repetir os processos dessa ultima etapa, veja o exemplo abaixo de aplicação:
⚠️ Atenção: Após adicionar o card na lista de produtos, não se esqueça de clicar em “Salvar” ao final da tela para garantir que todas as configurações sejam aplicadas corretamente e o componente seja exibido no painel do afiliado.
Assim que o card for adicionado, ele aparecerá no dashboard dos afiliados, prontos para acesso com rastreamento automático via link.
Veja abaixo o resultado da aplicação:
Passo 6: Como testar e validar a funcionalidade
Antes de liberar o uso da landing page para os afiliados, é essencial realizar um teste prático para garantir que todas as funcionalidades estejam corretas: a exibição dos dados do afiliado e o redirecionamento para o WhatsApp.
A seguir, veja como realizar esse teste passo a passo:
Etapa 1: Acessar a dashboard de um usuário da rede
Para realizar testes ou simular a experiência de um afiliado, é possível acessar o Escritório Virtual de um usuário da rede de duas formas:
Opção 1: acesso direto com login e senha
Essa é a forma mais comum. Basta utilizar as credenciais (e-mail e senha) do próprio afiliado para entrar na plataforma. Você pode criar um cadastro de teste apenas para esse fim.
URL padrão de acesso:
Substitua suaempresa.com.br pelo domínio da sua operação.
Opção 2: acesso via área administrativa (modo administrador)
Caso você tenha perfil de administrador, é possível acessar a conta de qualquer usuário diretamente pela área administrativa do Escritório Virtual, sem precisar da senha dele.
Para isso:
Acesse o menu superior Escritório.
Clique em Usuários.
3. Localize o usuário desejado na lista. Recomenda-se que faça o teste com algum usuário especifico para este fim.
4. Clique no ícone de cadeado amarelo na coluna “Opções” ao lado do nome do usuário.
Isso permitirá que você entre na conta desse usuário como se estivesse logado com ele, ideal para testes, simulações ou suporte técnico.
Após acessar a dashboar do usuário:
Etapa 2: Abra o menu “minha conta”
No menu lateral esquerdo, clique em Minha Conta para acessar os dados do afiliado logado.
Etapa 3: Preencher os dados públicos
Dentro da área “Minha Conta”, procure a seção chamada Dados Públicos.
Preencha todos os campos solicitados:
Nome completo
Telefone (WhatsApp) no formato com DDD e código do país (ex: 5511999999999)
Foto de perfil (se houver campo para upload ou link de imagem)
⚠️ Atenção: Essas informações são essenciais. Se não estiverem preenchidas, os dados personalizados não aparecerão e o botão de WhatsApp não funcionará corretamente.
Etapa: 4: Localizar e copiar o link da landing page
Retorne para a Dashboard (página inicial) do Escritório Virtual. Localize o componente visual da landing page (com botão de ação). Clique em copiar link.
Esse link contém o identificador do afiliado e é o que será compartilhado com os contatos externos.
Etapa 5: Abrir o link em aba anônima ou outro navegador
Abra uma aba anônima (Ctrl + Shift + N) ou use outro navegador. Cole o link copiado e acesse a página.
⚠️ Atenção: Verifique se a URL encontra-se apresentando ao final o vinculo de afiliação, conforme na imagem abaixo:
Etapa 6: Verificar a exibição dos dados na Landing Page
🔍 Localize a sessão configurada na LP:
Ao acessar a landing page, procure a seção onde foram aplicadas as variáveis de personalização. Essa área deve refletir exatamente os dados preenchidos nos “Dados Públicos” do afiliado.
Contendo:
Nome
Foto
E botão com redirecionamento para o Whatsapp do afiliado.
Veja abaixo o resultado de uma configuração bem-sucedida:
⚠️ Atenção: Não se esqueça de testar o botão do WhatsApp para garantir que o redirecionamento está funcionando corretamente.
Pronto!
Agora é só compartilhar a novidade com a sua rede!
Se os dados forem exibidos corretamente e o redirecionamento funcionar, sua landing page está pronta para ser compartilhada pelos afiliados.
✅ Parabéns! Agora sua LP está integrada, funcional e personalizada para cada membro da sua rede.
Se algo não funcionar como esperado, nossa equipe está pronta para ajudar. Entre em contato com o suporte Eloss pelos canais oficiais.
Observações finais
A LP pode ser utilizada por vários afiliados apenas compartilhando o link com o parâmetro correto.
Essa integração funciona em qualquer tema WordPress.
Para dúvidas, consulte o suporte da Eloss.