O UncodeModal é uma solução intuitiva para a implementação de modais interativos em projetos React, ideal para uso no Framer. Este componente permite que você exiba modais com base em diversas interações do usuário, como sair do mouse da página, atrasos temporais, rolagem da página, visibilidade do componente e atalhos de teclado personalizados. Com o UncodeModal, você pode enriquecer a experiência do usuário, promovendo maior engajamento e interatividade em seu site ou aplicação.

Com o UncodeModal, é possível configurar facilmente quando e como as modais são exibidas, ajustando parâmetros como o tempo de atraso, a porcentagem de rolagem necessária para acionar a modal e os atalhos de teclado desejados. A integração direta com o Framer simplifica a implementação, permitindo que você foque no design e na usabilidade sem complicações técnicas.

Funcionalidades Principais:

• Disparo por Saída do Mouse: Exibe a modal quando o usuário move o cursor para fora da janela do navegador, ideal para captar a atenção antes que o usuário saia do site.

• Atraso Personalizado: Configura a exibição da modal após um período específico de tempo, mantendo o usuário engajado enquanto navega pelo conteúdo.

• Disparo por Rolagem: Mostra a modal quando o usuário atinge uma determinada porcentagem de rolagem na página, seja subindo ou descendo, com a opção de configurar para que ocorra apenas uma vez.

• Disparo por Visibilidade: Exibe a modal quando o componente se torna visível na viewport, garantindo que a mensagem seja mostrada no momento certo.

• Atalhos de Teclado Personalizados: Permite a abertura da modal através de combinações de teclas, como Command+M ou Control+M, proporcionando acessibilidade e conveniência para os usuários.

Benefícios:

• Engajamento Aprimorado: Captura a atenção dos usuários em momentos estratégicos, aumentando as chances de conversão e interação.

• Fácil Configuração: Interface amigável no Framer para ajustar as configurações de disparo sem necessidade de conhecimentos avançados em programação.

• Flexibilidade de Uso: Adapte a exibição das modais de acordo com as necessidades específicas do seu projeto, garantindo uma experiência personalizada para cada usuário.

• Experiência do Usuário Melhorada: Evita interrupções excessivas, exibindo modais de forma sutil e no momento adequado, mantendo a fluidez da navegação.

Controles Disponíveis:

Configuração de Disparo por Rolagem

Descrição:
Triggers modal ao atingir um percentual específico de rolagem na página. Recomenda-se deixar os controles de PageScroll da overlay em Auto e não bloqueá-los ao utilizar esta funcionalidade.

• Disparo por Rolagem:

  • Nome da Propriedade: showOnScrollToPercentage

  • Descrição: Ativar disparo da modal ao atingir um percentual específico de rolagem.

• Percentual de Rolagem:

  • Nome da Propriedade: scrollPercentage

  • Descrição: Define a porcentagem de rolagem necessária para acionar a modal.

• Disparo Único:

  • Nome da Propriedade: triggerOnce

  • Descrição: Define se a modal deve ser disparada apenas uma vez ao atingir o percentual de rolagem. Ative para exibir a modal apenas na primeira vez que o usuário atinge o ponto definido.

Outros Controles:

• Disparo ao Sair do Mouse:

  • Nome da Propriedade: showOnMouseLeave

  • Descrição: Ativar disparo da modal ao mover o cursor para fora da janela do navegador.

• Configuração de Atraso:

  • Nome da Propriedade: delayConfig

  • Descrição: Configurações para exibir a modal após um período específico de tempo.

  • Subpropriedades:

    • Ativar Atraso:

      • Nome da Propriedade: showOnDelay

      • Descrição: Ativar disparo da modal após o atraso definido.

    • Segundos de Atraso:

      • Nome da Propriedade: delaySeconds

      • Descrição: Define o tempo de atraso em segundos antes de exibir a modal.

• Disparo por Visibilidade:

  • Nome da Propriedade: triggerOnVisibility

  • Descrição: Ativar disparo da modal quando o componente se torna visível na viewport.

• Atalhos de Teclado para Abrir a Modal:

  • Nome da Propriedade: openShortcuts

  • Descrição: Define combinações de teclas para abrir a modal, separadas por vírgulas (ex.: "Command+M, Control+M").

Benefícios Adicionais:

• Precisão na Exibição: Configure exatamente quando e como as modais são exibidas, garantindo que a mensagem certa chegue ao usuário no momento ideal.

• Acessibilidade Melhorada: Atalhos de teclado permitem que usuários mais avançados interajam com as modais de forma rápida e eficiente.

• Personalização Completa: Ajuste os parâmetros de disparo conforme as necessidades do seu projeto, proporcionando uma experiência única para cada público-alvo.

• Melhoria Contínua: Utilize as interações registradas para entender melhor o comportamento dos usuários e otimizar continuamente a experiência oferecida.

Com o UncodeModal, adicione uma camada dinâmica de interatividade aos seus projetos no Framer, capturando a atenção dos usuários de maneira eficaz e personalizada. Transforme a maneira como você comunica informações importantes, promovendo maior engajamento e satisfação do seu público.