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.
Una línea en tu propia web
El botón de reserva de Servetta es un script. El botón lo dibujamos nosotros, con la forma y los colores que elijas en tus ajustes. Sin plugin, sin un iframe que tengas que ajustar, y sin que nadie tenga que rehacer tu web.
<script
src="https://widget.servetta.online/w.js"
data-servetta-venue="pk_live_000000000000000000000000"
defer
></script>- Pega el script en tu páginaUna vez por página, preferiblemente justo antes de la etiqueta de cierre del body. Se carga en diferido y no retiene nada.
- O ponlo en tu propio botónSi prefieres diseñar el botón tú, cualquier elemento con data-couvert-open abre el flujo de reserva: un botón, un enlace, una imagen. Lo que ya tengas sirve — y entonces no lo tocamos en absoluto.
- Nada másEl flujo de reserva solo se descarga cuando alguien hace clic de verdad. Hasta entonces a tu visitante casi no le cuesta nada.
<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 fragmento de arriba lleva un ejemplo. La tuya empieza por pk_live_ y pertenece a un restaurante, así que dos locales significan dos claves. Pídenosla: todavía no hay una pantalla donde puedas sacarla tú.
Pide tu claveLo 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 ella 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 en la página más tarde. |
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. Un idioma que no hablamos 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 — tu terraza, por ejemplo. Ú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 suyo; déjalo en paz.
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
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.