Como usar o Script Avançado de gerenciamento no Construtor de Páginas com IA V3 da Sellflux

Edipaulo Zanella

1 de Set de 2025 • 4 min read

O novo Construtor de Páginas da Sellflux V3 traz a flexibilidade ideal para quem quer unir automação inteligente e controle manual. Você pode criar páginas completas em poucos cliques com ajuda da IA, mas também personalizar cada detalhe manualmente, caso prefira. Além disso, a ferramenta conta com um script interno avançado que potencializa o funil de vendas com recursos como: animações estratégicas nos elementos mais importantes, gestão de modais, máscaras de telefone para capturar contatos corretamente, delays de blocos para guiar a atenção do visitante e rastreamento de interações. Confira abaixo como aproveitar cada funcionalidade na prática.

Manual de Uso — Sellflux.init(...)

Este manual descreve como usar os recursos do script público sellflux-script.js na sua página: delays de exibição, modais, disparo de pixels/eventos e regras para telefone/DDI.

Inicialização básica

Use o objeto global Sellflux para iniciar o script com a configuração do projeto.

<script>
  Sellflux.init({
    project: {
      id: 'PROJ_001',
      code: 'landing-vendas',
      country: { code: 'BR', name: 'BR', ddi: '+55', phoneMask: '(99) 99999-9999' },
      tags: 'vendas,landing,promocao',
      epId: 40692
    },
    pixels: { facebook: ['FB_ID'], google: ['AW-XXX'], tiktok: ['TTQ_ID'] },
    events: {
      facebook: { load: ['PageView'], subscription: ['Lead'] },
      google: { load: ['page_view'], subscription: ['conversion'] },
      tiktok: { load: ['Pageview'], subscription: ['CompleteRegistration'] }
    },
    features: {
      inputMasks: true,
      navigation_utms: true,
      wait_tracking_acceptance: false,
      save_primary_information: true,
      support_cta_link: null
    }
  });
  // Opcional: disparo manual de eventos
  // Sellflux.trackEvent('ButtonClick', { button: 'comprar-agora' });
  // Compatibilidade: renderScripts() dispara onpageload
  // window.renderScripts();
  
</script>

Delay de exibição de elementos

O script permite atrasar a exibição de qualquer elemento usando atributos de dados:

data-delay-seg: atraso em segundos
data-delay-min: atraso em minutos (somado aos segundos)
Classe opcional sfx_delay: será removida quando o elemento reaparecer

Comportamento:

Ao carregar, elementos com data-delay-seg e/ou data-delay-min são ocultados via style.display = 'none'.
O script salva apenas o display inline original (se existir) em data-sfx-original-display.
Quando o tempo total expira, o script:
- Remove a classe sfx_delay (se presente)
- Restaura o display inline salvo. Se não havia display inline, remove a propriedade display para que o CSS (ex.: classe .inline) volte a valer.

Exemplos:

<!-- 32 segundos -->
<span data-delay-seg="32">O novo agente de</span>

<!-- 12 segundos + classe inline controlada por CSS -->
<img src="..." class="sfx_delay inline" data-delay-seg="12" />

Observações:

Se você definir style="display:none" inline, ele será restaurado como none no final (permanece oculto). Prefira controlar a exibição por classes quando possível.
Se ambos os atributos forem usados, o total é (minutos * 60) + segundos.

Sistema de Modais

O script gerencia abertura/fechamento de modais e LGPD. Ele reconhece modais com elemento modal, [role="dialog"] ou .modal.

Abertura e Fechamento via atributos

Abrir: qualquer elemento com data-type="modal" e actionValue="ID_DO_MODAL" abre o modal alvo.
Fechar: qualquer elemento com data-type="closeModal" fecha o modal em foco.

<button data-type="modal" actionValue="meu_modal">Abrir modal</button>

<modal id="meu_modal">
  <div>Conteúdo</div>
  <button data-type="closeModal">Fechar</button>
</modal>

Auto-abertura

Modais com atributo open podem ser abertos automaticamente na carga, respeitando as regras de LGPD e lista de já aceitos.
Para modais de LGPD (com data-type="acceptCookies" no conteúdo), o comportamento é especial: abre até que seja aceito.

LGPD (consentimento)

Aceitar: data-type="acceptCookies"
Rejeitar: data-type="rejectCookies"

Cookies usados (padrões):

lgpd_accept (consentimento)
lgpd_modals (lista de modais aceitos)

Funções utilitárias:

openModalById(id) e closeModal(modalEl) estão disponíveis globalmente.

Overlay de fundo:

O overlay é adicionado automaticamente. Para desativar num modal específico, use data-backdrop="false" no elemento do modal.

Disparos de pixels e eventos

Inicialização de Pixels

pixels.facebook: lista de IDs — o script chama fbq('init', ...) para cada um.
pixels.google: lista de IDs — carrega gtag.js uma vez e configura cada ID.
pixels.tiktok: lista de IDs — carrega base e ttq.load para cada ID.

Eventos de "load"

Configurados em events.{facebook|google|tiktok}.load.
Disparados na carga (ou após aceitar LGPD, se features.wait_tracking_acceptance = true).
O script gera um eventID estável a partir do cookie session_id (ou cria um novo) e o reusa nos eventos compatíveis.

Eventos de "subscription" (form submit)

Configurados em events.{facebook|google|tiktok}.subscription.
Disparados ao submeter formulários; o script enriquece com dados do usuário e identifica (quando possível):
- Facebook: fbq('track', <evt>, payload, { eventID })
- Google: gtag('event', <evt>, payload)
- TikTok: ttq.identify(...) + ttq.track(<evt>, {}, { event_id })

Regras para o Telefone (DDI, Máscara e Dados)

O script fornece seleção de país/DDD e normalização do telefone.

Seleção de país/DDD

Um modal de países é disponibilizado automaticamente.
O botão do seletor deve estar no mesmo container do input de telefone. O script vincula o clique para abrir o modal.
Ao selecionar um país:
- Atualiza variáveis globais (window.country, window.countryCode, window.mask).
- Reaplica a máscara aos inputs de telefone.
- Atualiza a UI de botões próximos (bandeira + DDI) e elementos com .country_code_button.