Todo en una pantalla
Personas, fecha y hora van una debajo de otra y se pliegan en cuanto se rellenan. El cliente ve al momento lo que ha elegido y puede cambiarlo. Por eso hay el mínimo de pantallas entre un clic y una mesa.
Un fragmento de código en tu web
Pega este código en tu web y aparecerá un botón de reserva, con la forma y los colores que elijas en Servetta. No hace falta rehacer tu web. ¿Tu web la lleva otra persona? Reenvíale esta página o mándale desde Servetta las instrucciones con tu propio código.
<script
src="https://widget.servetta.online/w.js"
data-servetta-venue="pk_live_000000000000000000000000"
defer
></script>- Pega el script en tu páginaPonlo una vez en cada página donde deba estar el botón, justo antes del cierre del body. El script se carga después de tu página y no la frena.
- O ponlo en tu propio botón¿Ya tienes un botón o un enlace para reservar? Ponle data-couvert-open y abrirá el flujo de reserva. Entonces no dibujamos nuestro propio botón en la esquina.
- No hace falta nada másEl flujo de reserva solo se carga cuando alguien hace clic en el botón. Hasta entonces tu visitante casi no lo nota.
<script
src="https://widget.servetta.online/w.js"
data-servetta-venue="pk_live_000000000000000000000000"
defer
></script>
<button data-servetta-action="reserve">Reserva una mesa</button>Tu clave pública
El código de arriba lleva una clave de ejemplo. La tuya empieza por pk_live_ y pertenece a un solo restaurante. Si tienes dos locales, tienes dos claves. Tu código está en Servetta, en Ajustes → Widget de reservas → Instalación. Allí encuentras también instrucciones para cada plataforma web, un botón que se lo envía todo por correo a tu desarrollador web y un enlace de reserva por si no se puede añadir código a tu web.
Pídenos ayuda por correoDos disposiciones, la misma reserva
Tú eliges cómo hace sus preguntas la ventana. Las dos formas preguntan lo mismo y dan la misma reserva. Cambias de una a otra con un clic en tus ajustes, sin tocar tu web.
Una pregunta por pantalla
Una pregunta cada vez, con una barra de progreso arriba y una pantalla «¿Es correcto?» antes del formulario. Va bien en un móvil pequeño y los botones son más grandes. Tus clientes ya conocen esta forma de otros sistemas de reservas.
Lo que puedes pasarle
Pon un atributo en el elemento del script y todos los botones de la página lo heredan. Pon el mismo atributo en un botón concreto y gana ese botón. Un valor vacío cuenta como no puesto.
| Atributo | Dónde | Si no indicas nada | Qué hace |
|---|---|---|---|
data-servetta-venue | Script o botón | Obligatorio | La clave pública de tu restaurante. Sin clave no pasa nada, mira más abajo. |
data-servetta-action | En el botón | El botón lo dibujamos nosotros | Ponlo en tu propio botón y abrirá la pantalla que indiques: reserve para reservar, gift para tarjetas regalo, open para lo mismo que reserve y close para cerrar. También funciona en botones que aparecen más tarde en la página. |
data-servetta-open | En el botón | El botón lo dibujamos nosotros | Marca tu propio elemento como el que abre el flujo de reserva. No necesita ningún valor. Si esto está en algún sitio de la página, no dibujamos ningún botón nuestro. |
data-servetta-trigger | Script o botón | En la esquina inferior de la pantalla | Ponlo en un elemento vacío y dibujamos nuestro botón justo ahí, en lugar de en la esquina inferior. En el elemento del script, el valor none significa que no dibujamos ningún botón. |
data-servetta-locale | Script o botón | El idioma de tu visitante, si no el de tu restaurante | El idioma del flujo de reserva: nl, en, de, fr o es. Cualquier otro valor se ignora. |
data-servetta-party | Script o botón | Lo elige el comensal | El número de personas con el que se abre el flujo. Un número entero a partir de 1. Cualquier otra cosa se ignora. |
data-servetta-date | Script o botón | Lo elige el comensal | La fecha con la que se abre el flujo, escrita como 2026-09-12. Escrita de otra forma se ignora. |
data-servetta-time | Script o botón | Lo elige el comensal | La hora con la que se abre el flujo, escrita como 19:30 en formato de 24 horas. Escrita de otra forma se ignora. |
data-servetta-area | Script o botón | Lo elige el comensal | El id de una zona de tu plano de sala, por ejemplo tu terraza. Útil bajo una foto de esa terraza. |
data-couvert-bound lo pone el propio cargador en cada botón que ya conoce. Ese atributo es del cargador, así que no lo toques.
Medir lo que pasa
El widget dispara eventos normales del navegador. Escúchalos con tu propio JavaScript o con una etiqueta HTML personalizada en Google Tag Manager. Nunca dicen nada sobre el comensal: ni nombre, ni correo, ni teléfono.
<script>
window.addEventListener('servetta:reservation-completed', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ event: 'servetta_reservation' });
});
</script>| Evento | Cuándo |
|---|---|
servetta:loaded | El script se ha cargado y el botón está en la página. |
servetta:opened | Alguien ha abierto el widget. |
servetta:closed | El widget se ha vuelto a cerrar. |
servetta:reservation-started | El comensal ha llegado al formulario de reserva. |
servetta:reservation-completed | La reserva ha salido bien. |
servetta:gift-opened | Alguien ha empezado a comprar una tarjeta regalo. |
servetta:gift-completed | La tarjeta regalo se ha pagado. |
servetta:error | Algo ha salido mal. En detail.reason se indica brevemente qué. |
Dos cosas que no te esperas
Sin clave, sin flujo
Si no hay ningún data-couvert-venue en ninguna parte, el cargador deja el clic en paz: un enlace sigue navegando y un botón sigue haciendo lo que hacía. Una ventana que se abre vacía es peor que un botón que aún funciona.
Los botones que aparecen después también cuentan
El cargador sigue vigilando tu página. Un botón que solo aparece después de la carga (en una web con React, bajo un aviso de cookies, en un pie que carga tarde) se detecta igualmente.