<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8″>
<title>Contato WhatsApp</title>
<script src=”https://cdn.tailwindcss.com”></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
.whatsapp-modal {
background-color: #f0f2f5;
max-width: 380px;
border-radius: 15px;
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.whatsapp-header {
background: linear-gradient(to right, #00a884, #00a884);
color: white;
}
.chat-bubble {
background-color: #dcf8c6;
border-radius: 10px;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body class=”bg-gray-100″>
<!– Botão WhatsApp Flutuante –>
<button id=”openWhatsappModal” class=”fixed bottom-6 right-6 bg-green-500 text-white p-4 rounded-full shadow-2xl z-40 flex items-center justify-center hover:bg-green-600 transition-all”>
<svg xmlns=”http://www.w3.org/2000/svg” width=”28″ height=”28″ viewBox=”0 0 24 24″ fill=”white”>
<path d=”M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.867-2.03-.967-.272-.101-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.149-.173.198-.297.297-.495.101-.198.051-.372-.025-.521-.074-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.041 1.016-1.041 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z”/>
</svg>
</button>
<!– Modal WhatsApp –>
<div id=”whatsappModal” class=”fixed inset-0 bg-black bg-opacity-40 hidden items-center justify-center z-50 p-4″>
<div class=”whatsapp-modal w-full max-w-md mx-auto flex flex-col”>
<!– Cabeçalho do WhatsApp –>
<div class=”whatsapp-header p-4 flex items-center”>
<div class=”w-12 h-12 bg-white rounded-full mr-3 overflow-hidden flex items-center justify-center”>
<svg xmlns=”http://www.w3.org/2000/svg” width=”40″ height=”40″ viewBox=”0 0 24 24″ fill=”#00a884″>
<path d=”M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.867-2.03-.967-.272-.101-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.149-.173.198-.297.297-.495.101-.198.051-.372-.025-.521-.074-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.041 1.016-1.041 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z”/>
</svg>
</div>
<div>
<h2 class=”font-bold text-white text-lg”>Atendimento Online</h2>
<p class=”text-sm text-white opacity-80″>Normalmente responde em instantes</p>
</div>
<button id=”closeModal” class=”ml-auto text-white text-2xl font-light hover:text-gray-200″>×</button>
</div>
<!– Simulação de Conversa –>
<div class=”bg-[#e5ddd5] p-4 flex-grow overflow-y-auto”>
<div class=”chat-bubble text-sm”>
Olá! Como posso ajudar você hoje? Preencha seus dados para iniciar nossa conversa.
</div>
<form id=”whatsappForm” class=”space-y-3 mt-4″>
<input type=”text” id=”name” placeholder=”Seu Nome Completo” required
class=”w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-200 transition-all”>
<input type=”tel” id=”phone” placeholder=”Seu Telefone (com DDD)” required
class=”w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-200 transition-all”>
<button type=”submit”
class=”w-full bg-[#00a884] text-white p-3 rounded-lg hover:bg-[#02b987] transition-all flex items-center justify-center space-x-2″>
<svg xmlns=”http://www.w3.org/2000/svg” width=”20″ height=”20″ viewBox=”0 0 24 24″ fill=”white”>
<path d=”M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.867-2.03-.967-.272-.101-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.149-.173.198-.297.297-.495.101-.198.051-.372-.025-.521-.074-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.041 1.016-1.041 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z”/>
</svg>
<span>Iniciar Conversa no WhatsApp</span>
</button>
</form>
</div>
</div>
</div>
<script>
const openButton = document.getElementById(‘openWhatsappModal’);
const closeButton = document.getElementById(‘closeModal’);
const modal = document.getElementById(‘whatsappModal’);
const form = document.getElementById(‘whatsappForm’);
// Função para abrir modal
openButton.addEventListener(‘click’, () => {
modal.classList.remove(‘hidden’);
modal.classList.add(‘flex’);
});
// Função para fechar modal
closeButton.addEventListener(‘click’, () => {
modal.classList.remove(‘flex’);
modal.classList.add(‘hidden’);
});
// Função para enviar para o WhatsApp
form.addEventListener(‘submit’, (e) => {
e.preventDefault();
const name = document.getElementById(‘name’).value;
const phone = document.getElementById(‘phone’).value.replace(/\D/g, ”);
// Substitua SEUNUMERO pelo seu número de WhatsApp
const whatsappUrl = `https://wa.me/55SEUNUMERO?text=Olá!+Meu+nome+é+${encodeURIComponent(name)}.+Pode+me+ajudar?`;
window.open(whatsappUrl, ‘_blank’);
modal.classList.remove(‘flex’);
modal.classList.add(‘hidden’);
});
</script>
</body>
</html>
