Introdução

EWM Modal CTA é um plugin profissional para WordPress que permite a criação e gerenciamento avançado de modais interativos. É projetado para a captura de leads através de formulários com múltiplos passos e para exibir anúncios dinâmicos, com uma integração profunda com WooCommerce para impulsionar as vendas.

Suas características chave incluem um Custom Post Type (ew_modal) para um gerenciamento organizado, um construtor visual baseado em abas, um sistema de injeção automática para exibir modais sem shortcodes, e uma arquitetura otimizada para desempenho e segurança.

Instalação e Criação

Instalação do Plugin

1. Baixe o arquivo .zip do plugin EWM Modal CTA.

2. No seu painel de administração do WordPress, vá para Plugins > Adicionar novo.

3. Clique no botão Carregar plugin na parte superior da página.

4. Selecione o arquivo .zip que você baixou e clique em Instalar agora.

5. Uma vez instalado, clique em Ativar plugin.

Criar um Novo Modal

Criar um modal é um processo centralizado graças ao construtor visual:

1. No menu de administração, vá para EWM Modals > Construtor de Modais.

2. Se for um modal novo, você será direcionado ao construtor. Se desejar editar um existente, vá para EWM Modals > Todos os Modais e clique em “Editar”.

3. O construtor utiliza um sistema de abas para configurar todos os aspectos do modal.

Uso do Construtor de Modais

O construtor visual é o coração do plugin e permite que você configure cada detalhe do seu modal de forma intuitiva.

Aba Geral

Aqui você define as configurações básicas do modal:

• Título do Modal: O título interno para identificar seu modal no administrador.
• Modo do Modal: Escolha entre “Formulário de Múltiplos Passos” (para capturar dados) ou “Anúncio/Notificação” (para exibir uma mensagem simples).
• Modal Ativo: Ativa ou desativa o modal globalmente.
• Usar configuração global: Permite que o modal seja exibido automaticamente de acordo com as regras das abas “Gatilhos” e “Avançado”. Se desativado, funcionará apenas com shortcode.

Aba Passos e Campos

Esta seção permite que você construa o conteúdo do modal:

• Adicionar Passos: Para modais de formulário, você pode criar múltiplos passos para dividir a captura de dados. Cada passo tem seu próprio título, subtítulo e descrição.
• Adicionar Campos: Dentro de cada passo, você pode adicionar campos de formulário como texto, e-mail, telefone, área de texto, seletores (dropdowns), rádios e checkboxes.
• Mensagens de Sucesso: Configure o título e a mensagem que serão exibidos ao usuário após preencher o formulário com sucesso.

Aba Design

Personalize a aparência do seu modal:

• Tamanho do Modal: Defina a largura do modal (Pequeno, Médio, Grande).
• Animação: Escolha a animação de entrada (Fade, Deslizar, Zoom).
• Cores: Selecione as cores primárias, secundárias e de fundo para combinar com a identidade da sua marca.

Visualização e Gatilhos

Controle onde, quando e como seus modais aparecem.

Regras de Visualização (Aba Avançado)

Defina as condições para a injeção automática:

• Dispositivos Alvo: Escolha se o modal será exibido em desktop, tablet ou celular.
• Páginas Alvo: Inclua ou exclua o modal em páginas específicas (Início, Blog, páginas concretas).
• Funções de Usuário: Exiba o modal apenas para certas funções de usuário (ex: todos, apenas visitantes, apenas administradores).
• Omitir em páginas WC: Evite que os modais gerais apareçam em páginas de produtos ou categorias do WooCommerce para não interferir com promoções específicas.

Configuração de Gatilhos (Aba Gatilhos)

Defina as ações que ativarão o modal:

• Intenção de Saída: É exibido quando o usuário tenta abandonar a página.
• Atraso de Tempo: Aparece após um número determinado de segundos.
• Gatilho de Rolagem: É ativado quando o usuário rolou uma porcentagem da página.
• Gatilho Manual: Permite ativar o modal com um clique em um elemento específico (usando data-ewm-modal="ID").
• Frequência de Exibição: Controla a frequência com que um mesmo usuário vê o modal (sempre, uma vez por sessão, por dia, etc.).

Uso de Shortcodes

Para controle manual, você pode inserir o modal em qualquer parte do seu conteúdo usando seu shortcode. Após salvar um modal, será gerado um shortcode único que você poderá copiar e colar.

Exemplo: [ew_modal id="123"]

Integração com WooCommerce

EWM Modal CTA inclui funcionalidades específicas para melhorar as conversões em lojas WooCommerce.

Ativação e Configuração

1. Na aba Geral do construtor, marque a caixa “WooCommerce Integration”.

2. Isso ativará uma nova aba chamada WooCommerce e adaptará a interface para criar um modal de promoção.

3. Na aba WooCommerce, você poderá selecionar um cupom de desconto existente em sua loja.

Criar um Modal de Promoção

Uma vez ativada a integração:

• Seleção de Cupom: Escolha um cupom e o plugin exibirá seus detalhes.
• Conteúdo da Promoção: Escreva um título e descrição para a oferta. Você pode usar o botão “Preenchimento Automático” para gerar texto baseado nos detalhes do cupom.
• Temporizador de Urgência: Ativa um temporizador de contagem regressiva para criar uma sensação de urgência e motivar a compra.
• Aplicar Cupom Automaticamente: Configure o botão CTA para aplicar o cupom ao carrinho e redirecionar o usuário.

Esses modais são projetados para aparecer em páginas de produtos e evitar conflitos, por exemplo, não sendo exibidos se um cupom similar já estiver aplicado.

Gerenciamento de Envios

Todos os dados enviados através dos formulários dos modais são salvos de forma segura e podem ser gerenciados facilmente.

1. No menu de administração, vá para EWM Modals > Submissions.

2. Você verá uma lista de todos os envios. Cada entrada mostra os dados enviados, o modal de origem e a página de onde o formulário foi enviado.

3. Você pode clicar em cada envio para ver os detalhes completos.

Recursos Avançados

Segurança e Sanitização

O plugin implementa um sistema de sanitização personalizado que protege contra ataques XSS sem remover o HTML necessário para o correto funcionamento dos formulários e o conteúdo do modal. Todas as entradas são validadas e o conteúdo dos campos é sanitizado de forma segura.

Desempenho

EWM Modal CTA é otimizado para não afetar a velocidade do seu site. Os scripts e estilos só são carregados nas páginas onde há um modal ativo, graças a um sistema de detecção inteligente que funciona tanto com shortcodes quanto com a injeção automática.

REST API

O plugin expõe vários endpoints na REST API do WordPress para funcionalidades como o envio de formulários pelo frontend, a obtenção de dados do usuário para preenchimento automático e a consulta de visibilidade de modais do WooCommerce. Isso permite integrações avançadas e um funcionamento desacoplado (headless).