Booking Blocks: Programación rastreable y experiencia de citas

Un bloque de reserva permite al lector elegir o solicitar una cita mientras mantiene los datos esenciales en HTML. Combina una acción específica, contexto de servicio y ubicación, elegibilidad, programación y una ruta alternativa.

Reservar una visita de reparación de electrodomésticos
Diagnóstico de lavavajillas · aproximadamente 60 minutos
Disponible para hogares dentro del área de servicio de Northside. Puede aplicar una tarifa de diagnóstico.
Elige una hora de cita
Si la programación online no está disponible, llama al (555) 014-0186, lunes a viernes, 8:00 a.m.–6:00 p.m.

El programador puede aparecer en línea, en un diálogo o fuera del sitio. Eliminarlo no debe eliminar el servicio, la duración, el área, las condiciones ni la alternativa.

Por qué importa este elemento

La programación convierte el interés en un compromiso. En ese momento, los lectores suelen verificar tres cosas a la vez: “¿Es esta la cita correcta?”, “¿Puede este negocio atenderme?” y “¿Qué sucede después de elegir?” Un bloque que solo dice “Reservar ahora” obliga al lector a salir de la página o entrar en un widget para resolver esas preguntas. Esa incertidumbre es especialmente costosa para los servicios locales, donde la sucursal, zona horaria, área de servicio o tipo de cita equivocados pueden invalidar la reserva.

La claridad reduce el riesgo de actuar. “Reservar una consulta inicial de 30 minutos” establece una expectativa más firme que “Comenzar”. La elegibilidad visible, las tarifas, la preparación, los términos de cancelación y los datos de contacto exponen una discrepancia antes de que el lector comparta información personal.

La capacidad de extracción automática es importante porque muchos programadores llegan a través de un iframe o script de terceros. Un rastreador, un sistema de respuestas de IA, una sesión bloqueada por consentimiento o una tecnología de asistencia pueden recibir un marco vacío. Así no puede determinar qué se puede reservar, dónde, bajo qué condiciones ni cómo recuperarse.

No copies las franjas horarias en vivo en el texto; cambian rápidamente y pertenecen al sistema de programación. Renderiza el contexto estable en la página anfitriona: nombre de la cita, ubicación, duración, elegibilidad, preparación, costos, zona horaria, proveedor y alternativa. El widget añade fechas y horas actuales.

Aplica las reglas de redacción de elementos antes de elegir este componente. El propósito tiene prioridad sobre la apariencia. Si el bloque programa una interacción con límite de tiempo, es un bloque de reserva incluso cuando el diseño actual parece una llamada a la acción ordinaria. Si solo recopila una consulta de ventas sin ofrecer ni solicitar una cita, es un formulario o CTA en su lugar.

Cuándo usarlo

Usa un bloque de reserva cuando el lector pueda realizar una acción de programación definida: reservar una visita de servicio, solicitar una cita, elegir un espacio de consulta, concertar una visita a una propiedad, programar una reunión en una sucursal o unirse a una lista de espera para un servicio específico. El negocio debe tener un proceso operativo que reciba la solicitud y pueda confirmarla, rechazarla o reprogramarla.

Los casos límite son comunes:

• Un formulario de contacto general no es un bloque de reserva cuando no implica fecha, hora ni solicitud de cita. Etiquétalo como consulta e indica la expectativa de respuesta.
• Un botón de llamada a la acción no es un bloque de reserva completo cuando envía al lector a un calendario sin explicación. Añade el contexto de reserva estable y la ruta alternativa.
• El horario de apertura describe cuándo opera un negocio; no prueba la disponibilidad de citas. Mantén los horarios separados de las franjas en vivo.
• El registro de eventos reserva asistencia a un evento fijo en lugar de concertar una hora de servicio individual. Usa el patrón de evento o registro adecuado.
• Una ruta de emergencia no debe depender de un calendario rutinario. Si hay ayuda urgente o de emergencia, indica la ruta de contacto inmediata correcta antes de cualquier programador.

Dónde ubicarlo

Coloca el bloque de reserva después de que la página haya establecido la adecuación del servicio y antes del contenido promocional secundario. En una página de ubicación , colócalo después de la identidad de la sucursal, la dirección o área de servicio, el horario y la breve explicación de los servicios disponibles. En una página de servicio , colócalo después del alcance, la idoneidad y las condiciones principales. Puede aparecer una acción repetida compacta cerca del final, pero debe apuntar a la misma región de reserva en lugar de inicializar una segunda instancia del proveedor.

No coloques el bloque directamente junto a otro formulario principal, un programador diferente, un CTA telefónico sin explicación o una cuenta regresiva promocional. Las acciones en competencia dificultan saber qué ruta es la autorizada. No lo coloques dentro de una pestaña, carrusel, acordeón, celda de tabla comparativa, tarjeta cliqueable ni capa de consentimiento. Las condiciones esenciales no deben estar debajo de un testimonio u oferta no relacionada.

Para servicios de consecuencias, coloca cualquier limitación que cambie si el lector debería reservar inmediatamente antes de la acción. Nunca des a entender que seleccionar una hora confirma la elegibilidad.

Anatomía

La captura etiquetada debe identificar estas partes:

1. Título específico de la acción: indica qué se puede reservar, no meramente “Reservar ahora”.
2. Resumen del servicio: explica el propósito en una oración.
3. Contexto de ubicación: nombra la sucursal, el área de servicio o el formato remoto, y la zona horaria.
4. Datos de la cita: muestra duración, público, condición de tarifa y elegibilidad.
5. Nota de preparación: indica los requisitos que afectan el éxito.
6. Acción principal: usa una etiqueta accesible específica.
7. Región del programador: contiene franjas horarias en vivo, validación y atribución del proveedor.
8. Contexto de privacidad: identifica el manejo de datos por terceros.
9. Expectativa de confirmación: distingue la confirmación de una solicitud.
10. Ruta alternativa: proporciona una alternativa supervisada y su horario de atención.

Ejemplos de diseño

Cada variante lleva el mismo contexto rastreable; solo cambian la ubicación y la complejidad de la selección en vivo.

Programador en línea

Úsalo para un servicio y una ubicación cuando el proveedor sea accesible y estable. Reserva suficiente altura para evitar cambios de diseño.

Programador en diálogo o panel lateral

Úsalo cuando un calendario en línea dominaría la página. Etiqueta el diálogo, proporciona Cerrar, aísla el fondo y devuelve el foco al salir.

Página de reserva alojada por el proveedor

Úsala cuando la autenticación, el pago, la recopilación compleja de datos o la fiabilidad del proveedor favorezcan el sitio del proveedor. Nombra el destino y mantén visible la alternativa.

Solicitud de cita

Úsala cuando el personal deba verificar elegibilidad, viaje, equipo o disponibilidad de especialistas. Pide horarios preferidos e indica el canal de respuesta y la expectativa.

Reserva telefónica y asistida

Úsala cuando se requiera conversación para triaje o asignación segura. Haz seleccionable el número y proporciona horario de atención más una alternativa no telefónica.

Selector de múltiples ubicaciones

Úsalo en varias sucursales. Resuelve la sucursal antes que los horarios, muestra su dirección y zona horaria, y preserva la elección hasta la confirmación.

Parámetros

“Fuente” describe de dónde obtiene el renderizador el valor canónico. La configuración del lado del proveedor puede controlar el inventario en vivo, pero no reemplaza los campos de contenido visibles a continuación.

Al menos uno de fallbackPhone o fallbackUrl es obligatorio con código de terceros. El primer encabezado se asigna a title, el primer párrafo a summary, y el resto del cuerpo a datos, confirmación, privacidad y alternativa. Las franjas horarias en vivo nunca pertenecen al contenido creado.

Sintaxis y ejemplos de código

Las tres notaciones preservan el mismo servicio, sucursal, duración, proveedor, modo de confirmación y alternativa. Las URL son ilustrativas.

Directiva Markdown portable

:::booking-block{id=dishwasher-repair service="Dishwasher diagnosis" variant=inline duration=PT1H location=northside timezone=America/Chicago provider="Example Scheduler" src="https://scheduler.example.com/northside/dishwasher" ctaLabel="Choose an appointment time" confirmationMode=instant fallbackPhone="+15550140186"}
## Book an appliance repair visit

Choose a 60-minute dishwasher diagnosis at our Northside branch.

Available for homes within the Northside service area. A diagnostic fee may apply and will be confirmed before the visit.

Your appointment is confirmed only when you receive an email with the date, time, address, and reference number.

Scheduling is provided by Example Scheduler. If it does not load, call (555) 014-0186, Monday–Friday, 8:00 a.m.–6:00 p.m.
:::

Shortcode de Hugo

Esta es la adaptación contractual prevista, no una afirmación de que el shortcode ya exista. Usa solo parámetros nombrados.

{{< booking-block id="dishwasher-repair" service="Dishwasher diagnosis" variant="inline" duration="PT1H" location="northside" timezone="America/Chicago" provider="Example Scheduler" src="https://scheduler.example.com/northside/dishwasher" ctaLabel="Choose an appointment time" confirmationMode="instant" fallbackPhone="+15550140186" >}}
## Book an appliance repair visit

Choose a 60-minute dishwasher diagnosis at our Northside branch.

Available for homes within the Northside service area. A diagnostic fee may apply and will be confirmed before the visit.

Your appointment is confirmed only when you receive an email with the date, time, address, and reference number.

Scheduling is provided by Example Scheduler. If it does not load, call (555) 014-0186, Monday–Friday, 8:00 a.m.–6:00 p.m.
{{< /booking-block >}}

El renderizador de Hugo genera contenido estable y alternativa en el servidor, luego carga el proveedor en una región etiquetada.

Bloque de WordPress

<!-- wp:amicited/booking-block {"id":"dishwasher-repair","service":"Dishwasher diagnosis","variant":"inline","duration":"PT1H","location":"northside","timezone":"America/Chicago","provider":"Example Scheduler","src":"https://scheduler.example.com/northside/dishwasher","ctaLabel":"Choose an appointment time","confirmationMode":"instant","fallbackPhone":"+15550140186"} -->
<h2>Book an appliance repair visit</h2>
<p>Choose a 60-minute dishwasher diagnosis at our Northside branch.</p>
<p>Available for homes within the Northside service area. A diagnostic fee may apply and will be confirmed before the visit.</p>
<p>Your appointment is confirmed only when you receive an email with the date, time, address, and reference number.</p>
<p>Scheduling is provided by Example Scheduler. If it does not load, call <a href="tel:+15550140186">(555) 014-0186</a>, Monday–Friday, 8:00 a.m.–6:00 p.m.</p>
<!-- /wp:amicited/booking-block -->

El bloque registrado renderiza contenido estable mediante PHP y trata el código del proveedor como mejora progresiva.

Ejemplos

Bueno: una cita con ruta recuperable

Reservar una revisión de documentos fiscales de 30 minutos

El bloque nombra la sucursal del centro, la zona horaria local, los documentos a llevar y el hecho de que la reunión revisa registros pero no garantiza la elegibilidad para la declaración. El botón “Elegir hora de revisión” abre un calendario. Debajo, la página dice que la confirmación llega por correo electrónico y proporciona un número de teléfono supervisado con horario de atención por si el proveedor no está disponible.

Esto funciona porque la adecuación es clara antes de la introducción de datos y el significado sobrevive sin el calendario. El programador gestiona la disponibilidad; la página gestiona la verdad duradera del servicio y la recuperación.

Malo: un iframe sin contexto

Reservar ahora
Un iframe sin etiquetar carga un calendario del proveedor. Faltan la sucursal, zona horaria, tipo de cita, duración, tarifa, elegibilidad, estado de confirmación y contacto alternativo.

La versión mala obliga a los lectores y extractores a inferir la oferta desde la interfaz de usuario de terceros. Una interrupción deja una sección vacía, y una solicitud puede confundirse con una confirmación. Repáralo con un contrato de cita en HTML, inserción etiquetada, selecciones preservadas, redacción de confirmación y alternativa.

Marcado schema y accesibilidad

Un bloque de reserva no crea un requisito automático de schema. La página contenedora ya puede describir un negocio o servicio visible con una entidad LocalBusiness, un tipo de negocio más específico, Organization o Service adecuados. Mantén esos datos coherentes con el texto de reserva, especialmente nombre, ubicación, número de teléfono, área de servicio y horario.

ReserveAction puede representar una acción de reserva genuina cuando su destino abre la ruta visible y funcional, y la acción pertenece con precisión a la entidad descrita. No debe implicar que hay una franja disponible, que una solicitud está confirmada o que todo visitante es elegible. No publiques fechas de cita como Event, trates el horario de apertura ordinario como inventario reservable ni fabriques valores estructurados que la página y el sistema de programación no puedan verificar.

La accesibilidad comienza antes de la carga. Usa un encabezado real y una acción cuyo nombre accesible incluya el propósito. Dale a un iframe un title específico, como “Elige una cita de reparación de lavavajillas en Northside”. Nunca uses texto de marcador de posición como única etiqueta de campo.

Los usuarios de teclado deben poder entrar, operar y salir sin una trampa de foco. Un diálogo necesita un nombre, foco inicial, acción de Cerrar, aislamiento del fondo y retorno del foco. La validación identifica el campo y la corrección. Los estados de fecha no pueden depender del color, y las actualizaciones de estado deben ser anunciadas.

Mantén la alternativa en el orden de lectura normal y visible sin JavaScript. El flujo debe funcionar al 200% de zoom y en anchos reducidos. Muestra la zona horaria y evita fechas numéricas ambiguas.

Si el proveedor falla en los requisitos de teclado, lector de pantalla, contraste, privacidad o recuperación, ofrece una ruta asistida equivalente. CAPTCHA, pago y verificación de identidad también necesitan recuperación accesible.

Reglas de redacción

• Escribe un título de 3–10 palabras que combine una acción con la cita: “Reservar una prueba auditiva”, no “Programar” ni “Comenzar”.
• Escribe un resumen de 12–35 palabras que nombre el servicio, formato, duración y ubicación cuando esos datos se conozcan.
• Indica no más de cinco condiciones de elegibilidad o preparación. Resume solo las reglas que cambian decisiones de políticas más extensas.
• Usa etiquetas de acción específicas de 2–8 palabras: “Elegir hora de consulta”, “Solicitar visita a domicilio” o “Llamar para concertar una evaluación”. Evita “Enviar”, “Continuar” y “Hacer clic aquí”.
• Distingue entre confirmación instantánea y solicitud de cita. Nunca uses “reservado” cuando aún se requiera la aprobación del personal.
• Indica la zona horaria siempre que los lectores puedan reservar a través de zonas o la cita sea remota. Usa una fecha escrita sin ambigüedad en las confirmaciones.
• Describe las tarifas antes de que el lector seleccione una hora cuando pueda aplicarse un cargo por reserva, depósito, cancelación, diagnóstico o inasistencia. No ocultes un pago requerido dentro de los pasos del proveedor.
• Mantén el nombre del servicio, duración, ubicación, elegibilidad, preparación esencial, comportamiento de confirmación y alternativa fuera del iframe o la aplicación del lado del cliente.
• Nombra al proveedor antes de la transferencia de datos y explica la transferencia sin prometer un comportamiento de privacidad no compatible.
• Proporciona la ruta alternativa, el horario de atención, la expectativa de respuesta y el contexto de la cita a proporcionar.
• Para reservas con múltiples ubicaciones, nombra la sucursal seleccionada en el activador, el programador y la confirmación. Nunca reutilices un enlace organizacional “Reservar ahora” sin preseleccionar o requerir una elección de ubicación explícita.
• Mantén las instrucciones de emergencia, consejos clínicos, garantías, testimonios, cuentas regresivas de descuento, ofertas no relacionadas y un segundo formulario de contacto fuera del bloque de reserva.
• No escribas afirmaciones estáticas de “próxima disponible” a menos que se generen a partir del inventario en vivo y estén etiquetadas con una hora de recuperación. La disponibilidad puede cambiar entre el rastreo, el clic y la confirmación.
• Asigna un propietario y revisa tras cambios en horarios, ubicaciones, tarifas, elegibilidad, comportamiento del proveedor o política de admisión.

Tipos de página que lo usan

La matriz postTypes en el frontmatter impulsa esta matriz. La inclusión significa que la página puede usar un bloque de reserva cuando existe una acción de cita real; no requiere programación en cada página.

Lista de verificación de QA

• El bloque programa o solicita una cita definida en lugar de recopilar una consulta general.
• El título visible nombra la cita y la etiqueta de acción describe el siguiente paso de programación.
• El servicio, duración, ubicación o área de servicio, zona horaria, elegibilidad y condiciones de tarifa relevantes son precisos.
• Los datos estables de la cita se renderizan como HTML sin depender del proveedor, iframe, gestor de consentimiento ni JavaScript.
• La disponibilidad en vivo proviene del sistema de programación autorizado y no se copia en texto estático.
• El servicio y la ubicación seleccionados persisten desde el activador hasta el calendario, validación, confirmación y recuperación.
• La página distingue una confirmación instantánea de una solicitud que el personal debe aprobar.
• Un proveedor externo se identifica antes de la transferencia de datos, y la redacción de privacidad coincide con el flujo real.
• Los estados de fallo, sin disponibilidad, validación, cancelación y reprogramación proporcionan cada uno una siguiente acción útil.
• Un teléfono alternativo supervisado o una ruta alternativa accesible permanece visible cuando el widget falla.
• Las instrucciones alternativas incluyen horario de atención o una expectativa de respuesta realista.
• El programador tiene un nombre accesible específico y funciona con teclado, lector de pantalla, táctil, zoom y pantallas estrechas.
• El foco entra y sale de cualquier diálogo de forma predecible, y la validación no borra elecciones previamente válidas.
• Las fechas y horas no son ambiguas, incluyen la zona horaria relevante y no dependen solo del color.
• Las limitaciones de emergencia o consecuentes aparecen antes de la acción y nunca dependen del programador.
• No hay un programador en competencia, formulario de contacto, cuenta regresiva ni promoción no relacionada junto a la acción principal.
• Los datos estructurados reflejan datos verificados y visibles del negocio y servicio sin inventar disponibilidad ni confirmación.
• El tipo de página seleccionado aparece en postTypes, y la colocación sigue la matriz anterior.
• Existen un propietario y un desencadenante de revisión para el contenido, el contacto alternativo, la integración del proveedor y el comportamiento de confirmación.

FAQ

¿Puede un widget de reserva ser la única información de citas en una página?

No. Un widget de terceros puede fallar, requerir consentimiento, bloquear rastreadores o no ser utilizable con algunas tecnologías de asistencia. Mantén el servicio, la ubicación, la elegibilidad, la preparación, la ruta de contacto y las instrucciones alternativas en HTML renderizado en el servidor fuera del widget.

¿Debería abrirse el programador en la página o en el sitio web del proveedor?

Usa un programador en línea o modal cuando sea accesible, rápido y fácil de recuperar. Usa un enlace externo claramente etiquetado cuando el proveedor funcione de manera más confiable en su propio dominio. En cualquier caso, preserva el mismo contexto rastreable y una alternativa sin widget en la página.

¿Necesita un bloque de reserva marcado de schema?

No automáticamente. La página circundante puede calificar para LocalBusiness, Service u otro tipo relevante. Añade ReserveAction solo cuando el destino de la acción sea real, estable y represente con precisión la ruta de reserva visible; nunca inventes disponibilidad de citas en vivo en datos estructurados.

¿Cómo debería gestionar la reserva una empresa con múltiples ubicaciones?

Haz explícita la ubicación antes de que el lector entre en el flujo de programación, preserva la ubicación elegida en cada paso y muestra su dirección, zona horaria y datos de contacto alternativos en HTML. Nunca envíes cada página de sucursal a un calendario organizacional sin filtrar.

¿Qué debería suceder cuando no hay citas disponibles?

Explica la siguiente ruta válida sin dar a entender que el negocio está cerrado: ofrece otra ubicación, lista de espera, número de teléfono, formulario de solicitud o una fecha clara para volver a consultar. Preserva el servicio y la ubicación seleccionados para que el lector no tenga que reiniciar.