plataformaeloss.com.br

Blog

plataformaeloss.com.br

Blog

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Iniciar atendimento

Em que podemos ajudá-lo?

Pesquise aqui o assunto que está procurando!

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

O que você busca?

Filtre por assunto

O que você busca?

Filtre por assunto

Integração de landing page no WordPress para cadastro de novos usuários com vínculo de indicação

Introdução

A plataforma Eloss permite a integração direta com páginas de vendas desenvolvidas em WordPress, utilizando a inserção de scripts de rastreamento e identificação de afiliados.

Essa integração viabiliza o monitoramento automático das indicações realizadas, associando cada venda ao afiliado correspondente de forma segura e estruturada.

Como configurar sua landing page para promover o cadastro de novos usuários com rastreamento do afiliado.

Para que a personalização funcione corretamente, é necessário configurar a landing page de acordo com diretrizes específicas da plataforma Eloss.

Este guia apresenta as orientações necessárias para estruturar visualmente a página e aplicar as configurações que permitem a exibição dinâmica e automática dos dados de afiliados.

A seguir, detalhamos o passo a passo para a implementação correta da integraçã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:

  1. No navegador, digite o link do seu painel, normalmente em seudominio.com/wp-admin;

  2. 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:

    1. No navegador, digite o link do seu painel, normalmente em seudominio.com/wp-admin;

    2. Informe seu usuário e senha para entrar no ambiente de administração.

  2. No painel administrativo do WordPress, vá em Plugins > Adicionar novo.

  3. 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:

  1. No painel administrativo do WordPress, clique em WPCode (ou Code Snippets).

  2. Em seguida, clique na opção Header & Footer.

3. Localize o campo de adição de script do footer

4. Copie e cole o código abaixo:

<script>
    let getParameterByName = function(name, value, url) {
        if (!value) value = ”;
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, ‘\\$&’);
        var regex = new RegExp(‘[?&]’ + name + ‘(=([^&#]*)|&|#|$)’),
            results = regex.exec(url);
        if (!results) return ”;
        if (!results[2]) return ”;
        return decodeURIComponent(results[2].replace(/\+/g, ‘ ‘));
    };
    if (getParameterByName(‘affiliate’)) {
        localStorage.setItem(‘affiliate’, getParameterByName(‘affiliate’));
    }
 
    function checkAffiliateAndOpen(url, target) {
        let affiliate = ”;
        if (localStorage.getItem(‘affiliate’)) {
            affiliate = localStorage.getItem(‘affiliate’).toString();
        }
return url + (url.indexOf(‘?’) != -1 ? (affiliate != ” ? ‘&affiliate=’ + affiliate : ”) : (affiliate != ” ? ‘?affiliate=’ + affiliate : ”));
    }
 
(function(){
let elsAffiliate = document.querySelectorAll(‘.link-affiliate a’);
if(typeof(elsAffiliate)===’undefined’ || !elsAffiliate){
elsAffiliate = [];
}
let iElsAffiliate = 0;
for(iElsAffiliate=0;iElsAffiliate<elsAffiliate.length;iElsAffiliate++){
let url = elsAffiliate[iElsAffiliate].getAttribute(‘href’);
elsAffiliate[iElsAffiliate].setAttribute(‘href’,checkAffiliateAndOpen(url));
}
})();
</script>

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

Nesta etapa de personalização, o objetivo é configurar corretamente os botões de ação da landing page, que direcionarão os visitantes para a finalização da compra.

1. Adicione o elemento de botão.

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 checkout de compra do produto.

2. Configuração do botão.

Para configurar o fluxo de cadastro dos afiliados, utilize o seguinte link padrão:

https://escritorio.seudominio.com.br/register/
⚠️ Atenção:

Substitua o trecho seudominio.com.br pelo domínio real da sua operação.

Exemplo:
Se o domínio da sua empresa for minhaempresa.com.br, o link correto será:

https://escritorio.minhaempresa.com.br/register/
Etapa 3: Colar o link no botão da landing page

  • Clique sobre o botão que deseja configurar para abrir as opções de edição do elemento.
    ➔ No Elementor, Gutenberg ou outro editor visual, basta selecionar o botão diretamente na área de edição.

  • Cole o link de checkout no campo de URL ou Link do botão.
    ➔ Utilize o link de checkout que você copiou.

Etapa 4: Depois, aplique a classe CSS link-affiliate 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: link-affiliate

⚠️ 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.

A partir deste ponto, você pode realizar ajustes visuais na página conforme necessário: alterar cores, fontes, tamanhos, disposição dos elementos, adicionar efeitos visuais, entre outras personalizações disponíveis no seu editor WordPress.

⚠️ Atenção:
Este processo deve ser repetido para todos os botões de ação da landing page que você deseja que direcionem o visitante para o checkout do produto.
Cada botão deve ser configurado individualmente, aplicando o link de redirecionamento correto e a classe CSS obrigatória para garantir o rastreamento adequado.

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:

  1. 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

  1. 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.

  1. No campo Componente, selecione obrigatoriamente a opção Produtos.

  2. 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.

    1. Escreva um título para o card (ex: “Conheça nosso produto”).

    2. Qtd de itens do slide: Especifique a quantidade de cards que deseja aplicar dentro do elemento.

    3. 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:

https://escritorio.suaempresa.com.br

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:

    1. Acesse o menu superior Escritório.

    2. 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.

Etapa 2: Localizar e copiar o link da landing page

Na 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 3: 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 4: Verificar o vinculo de afiliado no checkout

Após configurar o botão de checkout na landing page, é necessário validar se o rastreamento do afiliado foi aplicado corretamente.

Para isso, siga o procedimento abaixo:

  1. Com a Landing page aberta, clique no botão de ação que você configurou.
  2. Aguarde o redirecionamento para a página cadastro do Escritório Virtual.

  3. Verifique se a informação do afiliado aparece no campo de patrocinador.

⚠️ Atenção:

  • Se o nome do afiliado não aparecer ou se a indicação estiver incorreta, revise a configuração do botão, o link utilizado e a aplicação da classe CSS link-affiliate.

  • Esse teste deve ser realizado em todos os botões configurados, garantindo que o rastreamento funcione corretamente em todos os pontos de ação da página.

✅ Se a indicação aparecer corretamente, a integração e o rastreamento estão funcionando como esperado.

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.

Transformando suas ideias em realidade tecnológica – com você em cada passo da jornada.

Categorias

Canais de atendimento

  • (11) 95987-7648
  • contato@eloss.com.br