# Reservas en tu web · Be Schedule

Fuente: https://squedule.begraffic.com/docs

- Primeros pasos: [Introducción](https://squedule.begraffic.com/docs#introduccion), [Instalación](https://squedule.begraffic.com/docs#instalacion), [Dónde pegarlo](https://squedule.begraffic.com/docs#plataformas)
- Personalización: [Opciones del script](https://squedule.begraffic.com/docs#opciones), [Tus propios botones](https://squedule.begraffic.com/docs#botones), [Abrir desde JavaScript](https://squedule.begraffic.com/docs#javascript)
- Eventos y medición: [Eventos](https://squedule.begraffic.com/docs#eventos), [Medir reservas](https://squedule.begraffic.com/docs#analitica)
- Ayuda: [Privacidad y seguridad](https://squedule.begraffic.com/docs#seguridad), [Solución de problemas](https://squedule.begraffic.com/docs#problemas)

## Introducción

Con una línea de código, tus clientes reservan desde tu propia web sin salir de ella: el mismo proceso de tu página de Be Schedule (servicio, profesional, día y hora, pago y confirmación) se abre en una ventana sobre tu web.

| Qué puedes hacer | Cómo |
| --- | --- |
| Mostrar un botón flotante «Reservar cita» en toda tu web | [Instalación](https://squedule.begraffic.com/docs#instalacion) |
| Cambiar el color, el texto o la posición del botón | [Opciones del script](https://squedule.begraffic.com/docs#opciones) |
| Abrir la reserva desde tus propios botones o enlaces | [Tus propios botones](https://squedule.begraffic.com/docs#botones) |
| Abrir la reserva con un servicio ya elegido | [Tus propios botones](https://squedule.begraffic.com/docs#botones) |
| Abrir la reserva desde tu código | [Abrir desde JavaScript](https://squedule.begraffic.com/docs#javascript) |
| Medir las reservas en Google Analytics, GTM o Meta | [Medir reservas](https://squedule.begraffic.com/docs#analitica) |

> **Antes de empezar** — Tu página de Be Schedule tiene que estar **publicada** (Panel > Página web > Publicar). La ventana de reserva usa los mismos servicios, horarios, equipo y formas de pago que ya configuraste: no hay nada más que preparar.

## Instalación

### 1. Busca el identificador de tu negocio

Entra en **Panel > Página web**. La dirección de tu página es `squedule.begraffic.com/n/tu-negocio`: la última parte (`tu-negocio`) es el identificador que vas a usar.

### 2. Pega el script en tu web

Copia esta línea, cambia `tu-negocio` por tu identificador y pégala justo antes de la etiqueta `</body>` de tu web:

```html
<script src="https://squedule.begraffic.com/embed.js"
        data-negocio="tu-negocio" async></script>
```

Al recargar tu web verás el botón «Reservar cita» abajo a la derecha. Al pulsarlo se abre la ventana de reserva; al terminar o cerrarla, tu cliente sigue en tu web.

> **Una vez por página** — Si tu web usa una plantilla común (cabecera y pie compartidos), pega el script en el pie de la plantilla y aparecerá en todas las páginas. No hace falta pegarlo dos veces.

## Dónde pegarlo

Funciona en cualquier web que permita añadir código HTML. Los menús cambian según la versión y el plan de cada plataforma; estos son los habituales:

| Plataforma | Dónde pegar el script |
| --- | --- |
| WordPress | Con un plugin de código (por ejemplo, WPCode): Fragmentos de código > Cabecera y pie > Pie. O en el editor del tema, en `footer.php`, antes de `</body>`. |
| Wix | Configuración > Código personalizado > Añadir código: elige «Body - final» y «Todas las páginas». Requiere un plan Premium. |
| Squarespace | Configuración > Avanzado > Inserción de código > Pie de página. Depende del plan. |
| Shopify | Tienda online > Temas > Editar código > `theme.liquid`, antes de `</body>`. |
| Webflow | Ajustes del sitio > Código personalizado > Código del pie. Publica de nuevo el sitio. |
| Web propia (HTML, React, Next.js…) | Antes de `</body>` en tu plantilla. En aplicaciones de una sola página, carga el script una vez (ver [Abrir desde JavaScript](https://squedule.begraffic.com/docs#javascript)). |

### Sin código: enlace directo

Si tu plataforma no permite scripts (o para redes sociales, Google Business o Linktree), usa el enlace de tu página: `https://squedule.begraffic.com/n/tu-negocio`. Abre tu página de Be Schedule con el botón de reservar.

## Opciones del script

Ajusta el botón flotante con atributos en la misma etiqueta `<script>`:

| Atributo | Valores | Para qué sirve |
| --- | --- | --- |
| `data-negocio` | Tu identificador | **Obligatorio.** El negocio cuya reserva se abre. |
| `data-color` | Color en hexadecimal (`#7B2D6E` por defecto) | Color del botón flotante. Usa el de tu marca. |
| `data-texto` | Texto (`Reservar cita` por defecto) | Texto del botón flotante. |
| `data-posicion` | `left` | Pone el botón abajo a la izquierda (por defecto, a la derecha). |
| `data-boton` | `false` | Oculta el botón flotante: la reserva se abre solo desde tus botones. |

Por ejemplo, un botón de otro color, a la izquierda, que dice «Pide tu cita»:

```html
<script src="https://squedule.begraffic.com/embed.js"
        data-negocio="tu-negocio"
        data-color="#46143E"
        data-texto="Pide tu cita"
        data-posicion="left" async></script>
```

> **¿Tienes un botón de WhatsApp flotante?** — Si ya ocupa la esquina derecha, usa `data-posicion="left"` para que no se tapen.

## Tus propios botones

Cualquier botón o enlace de tu web abre la reserva si le añades `data-be-open`. Funciona también con elementos que tu web añade más tarde.

```html
<button data-be-open>Reservar ahora</button>

<a href="#" data-be-open>Pide tu cita</a>
```

### Con un servicio ya elegido

Añade `data-servicio` con el nombre del servicio tal como aparece en **Panel > Servicios** (no distingue mayúsculas). La reserva empieza con ese servicio elegido y se salta ese paso.

```html
<button data-be-open data-servicio="Corte y peinado">Reservar corte</button>
```

### Varios negocios en la misma web

Con `data-negocio` en el botón se abre la reserva de otro negocio (por ejemplo, cada sede de una cadena):

```html
<button data-be-open data-negocio="mi-salon-centro">Sede Centro</button>
<button data-be-open data-negocio="mi-salon-norte">Sede Norte</button>
```

> **Solo tus botones** — Si no quieres el botón flotante, añade `data-boton="false"` al script y usa solo `data-be-open`.

## Abrir desde JavaScript

El script expone `window.BeSchedule` para abrir y cerrar la reserva desde tu código:

| Función | Qué hace |
| --- | --- |
| `BeSchedule.open()` | Abre la reserva del negocio de `data-negocio`. |
| `BeSchedule.open({ servicio, negocio })` | Abre con un servicio ya elegido y, si quieres, de otro negocio. Las dos opciones son opcionales. |
| `BeSchedule.close()` | Cierra la ventana de reserva. |

```js
document.querySelector("#reservar").addEventListener("click", () => {
  window.BeSchedule.open({ servicio: "Manicura" });
});
```

### React y Next.js

Carga el script una sola vez (en el layout) y llama a `BeSchedule.open` desde tus componentes:

```js
// app/layout.tsx
import Script from "next/script";

<Script src="https://squedule.begraffic.com/embed.js" data-negocio="tu-negocio" strategy="afterInteractive" />

// En cualquier componente
<button onClick={() => window.BeSchedule?.open()}>Reservar</button>
```

## Eventos

Tu web recibe eventos en `document` para reaccionar a lo que pasa en la reserva:

| Evento | Cuándo | Datos (`event.detail`) |
| --- | --- | --- |
| `be:open` | Se abre la ventana de reserva. | `negocio`, `servicio` (o `null`) |
| `be:booked` | El cliente confirma su reserva. | `negocio`, `booking` |
| `be:close` | Se cierra la ventana (al terminar o sin reservar). | `negocio` |

`booking` trae los datos de la reserva confirmada:

| Campo | Ejemplo | Qué es |
| --- | --- | --- |
| `id` | `IpSOfjTdSKSMSq2Pqz6S` | Identificador de la cita. |
| `service` | `Corte y peinado` | Servicio reservado. |
| `start` | `2026-10-06T14:00:00.000Z` | Inicio de la cita (fecha ISO en UTC). |
| `total` | `2200` | Importe total de la cita. |
| `paid` | `2200` | Lo pagado al reservar (`0` si paga en la cita). |

```js
document.addEventListener("be:booked", (event) => {
  const { negocio, booking } = event.detail;
  console.log("Reserva confirmada en", negocio, booking.service, booking.start);
});
```

## Medir reservas

Usa `be:booked` para registrar cada reserva como conversión en tus herramientas de medición.

### Google Tag Manager y Google Analytics 4

```js
document.addEventListener("be:booked", (event) => {
  const { booking } = event.detail;
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "reserva_confirmada",
    servicio: booking.service,
    valor: booking.total,
  });
});
```

En GTM, crea un activador de evento personalizado con el nombre `reserva_confirmada` y úsalo en tu etiqueta de GA4 o de conversión de Google Ads.

### Píxel de Meta

```js
document.addEventListener("be:booked", (event) => {
  window.fbq && window.fbq("track", "Schedule", { value: event.detail.booking.total });
});
```

> **Sin datos personales** — Los eventos no incluyen el nombre, el teléfono ni el correo del cliente: solo los datos de la cita. Así puedes medir sin compartir información personal con tus herramientas.

## Privacidad y seguridad

- La reserva se abre en una ventana segura de `squedule.begraffic.com` dentro de tu web: tu web no puede leer lo que escribe el cliente, y los datos de pago nunca pasan por ella.
- Los avisos de la reserva (`be:booked`) solo se envían a la web que abrió la ventana.
- La ventana no muestra su propio aviso de cookies y no usa cookies de analítica ni de publicidad: solo lo necesario para que el cliente inicie sesión y complete su reserva.
- Tu aviso de privacidad debe mencionar que las reservas las gestiona Be Schedule.

### Si tu web usa Content-Security-Policy

Permite el dominio de Be Schedule para el script y para la ventana:

```text
script-src https://squedule.begraffic.com;
frame-src https://squedule.begraffic.com;
```

## Solución de problemas

| Qué pasa | Qué revisar |
| --- | --- |
| No aparece el botón | Que el script esté en la página publicada, con `data-negocio`, y sin `data-boton="false"`. Si usas un plugin de caché, vacíala. Si tu web tiene Content-Security-Policy, revisa [Privacidad y seguridad](https://squedule.begraffic.com/docs#seguridad). |
| Sale «No pudimos abrir la reserva» | Que el identificador de `data-negocio` sea exactamente el de tu dirección y que tu página esté publicada. |
| El servicio no viene elegido | Que `data-servicio` tenga el nombre exacto del servicio y que el servicio esté visible en tu página. |
| El botón tapa otro botón flotante | Usa `data-posicion="left"` o quita el botón flotante con `data-boton="false"` y usa tus propios botones. |
| Quiero probar sin publicar mi web | Abre `https://squedule.begraffic.com/n/tu-negocio/reservar`: muestra una web de ejemplo con el botón y tu código listo para copiar. |

¿Sigues con dudas? Escríbenos desde **Panel > Configuración** y te ayudamos con la instalación.