Especialista en Web

// Al abrir el chatbot
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'chatbot_open',
  chatbot_source: 'floating_widget',
  page_path: window.location.pathname
});

// Al enviar formulario con éxito
function onFormSuccess(tratamiento) {
  window.dataLayer.push({
    event: 'form_submit',
    form_type: 'lead_capture',
    tratamiento_interes: tratamiento,
    fuente: document.referrer || 'direct'
  });
}

// Calendly: escuchar evento de cita confirmada
window.addEventListener('message', function(e) {
  if (e.data.event === 'calendly.event_scheduled') {
    window.dataLayer.push({
      event: 'booking_completed',
      booking_type: 'calendly'
    });
  }
});

// Instalar en tag GTM de tipo "Custom HTML" — activar en All Pages
!function(f,b,e,v,n,t,s) {
  if(f.fbq) return; n=f.fbq=function(){...}; /* código estándar Meta */
}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'TU_PIXEL_ID');
fbq('track', 'PageView');

// Lead — trigger: dataLayer event "form_submit"
fbq('track', 'Lead', {
  content_name: {{DLV - tratamiento_interes}},
  content_category: 'dental_treatment'
});

// Cita confirmada — trigger: dataLayer event "booking_completed"
fbq('track', 'CompleteRegistration', {
  content_name: 'appointment_booked'
});

<!-- URL: dentalbaste.com/escaparate -->
<!-- Sin menú, sin footer, sin distracciones -->

<section class="qr-hero">
  <img src="/logo.svg" alt="Dental Basté" />
  <h1>¡Bienvenido a Dental Basté!</h1>
  <p>Has escaneado el QR de nuestra clínica.
     Reserva ahora tu primera visita — sin coste.</p>
  <a href="#booking" class="cta-button">Reservar cita gratis →</a>
</section>

<section id="booking">
  <!-- Widget Calendly inline -->
  <div class="calendly-inline-widget"
       data-url="https://calendly.com/dentalbaste/primera-visita?utm_source=qr_escaparate">
  </div>
</section>

<!-- GTM: registrar qr_scan_landing en dataLayer -->
<script>
  dataLayer.push({ event: 'qr_scan_landing', source: 'tv_escaparate' });
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": ["Dentist", "LocalBusiness"],
  "name": "Dental Basté",
  "url": "https://dentalbaste.com",
  "telephone": "+34 9XX XXX XXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Calle ...",
    "addressLocality": "[Ciudad]",
    "addressCountry": "ES"
  },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "09:00", "closes": "20:00" }
  ],
  "priceRange": "€€",
  "medicalSpecialty": ["Dentistry", "Orthodontics"],
  "hasMap": "https://maps.google.com/?q=Dental+Basté"
}
</script>

<!-- Cargar script de Calendly -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"/>
<script src="https://assets.calendly.com/assets/external/widget.js" async></script>

<!-- Widget inline -->
<div class="calendly-inline-widget"
     data-url="https://calendly.com/dentalbaste/primera-visita
               ?hide_gdpr_banner=1
               &utm_source=web
               &utm_medium=landing"
     style="min-width:320px; height:700px;">
</div>

<!-- Escuchar evento de cita confirmada para GTM -->
<script>
  window.addEventListener('message', function(e) {
    if (e.data.event === 'calendly.event_scheduled') {
      dataLayer.push({ event: 'booking_completed' });
    }
  });
</script>

<form id="lead-form">
  <input name="nombre" placeholder="Tu nombre" required />
  <input name="email" type="email" placeholder="Tu email" required />
  <input name="telefono" placeholder="Teléfono" />
  <select name="tratamiento">
    <option>Ortodoncia</option>
    <option>Implantes</option>
    <option>Blanqueamiento</option>
    <option>Otra consulta</option>
  </select>
  <button type="submit">Reserva tu primera visita gratis →</button>
</form>

<script>
document.getElementById('lead-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(e.target));

  // Enviar a HubSpot Forms API
  await fetch('https://api.hsforms.com/submissions/v3/integration/submit/TU_PORTAL_ID/TU_FORM_ID', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      fields: [
        { name: 'firstname', value: data.nombre },
        { name: 'email', value: data.email },
        { name: 'phone', value: data.telefono },
        { name: 'tratamiento_interes', value: data.tratamiento }
      ],
      context: { pageUri: window.location.href }
    })
  });

  // Disparar evento GA4 + Meta Pixel
  dataLayer.push({ event: 'form_submit', tratamiento_interes: data.tratamiento });
});
</script>