Este artículo también está disponible en:

🎨 Appointment Bookings — Opciones de personalización

ℹ️ Note: Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.


Hoppy Appointments te da control sobre casi todos los aspectos de la experiencia de reserva, desde los colores y las fuentes hasta los idiomas, los correos electrónicos, las preguntas y el comportamiento después de la reserva. Algunas personalizaciones se aplican a toda tu tienda, mientras que otras se configuran por servicio.


Esta guía muestra todas las áreas de personalización y explica dónde se encuentra cada una. Para ver los pasos de configuración detallados, consulta los artículos de ayuda vinculados en cada sección.



🌍 Áreas de personalización globales


Estas configuraciones se administran desde Settings (Configuración) y se aplican a toda tu tienda de forma predeterminada.


Diseño y estilo


Ve a Settings (Configuración) → Default Design (Diseño predeterminado) para definir la apariencia predeterminada del widget de reservas.


Puedes personalizar:


  • Fuentes y colores
  • Fondos, tarjetas y estilos de texto
  • Colores de la fecha y la franja horaria seleccionadas
  • Estilos de los botones Confirmar, Volver y Continuar
  • Estilos de las páginas de éxito, reprogramación y cancelación
  • Custom CSS (CSS personalizado)


Estos valores predeterminados los usa cada servicio a menos que un servicio los sobrescriba.


Para más detalles, consulta Appointment Bookings — Opciones de diseño y estilo y Cómo configurar CSS personalizado para la aplicación Appointment Bookings.


Traducciones


Ve a Settings (Configuración) → Translations (Traducciones) para administrar el idioma y el texto.


Puedes personalizar:


  • Idioma predeterminado
  • Soporte multilingüe
  • Texto del calendario, etiquetas del formulario, texto de los botones, mensajes de estado
  • Etiquetas de bloques de correo electrónico
  • Títulos, descripciones y etiquetas específicos del servicio


Para más detalles, consulta Appointment Bookings — Traducción.


Notificaciones por correo electrónico


Ve a Settings (Configuración) → Email Settings (Configuración de correo) para controlar la apariencia de los correos y cuándo se envían.


Puedes personalizar:


  • Nombre del remitente, dirección de respuesta y logo
  • Plantillas de correo para confirmaciones, recordatorios, actualizaciones y cancelaciones
  • Variables dinámicas y bloques de contenido prediseñados
  • Qué eventos activan los correos para clientes y administradores


Para más detalles, consulta Cómo configurar las notificaciones por correo electrónico para Appointment Bookings.


Análisis y seguimiento


Ve a Settings (Configuración) → Analytics & Tracking (Análisis y seguimiento) para conectar el seguimiento de terceros.


Puedes configurar:


  • Google Analytics 4
  • Meta Pixel y Conversions API
  • Google Tag Manager


Para más detalles, consulta Configurar el seguimiento de Google Analytics 4 para Appointment Bookings y Configurar el Meta Pixel para Appointment Bookings.


Preferencias generales


Ve a Settings (Configuración) → General (General) para los valores predeterminados del calendario y el comportamiento de las reservas.


Puedes personalizar:


  • Primer día de la semana
  • Si se muestran las horas de finalización
  • Límites globales de reservas por día o por franja horaria
  • Fechas bloqueadas y descansos
  • Comportamiento de reembolsos y cancelaciones de pedidos



⚙️ Áreas de personalización por servicio


Estas configuraciones se administran dentro de cada servicio y te permiten ajustar las experiencias de reserva individuales.


Pestaña General


  • Booking page title and description (Título y descripción de la página de reserva): lo que los clientes ven en la parte superior del widget
  • Meeting location (Ubicación de la reunión): elige entre videollamadas, teléfono, presencial o ubicaciones personalizadas
  • Custom contact questions (Preguntas de contacto personalizadas): añade campos adicionales al formulario de reserva, como teléfono, dirección, listas desplegables, carga de archivos o valoraciones
  • Floating Action Button (Botón de acción flotante): añade un botón persistente “Book Now” (Reservar ahora) en toda tu tienda


Para más detalles, consulta Cómo configurar las ubicaciones de reuniones para Appointment Bookings, Cómo configurar el Floating Action Button como Calendly para Appointment Bookings y Cómo configurar los servicios de Appointment Bookings.


Pestaña Design


Usa la pestaña Design (Diseño) para sobrescribir el diseño global de este servicio.


  • Activa Do not Follow Default Theme Settings (No seguir la configuración de tema predeterminada) para desbloquear los controles de diseño por servicio
  • Personaliza colores, fuentes e imágenes
  • Sube un Custom logo (logo personalizado) para este servicio
  • Añade Custom CSS (CSS personalizado) que se aplique solo a este servicio


Para más detalles, consulta Appointment Bookings — Opciones de diseño y estilo y Cómo configurar CSS personalizado para la aplicación Appointment Bookings.


Pestaña Availability


  • Define horarios de disponibilidad semanales o por fecha específica
  • Configura límites de reservas por día o por franja horaria
  • Asigna compañeros de equipo y define disponibilidad por compañero


Para más detalles, consulta Cómo configurar los servicios de Appointment Bookings y Trabajar con equipo en Appointment Bookings.


Pestaña Payment


  • Elige entre Pay to Book (Pagar para reservar) y Book without pay (Reservar sin pagar)
  • Habilita la aprobación manual de las reservas
  • Configura el comportamiento de la lista de espera
  • Configura pagos parciales o depósitos


Para más detalles, consulta Appointment Bookings — Todas las opciones de pago explicadas y Cómo configurar la lista de espera para Appointment Bookings.


Pestaña Advanced


  • Habilita Advanced Configuration (Configuración avanzada) para usar traducciones por servicio
  • Añade Booking Terms (Términos de reserva) con una casilla de verificación obligatoria
  • Configura un Redirect after booking (Redireccionamiento después de la reserva) para las reservas gratuitas
  • Configura Booking options (Opciones de reserva), como mensajes de confirmación personalizados y plazos de aviso para reprogramar o cancelar
  • Habilita un Trigger Event (Evento desencadenante) para abrir el modal de reserva cuando se haga clic en un banner creado con Hoppy Banner.


Para más detalles, consulta Appointment Bookings — Opciones avanzadas y Cómo reprograman o cancelan las citas los clientes.



🔄 Precedencia global vs. por servicio


Algunas configuraciones se pueden definir en ambos lugares. Así es como interactúan.


Diseño y CSS personalizado


De forma predeterminada, cada servicio sigue el diseño global de Settings (Configuración) → Design (Diseño).


Para usar un diseño personalizado en un servicio:


  1. Abre la pestaña Design (Diseño) del servicio
  2. Habilita Do not Follow Default Theme Settings (No seguir la configuración de tema predeterminada)
  3. Personaliza colores, fuentes, logo y CSS


Ese servicio ignorará entonces el diseño global y usará su propia configuración.


Traducciones


De forma predeterminada, los servicios usan las traducciones globales del calendario de Settings (Configuración) → Translations (Traducciones) → Calendar Translations (Traducciones del calendario).


Para usar traducciones específicas del servicio:


  1. Abre la pestaña Advanced (Avanzada) del servicio
  2. Habilita Advanced Configuration (Configuración avanzada)
  3. Configura las traducciones en Settings (Configuración) → Translations (Traducciones) → Service Translations (Traducciones por servicio)


Plantillas de correo electrónico


Las plantillas de correo electrónico son globales. Sin embargo, puedes insertar contenido por servicio usando bloques dinámicos:


  • [Custom service text] (Texto personalizado del servicio): extrae el mensaje de confirmación de reserva personalizado del servicio
  • [Ticket QR Code] (Código QR del ticket): aparece si el servicio tiene habilitados los tickets con código QR


Límites de reservas


Los límites globales de reservas en Settings (Configuración) → General (General) pueden sobrescribir los límites a nivel de servicio. Un banner en la interfaz advierte cuando esto ocurre.



✅ Orden de personalización sugerido


Si estás configurando Hoppy Appointments por primera vez, sigue este orden:


  1. Establece los valores de diseño globales en Settings (Configuración) → Design (Diseño)
  2. Configura las traducciones en Settings (Configuración) → Translations (Traducciones) si ofreces soporte en varios idiomas
  3. Configura las notificaciones por correo electrónico en Settings (Configuración) → Email Settings (Configuración de correo)
  4. Configura el análisis en Settings (Configuración) → Analytics & Tracking (Análisis y seguimiento), si es necesario
  5. Crea tus servicios y sobrescribe el diseño solo donde sea necesario
  6. Añade personalizaciones por servicio, como preguntas de contacto, ubicaciones de reuniones, FAB y términos de reserva
  7. Prueba el widget de la tienda y refina el estilo o las traducciones



⚠️ Notas importantes


  • Comienza con la configuración global. Ahorra tiempo y mantiene la experiencia de reserva coherente.
  • Sobrescribe por servicio solo cuando sea necesario. La mayoría de los comerciantes solo necesitan un diseño por servicio para campañas especiales o servicios con marca propia.
  • El logo personalizado es solo por servicio. No hay una configuración de logo global.
  • Las plantillas de correo electrónico son globales. Usa el bloque de texto personalizado del servicio para insertar contenido por servicio.
  • El Floating Action Button y la ubicación de la reunión son por servicio. Configúralos por separado para cada servicio.
  • Los límites de reservas pueden sobrescribirse globalmente. Revisa Settings (Configuración) → General (General) si los límites a nivel de servicio no se comportan como esperas.



📚 Artículos relacionados


  • Appointment Bookings — Opciones de diseño y estilo
  • Cómo configurar CSS personalizado para la aplicación Appointment Bookings
  • Appointment Bookings — Traducción
  • Cómo configurar las notificaciones por correo electrónico para Appointment Bookings
  • Cómo configurar las ubicaciones de reuniones para Appointment Bookings
  • Cómo configurar el Floating Action Button como Calendly para Appointment Bookings
  • Appointment Bookings — Opciones avanzadas
  • Cómo reprograman o cancelan las citas los clientes
  • Appointment Bookings — Todas las opciones de pago explicadas
  • Cómo configurar la lista de espera para Appointment Bookings
  • Trabajar con equipo en Appointment Bookings
  • Cómo configurar los servicios de Appointment Bookings
  • Configurar el seguimiento de Google Analytics 4 para Appointment Bookings
  • Configurar el Meta Pixel para Appointment Bookings

Actualizado el: 10/09/2026

¿Este artículo te resultó útil?

Comparte tu opinión

Cancelar

¡Gracias!