Reservas en tu sitio web (embed)

Con el embed, el cliente elige el servicio y el horario y confirma la reserva sin salir de tu sitio. Pega una línea de código en la página: el script embed.js monta la reserva en un iframe seguro, servido por https://calendar.sendeasy.app.

La forma más rápida es generar el código en el panel: Calendario → Página pública → Compartir. Ahí eliges el calendario, el servicio, el formato, el color y la campaña, copias el código listo y ves una vista previa.

Requisitos

Las reservas en el sitio habilitadas para tu empresa.
Un calendario de horarios con tipos de evento (servicios) activos. Los calendarios de alojamiento no tienen embed: usa el enlace del calendario.
Tu sitio en https. Las páginas en http o abiertas como archivo local no pueden mostrar la reserva.

Instalación

Pega el código donde debe aparecer la reserva:

<script src="https://calendar.sendeasy.app/embed.js"
  data-sendeasy-calendar="TU_CALENDARIO"
  data-mode="inline"
  async></script>

TU_CALENDARIO es la dirección del calendario, la misma del enlace https://calendar.sendeasy.app/c/TU_CALENDARIO.

Para poner la reserva dentro de un elemento tuyo, marca el elemento y carga el script una vez en la página:

<div data-sendeasy-calendar="TU_CALENDARIO" data-type="consulta-30"></div>
<script src="https://calendar.sendeasy.app/embed.js" async></script>

Formatos

`data-mode`	Qué aparece
`inline` (predeterminado)	La reserva dentro de la página, justo después de la etiqueta (o dentro del elemento marcado). La altura sigue el contenido.
`popup`	Un botón donde está la etiqueta. El clic abre la reserva en una ventana sobre la página. En un elemento marcado que no sea `<script>`, el propio elemento se convierte en el botón.
`button`	Un botón flotante fijo en la esquina inferior derecha, que abre la misma ventana.

La ventana se cierra con la X, con Esc, con un clic fuera de ella o con el botón Cerrar de la confirmación.

Opciones

Name
data-sendeasy-calendar
Type
obligatorio
Description
Dirección del calendario (letras, números, ., _, ~ y -, hasta 190 caracteres).
Name
data-type
Type
opcional
Description
Dirección del servicio (tipo de evento), por ejemplo consulta-30. Abre directo en ese servicio, incluso uno oculto. Sin él, el cliente ve la lista.
Name
data-mode
Type
opcional
Description
inline, popup o button. Otro valor se convierte en inline.
Name
data-label
Type
opcional
Description
Texto del botón en los formatos popup y button, hasta 60 caracteres. Predeterminado: Agendar.
Name
data-color
Type
opcional
Description
Color del botón y de los destacados, en hexadecimal (#0f766e o #0a7).
Name
data-lang
Type
opcional
Description
Idioma de la reserva: pt, pt-BR, en, en-US, es o es-ES. Sin él, vale el idioma del navegador del visitante.
Name
data-utm-source, data-utm-medium, data-utm-campaign, data-utm-term, data-utm-content
Type
opcional
Description
Campaña de la reserva, hasta 200 caracteres cada una. La reserva ya queda marcada como proveniente del sitio (con el dominio, nunca la ruta de la página); las UTM ayudan a separar páginas o acciones.

Los valores fuera de formato se ignoran. Ningún valor se convierte en HTML: el texto del botón entra como texto plano.

API JavaScript

<button type="button" id="reservar">Reservar</button>
<script src="https://calendar.sendeasy.app/embed.js" async></script>
<script>
  document.getElementById('reservar').addEventListener('click', function () {
    if (window.SendeasyCalendar) {
      window.SendeasyCalendar.open({ calendar: 'TU_CALENDARIO', type: 'consulta-30' })
    }
  })
</script>

window.SendeasyCalendar.open(opciones) abre la ventana y devuelve true (o false con un calendario inválido). Opciones: calendar (obligatorio), type, color, lang y utm ({ source, medium, campaign, term, content }).
window.SendeasyCalendar.close() cierra la ventana abierta.

Mensajes para tu sitio (postMessage v1)

{ "source": "sendeasy", "v": 1, "type": "..." }

`type`	Campos	Cuándo
`ready`		La reserva cargó.
`resize`	`height` (px, hasta 20000)	Cambió la altura del contenido. El `embed.js` ya ajusta el formato `inline`.
`slot_selected`	`date` (`AAAA-MM-DD`), `time` (`HH:mm`)	El cliente eligió un horario (fecha y hora locales del establecimiento).
`booking.created`	`code`, `status`, `startAt`	La reserva fue creada. `code` es el código de 8 caracteres (o `null`), `status` es `HOLD`, `PENDING_PAYMENT`, `AWAITING_APPROVAL`, `CONFIRMED` o `CANCELLED`, y `startAt` es el inicio en ISO 8601 (UTC).
`booking.payment_required`	`code`	La reserva necesita pago; el botón de pago abre el checkout en una pestaña nueva.
`closed`		El cliente cerró la reserva (Esc o Cerrar), en los formatos `popup` y `button`.

Los mensajes no llevan datos personales y la reserva no acepta mensajes de tu página. Revisa siempre el origen:

window.addEventListener('message', function (event) {
  if (event.origin !== 'https://calendar.sendeasy.app') return
  var data = event.data
  if (!data || data.source !== 'sendeasy' || data.v !== 1) return
  if (data.type === 'booking.created') {
    gtag('event', 'reserva_creada', { status: data.status })
  }
})

CSP de tu sitio

Si tu sitio envía Content-Security-Policy, permite el dominio del calendario para el script y para el iframe:

Content-Security-Policy: script-src 'self' https://calendar.sendeasy.app; frame-src https://calendar.sendeasy.app

Para fijar una versión con Subresource Integrity, lee la versión y el hash en los encabezados de curl -sI https://calendar.sendeasy.app/embed.js (los X-Sendeasy-Embed-*) y usa embed.js?v=VERSION con integrity="sha384-HASH" y crossorigin="anonymous".

Límites

El pago siempre se abre en la pestaña principal, en una pestaña nueva, fuera de tu sitio. El checkout y los enlaces de gestión nunca se muestran dentro de un iframe.
Solo sitios https y calendarios de horarios con tipos de evento.
El iframe no guarda nada entre visitas.
La página dentro del iframe no se indexa. Para aparecer en Google, usa la Página pública y el Perfil de Empresa en Google.