Ganti Nomor Whatsapp
<!-- Sticky Contact Bar - Middle Right -->
<div class="fixed right-0 top-1/2 transform -translate-y-1/2 z-50 flex flex-col gap-3 pr-3">
<!-- Call Button -->
<a href="tel:6285710341394"
class="call-button group flex items-center justify-end gap-2 bg-white hover:bg-primary/5 text-primary transition-all duration-300 rounded-l-xl border-2 border-r-0 border-primary overflow-hidden"
onclick="trackCallClick()">
<span class="max-w-0 group-hover:max-w-[120px] overflow-hidden transition-all duration-500 whitespace-nowrap">
Telepon
</span>
<div class="flex items-center justify-center w-12 h-12">
<svg class="w-5 h-5 transition-transform group-hover:rotate-12"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
</div>
</a>
<!-- WhatsApp Button -->
<a href="https://wa.me/6285710341394?text=Halo, saya tertarik dengan properti dari Citra Garden Bintaro"
target="_blank"
rel="noopener noreferrer"
class="whatsapp-button group flex items-center justify-end gap-2 bg-green-500 hover:bg-green-600 text-white transition-all duration-300 rounded-l-xl shadow-lg hover:shadow-xl overflow-hidden"
onclick="trackWhatsAppClick(event)"
data-operating-hours="09:00-21:00">
<span class="max-w-0 group-hover:max-w-[120px] overflow-hidden transition-all duration-500 whitespace-nowrap">
WhatsApp
</span>
<div class="flex items-center justify-center w-12 h-12 relative">
<!-- Operating Hours Indicator -->
<div class="absolute top-1 right-1 w-2 h-2 rounded-full transition-colors duration-300"
id="operatingStatus">
</div>
<!-- WhatsApp Icon -->
<svg class="w-5 h-5 transition-transform group-hover:-rotate-12"
fill="currentColor"
viewBox="0 0 24 24">
<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-.868-2.031-.967-.272-.099-.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.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 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-.695.248-1.29.173-1.414z"/>
</svg>
</div>
</a>
</div>
tambahkan script di bagian bawah
<script>
// Contact Buttons Functionality
const ContactButtons = {
config: {
operatingHours: {
start: 9,
end: 21,
timezone: 'Asia/Jakarta'
},
phoneNumber: '6285710341394',
whatsappMessage: 'Halo, saya tertarik dengan properti dari Citra Garden Bintaro'
},
init() {
this.updateOperatingStatus();
setInterval(() => this.updateOperatingStatus(), 60000);
},
isOperatingHours() {
const now = new Date().toLocaleString('en-US', { timeZone: this.config.operatingHours.timezone });
const hours = new Date(now).getHours();
return hours >= this.config.operatingHours.start && hours < this.config.operatingHours.end;
},
updateOperatingStatus() {
const statusDot = document.getElementById('operatingStatus');
const whatsappButton = document.querySelector('.whatsapp-button');
const isOpen = this.isOperatingHours();
if (statusDot) {
statusDot.style.backgroundColor = isOpen ? '#4ade80' : '#ef4444';
statusDot.title = isOpen ? 'Online' : 'Offline';
}
if (whatsappButton) {
whatsappButton.title = isOpen ? 'Chat dengan kami' :
`Jam operasional: ${this.config.operatingHours.start}:00 - ${this.config.operatingHours.end}:00`;
}
},
trackWhatsAppClick(event) {
event.preventDefault();
const button = event.currentTarget;
if (!this.isOperatingHours()) {
this.showToast(`Jam operasional kami ${this.config.operatingHours.start}:00 - ${this.config.operatingHours.end}:00`);
return;
}
// Animation and redirect
button.classList.add('scale-95');
setTimeout(() => {
button.classList.remove('scale-95');
window.open(button.href, '_blank');
}, 200);
// Analytics tracking
console.log('WhatsApp button clicked');
},
showToast(message) {
const toast = document.createElement('div');
toast.className = 'fixed bottom-4 right-4 bg-white text-gray-800 px-6 py-3 rounded-lg shadow-xl z-50 animate-fade-in';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.classList.add('animate-fade-out');
setTimeout(() => toast.remove(), 300);
}, 3000);
}
};
// Initialize
ContactButtons.init();
// Event Listeners
document.querySelector('.whatsapp-button').addEventListener('click', (e) => ContactButtons.trackWhatsAppClick(e));
</script>
Bagian style di bawah di bagian body
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(1rem); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out;
}
.animate-fade-out {
animation: fadeOut 0.3s ease-out;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.max-w-0 {
scrollbar-width: none;
-ms-overflow-style: none;
}
.max-w-0::-webkit-scrollbar {
display: none;
}
/* Smooth transitions */
.transition-max-width {
transition: max-width 0.5s ease-in-out;
}
</style>
admin