Skip to main content

​
Overview

The contact section provides multiple ways for users to reach out about a property:
  • Phone call button with formatted number
  • Email button
  • WhatsApp integration with auto-formatted Colombian numbers
  • Additional property information (building name, administration costs)

​
HTML Structure

From index.html:200-228, the contact card is a sticky sidebar element: 
<aside class="lg:col-span-4">
  <div class="sticky top-8 space-y-6">
    <!-- Contact Card -->
    <div class="bg-white dark:bg-slate-800 p-8 rounded-2xl shadow-xl border border-slate-100 dark:border-slate-700">
      <h3 class="text-xl font-display font-bold mb-6">Solicitar Información</h3>
      
      <!-- Contact Buttons -->
      <div class="space-y-3 mb-8">
        <!-- Phone Button -->
        <a id="contact-phone" class="flex items-center justify-center gap-2 w-full py-3.5 bg-primary hover:bg-blue-700 text-white rounded-xl font-semibold transition-all shadow-lg shadow-blue-500/20" href="#">
          <span class="material-icons-outlined text-lg">call</span>
          <span id="contact-phone-text">Llamar</span>
        </a>
        
        <!-- Email Button -->
        <a id="contact-email" class="flex items-center justify-center gap-2 w-full py-3.5 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-900 dark:text-white rounded-xl font-semibold transition-all" href="#">
          <span class="material-icons-outlined text-lg">mail</span>
          Enviar Correo
        </a>
        
        <!-- WhatsApp Button -->
        <a id="contact-whatsapp" class="flex items-center justify-center gap-2 w-full py-3.5 bg-[#25D366] hover:bg-[#1ebd5b] text-white rounded-xl font-semibold transition-all shadow-lg shadow-green-500/20" href="#" target="_blank" rel="noopener">
          <span class="material-icons-outlined text-lg">chat</span>
          WhatsApp
        </a>
      </div>
      
      <!-- Additional Information -->
      <div class="space-y-4 pt-6 border-t border-slate-100 dark:border-slate-700">
        <div class="flex justify-between items-center">
          <span class="text-slate-500 text-sm">Conjunto</span>
          <span id="contact-building" class="font-semibold text-sm">--</span>
        </div>
      </div>
    </div>
  </div>
</aside>

​
Contact Card Positioning

The contact card uses sticky positioning to remain visible while scrolling: 
.sticky top-8
This keeps the contact information accessible at all times within the viewport.

​
renderContact() Function

From app.js:497-529, this function populates all contact links and information: 
const renderContact = (property) => {
  const phone = property.telefono || "";
  const email = property.correo || "";

  // Phone link and text
  const phoneLink = $("#contact-phone");
  const phoneText = $("#contact-phone-text");
  if (phoneText) {
    phoneText.textContent = phone ? `Llamar ${phone}` : "Llamar";
  }
  if (phoneLink) {
    phoneLink.href = phone ? `tel:${phone}` : "#";
  }

  // Email link
  const emailLink = $("#contact-email");
  if (emailLink) {
    emailLink.href = email ? `mailto:${email}` : "#";
  }

  // WhatsApp link with Colombian country code
  const whatsappLink = $("#contact-whatsapp");
  if (phone) {
    const cleaned = phone.replace(/\D/g, "");
    if (whatsappLink) whatsappLink.href = `https://wa.me/57${cleaned}`;
  } else {
    if (whatsappLink) whatsappLink.href = "#";
  }

  // Building and administration info
  const contactBuilding = $("#contact-building");
  if (contactBuilding) contactBuilding.textContent = property.conjunto || "--";
  const contactAdmin = $("#contact-admin");
  if (contactAdmin) contactAdmin.textContent = property.administracion
    ? formatCurrency(property.administracion)
    : "--";
};

​
Phone Integration

The phone button uses the tel: URI scheme for direct calling: 
const phoneLink = $("#contact-phone");
const phoneText = $("#contact-phone-text");
if (phoneText) {
  phoneText.textContent = phone ? `Llamar ${phone}` : "Llamar";
}
if (phoneLink) {
  phoneLink.href = phone ? `tel:${phone}` : "#";
}

​
Example Output

If property.telefono = "3001234567", the button will display: 
<a href="tel:3001234567">
  <span class="material-icons-outlined text-lg">call</span>
  <span>Llamar 3001234567</span>
</a>

​
Email Integration

The email button uses the mailto: URI scheme: 
const emailLink = $("#contact-email");
if (emailLink) {
  emailLink.href = email ? `mailto:${email}` : "#";
}

​
Example Output

If property.correo = "info@example.com", the link becomes: 
<a href="mailto:info@example.com">Enviar Correo</a>

​
WhatsApp Integration

WhatsApp links are auto-formatted for Colombian numbers (country code +57): 
const whatsappLink = $("#contact-whatsapp");
if (phone) {
  const cleaned = phone.replace(/\D/g, "");
  if (whatsappLink) whatsappLink.href = `https://wa.me/57${cleaned}`;
} else {
  if (whatsappLink) whatsappLink.href = "#";
}

​
Number Cleaning Process

1

Remove non-digits

The regex /\D/g removes all non-digit characters from the phone number
2

Add country code

Prepends “57” (Colombia’s country code) to the cleaned number
3

Create WhatsApp URL

Formats as https://wa.me/57{cleaned}

​
Example Transformation

Input PhoneCleanedWhatsApp URL
300-123-45673001234567https://wa.me/573001234567
(300) 123 45673001234567https://wa.me/573001234567
30012345673001234567https://wa.me/573001234567

​
Additional Property Information

The contact card also displays building and administration details: 
const contactBuilding = $("#contact-building");
if (contactBuilding) contactBuilding.textContent = property.conjunto || "--";

const contactAdmin = $("#contact-admin");
if (contactAdmin) contactAdmin.textContent = property.administracion
  ? formatCurrency(property.administracion)
  : "--";
Note: The contactAdmin element is referenced in the code but not present in the current HTML structure. This suggests it may have been removed or is planned for future implementation.

​
Button Styling

​
Phone Button (Primary)

bg-primary hover:bg-blue-700 text-white rounded-xl font-semibold transition-all shadow-lg shadow-blue-500/20

​
Email Button (Secondary)

bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-900 dark:text-white rounded-xl font-semibold transition-all

​
WhatsApp Button (Brand Color)

bg-[#25D366] hover:bg-[#1ebd5b] text-white rounded-xl font-semibold transition-all shadow-lg shadow-green-500/20
The WhatsApp button uses the official WhatsApp green color (#25D366) for brand consistency.

​
Responsive Behavior

The contact section adapts to different screen sizes:
  • Desktop (lg+): Sticky sidebar on the right (4-column span)
  • Mobile/Tablet: Full-width card below main content
<aside class="lg:col-span-4">
  <div class="sticky top-8 space-y-6">
    <!-- Contact card content -->
  </div>
</aside>

​
Material Icons

The contact buttons use Material Icons Outlined:
  • Phone: call
  • Email: mail
  • WhatsApp: chat
These are loaded from Google Fonts: 
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined&display=swap" rel="stylesheet"/>

Build docs developers (and LLMs) love

Get started for freeTalk to us