Script Exibir Botões apenas em Horário Comercial

O que esse script faz?

Este script controla automaticamente a visibilidade de botões baseado no dia da semana e horário. Os botões só aparecem em dias úteis (segunda a sexta) e dentro do horário comercial (06:00 às 18:00).

📅 Configuração Padrão

📆 Dias

Segunda a Sexta

🕐 Horário

06:00 às 18:00

🚫 Oculto

Sábados, Domingos e fora do horário

Visualização do Horário Ativo:

06:00 - 18:00 (Ativo)

00:00 06:00 12:00 18:00 23:59

🎯 Ideal para:

Botões de WhatsApp (disponível apenas em horário comercial)
CTAs de agendamento de consultas
Botões de suporte ao vivo
Links para atendimento telefônico
Ofertas limitadas por horário
Controle de disponibilidade de equipe

Funcionalidades Principais

📅 Detecção de Dia

Identifica automaticamente o dia da semana e exibe apenas em dias úteis.

⏰ Controle de Horário

Verifica hora e minuto para precisão no horário de exibição.

🔄 Múltiplos Botões

Aplica a regra em todos os botões com a classe especificada.

⚡ Automático

Funciona automaticamente sem necessidade de recarga manual.

Como Funciona (Passo a Passo)

Captura data e hora atual
Obtém o dia da semana (0-6) e horário exato (hora:minuto) do navegador do visitante.
Identifica todos os botões
Busca na página todos os elementos com a classe meu-botao-elementor.
Verifica se é dia útil
Checa se é segunda-feira (1) até sexta-feira (5). Sábado (6) e domingo (0) são bloqueados.
Verifica o horário
Confirma se está entre 06:00 e 18:00, incluindo exatamente 06:00 e 18:00.
Exibe ou oculta
Se ambas condições forem verdadeiras: mostra o botão. Caso contrário: oculta.

Script Completo

💡 Dica: Cole este script no seu site para ativar o controle de horário nos botões.

<script>
document.addEventListener("DOMContentLoaded", function () {
    const now = new Date();
    const day = now.getDay(); // 0 = Domingo, 1 = Segunda, ..., 6 = Sábado
    const hour = now.getHours();
    const minute = now.getMinutes();
    
    // Seleciona TODOS os botões com a classe
    const botoes = document.querySelectorAll(".meu-botao-elementor");
    
    if (!botoes.length) return;
    
    // Condições: segunda a sexta (1-5) e horário entre 06:00 e 18:00
    const isWeekday = day >= 1 && day <= 5;
    const isTimeAllowed =
        (hour > 6 && hour < 18) ||    // entre 07:00 e 17:59
        (hour === 6 && minute >= 0) || // 06:00 até 06:59
        (hour === 18 && minute === 0); // exatamente 18:00
    
    botoes.forEach(botao => {
        if (isWeekday && isTimeAllowed) {
            botao.style.display = "block";
        } else {
            botao.style.display = "none";
        }
    });
});
</script>

Como Usar (Passo a Passo)

1️⃣ Adicione a classe CSS no botão

No Elementor (ou outro construtor), adicione a classe meu-botao-elementor ao seu botão:

No Elementor:

Selecione o botão que deseja controlar
Vá em Avançado → Classes CSS
Digite: meu-botao-elementor
Salve a página

💡 Importante: Você pode adicionar esta classe em quantos botões quiser. Todos serão controlados pelo script.

2️⃣ Cole o script no site

Escolha uma das opções abaixo:

Opção A - Widget HTML do Elementor

Arraste o widget HTML para a página
Cole o script completo
Deixe o widget em qualquer lugar da página (pode até ocultar visualmente)

Opção B - Footer do Tema (global)

Vá em Aparência → Editor de Temas
Abra o arquivo footer.php
Cole o script antes do </body>
Salve (assim funciona em todas as páginas)

Opção C - Plugin de Scripts (WPCode)

Instale o plugin WPCode
Crie um novo snippet do tipo JavaScript
Cole o script
Configure para Frontend
Ative o snippet

3️⃣ Teste o funcionamento

⚠️ Atenção: O script usa o horário do navegador do visitante, não do servidor. Teste em diferentes horários.

Publique a página
Acesse em um dia útil dentro do horário (06:00 - 18:00) → O botão deve estar visível
Acesse fora do horário ou no fim de semana → O botão deve estar oculto

✅ Pronto! Agora seus botões aparecem apenas no horário comercial automaticamente!

Personalização de Horários

Você pode facilmente ajustar os dias e horários editando o script:

🔧 Mudar horário de funcionamento

// Para funcionar das 08:00 às 17:00 const isTimeAllowed = (hour > 8 && hour < 17) || (hour === 8 && minute >= 0) || (hour === 17 && minute === 0);

🔧 Incluir sábado

// Para funcionar de segunda a sábado const isWeekday = day >= 1 && day <= 6;

🔧 Apenas alguns dias específicos

// Apenas segunda, quarta e sexta const isWeekday = day === 1 || day === 3 || day === 5;

🔧 Funcionar 24 horas em dias úteis

// Remove a verificação de horário const isTimeAllowed = true; // Sempre ativo

🔧 Mudar a classe do botão

// Usar outra classe CSS const botoes = document.querySelectorAll(".minha-classe-customizada");

Exemplos de Uso Prático

📱 Caso 1: Botão WhatsApp Comercial

Cenário: Sua equipe só atende por WhatsApp em horário comercial.

Solução: Adicione a classe no botão de WhatsApp e ele só aparecerá quando houver atendimento disponível.

🩺 Caso 2: Agendamento de Consultas

Cenário: Você quer que o botão "Agendar Consulta" só apareça quando a clínica está aberta.

Solução: Configure o horário de funcionamento da clínica e aplique no script.

💼 Caso 3: Suporte Técnico

Cenário: Seu time de suporte trabalha das 09:00 às 18:00.

Solução: Ajuste o horário no script para 09:00-18:00 e o botão de suporte só aparece nesse período.

🏪 Caso 4: Loja Física com Atendimento Online

Cenário: Você tem uma loja física e quer que visitantes online saibam quando podem ligar.

Solução: Configure o horário de funcionamento da loja e exiba o botão de contato apenas quando estiver aberta.

Tabela de Referência de Dias

Dia da Semana	Valor numérico	Incluído no padrão?
Domingo	0	❌ Não
Segunda-feira	1	✅ Sim
Terça-feira	2	✅ Sim
Quarta-feira	3	✅ Sim
Quinta-feira	4	✅ Sim
Sexta-feira	5	✅ Sim
Sábado	6	❌ Não

Perguntas Frequentes

❓ O horário é do servidor ou do visitante?

O script usa o horário do navegador do visitante. Se o visitante está em outro fuso horário, verá baseado no horário local dele.

❓ Posso aplicar em múltiplos botões?

Sim! Basta adicionar a classe meu-botao-elementor em todos os botões que você quer controlar. O script aplicará a regra em todos.

❓ O botão desaparece automaticamente ao mudar a hora?

O script roda apenas no carregamento da página. Se o visitante mantiver a página aberta por horas, ele precisará recarregar para ver a mudança.

❓ Posso ter horários diferentes para botões diferentes?

Sim! Crie múltiplos scripts com classes CSS diferentes (ex: .botao-manha, .botao-tarde) e configure horários distintos para cada.

❓ Funciona com feriados?

Não. O script básico não detecta feriados. Você precisaria adicionar uma lista de datas específicas para bloquear.

❓ Como fazer para usar fuso horário específico?

Por padrão usa o horário local do visitante. Para forçar um fuso específico, você precisaria usar bibliotecas como moment-timezone.js.

❓ O que acontece se eu esquecer de adicionar a classe?

O script simplesmente não fará nada. Seus botões ficarão com comportamento normal (sempre visíveis).

Dicas Avançadas

💡 Dica Pro: Combine este script com mensagens alternativas para fora do horário!

🎨 Adicione mensagem de "fora do horário"

Em vez de apenas ocultar o botão, você pode exibir uma mensagem informativa:

// Adicione um elemento com a classe .mensagem-fechado if (isWeekday && isTimeAllowed) { botao.style.display = "block"; document.querySelector('.mensagem-fechado').style.display = "none"; } else { botao.style.display = "none"; document.querySelector('.mensagem-fechado').style.display = "block"; }

📊 Integre com Analytics

Rastreie quando visitantes tentam acessar fora do horário:

⏰ Tutorial: Exibir Botões apenas em Horário Comercial