Desarrollo web

Widget de reservas para restaurantes: como funciona y como integrarlo en tu web

17 \17\Europe/Madrid abril \17\Europe/Madrid 2026 11 min de lectura Por ContacPro

Widget reservas restaurante

Widget de reservas para restaurante: cómo funciona, integración en cualquier web (WordPress, Wix, custom), Shadow DOM, configuración paso a paso y casos

Casos reales: widget reservas restaurante

widget reservas restaurante — caso real: Brote
Brote · Restaurante en Córdoba con sistema de reservas, carta digital y SEO local.
widget reservas restaurante — caso real: KitKing
KitKing · SaaS de reservas embebible para restaurantes con widget JavaScript.
widget reservas restaurante — caso real: Asador Central
Asador Central · Restaurante asador #1 en Google para su query principal. SEO local desde 0.

Un widget de reservas es un formulario embebible que permite a tus clientes reservar mesa directamente desde tu propia web, sin salir de ella, sin llamar por teléfono y sin depender de plataformas externas que cobran comisión por cada reserva. En este artículo explicamos cómo funciona técnicamente, qué opciones hay en el mercado, cómo se integra en diferentes tipos de web y por qué cada vez más restaurantes optan por tener su propio sistema de reservas en lugar de pagar a intermediarios.

Qué es un widget de reservas y por qué lo necesitas

Un widget de reservas es un componente de software que se incrusta dentro de tu página web. Desde el punto de vista del cliente, es un formulario donde selecciona fecha, hora y número de comensales, introduce sus datos de contacto y confirma la reserva. Desde el punto de vista del restaurante, es un sistema que recibe reservas en tiempo real, controla la disponibilidad automáticamente y envía notificaciones al equipo y al cliente.

La ventaja principal frente a plataformas como TheFork, Resy u OpenTable es evidente: el cliente se queda en tu web. No se le redirige a un dominio externo, no ve publicidad de otros restaurantes y no recibe después emails de la plataforma promocionando a tu competencia. La reserva se produce dentro de tu ecosistema digital, bajo tu marca y bajo tu control.

Además, no pagas comisión por reserva. Con TheFork, cada reserva que llega a través de su plataforma tiene un coste que oscila entre 2 y 5 euros. Si tu restaurante recibe 300 reservas al mes por esa vía, estás pagando entre 600 y 1.500 euros mensuales solo en comisiones. Un widget propio elimina ese coste por completo desde el primer día.

Cómo funciona técnicamente un widget de reservas

Detrás de un formulario aparentemente sencillo hay una arquitectura técnica que merece la pena entender, aunque sea a nivel general. Saber cómo funciona te permite evaluar mejor las opciones del mercado y distinguir un producto serio de uno improvisado.

Shadow DOM: aislamiento total

Un widget de reservas profesional se renderiza dentro de un Shadow DOM. Esto es una característica del navegador que crea una burbuja aislada dentro de tu página web. El CSS de tu web no afecta al widget y el CSS del widget no afecta a tu web. Esto es crítico porque evita conflictos de estilos: tu tipografía, tus colores y tu maquetación permanecen intactos independientemente de lo que haga el widget internamente.

Sin Shadow DOM, integrar un widget en una web existente es una fuente constante de problemas. Los selectores CSS colisionan, los márgenes se descuadran, los botones cambian de tamaño. Con Shadow DOM, el widget funciona de forma predecible en cualquier web, independientemente de su diseño o del framework que utilice.

Los 5 pasos de una reserva

El flujo estándar de un widget de reservas bien diseñado sigue estos cinco pasos:

  1. Selección de fecha: el cliente elige el día en un calendario visual. Los días sin disponibilidad aparecen deshabilitados automáticamente según la configuración del restaurante (días de cierre, festivos, días especiales).
  2. Horarios disponibles: al seleccionar la fecha, el widget muestra únicamente los horarios con disponibilidad real. Si el turno de las 21:00 ya está completo, no aparece. El cliente nunca ve un horario que no pueda reservar.
  3. Número de comensales: el cliente indica cuántas personas vendrán. El sistema verifica en tiempo real si hay capacidad suficiente para ese grupo en el horario seleccionado.
  4. Datos de contacto: nombre, teléfono y email. Estos datos son propiedad del restaurante, no de una plataforma externa. Son tus clientes, tu base de datos.
  5. Confirmación: el cliente confirma y recibe inmediatamente un email de confirmación y, si tiene la app instalada, una notificación push. El restaurante recibe una notificación en su panel de gestión.

Backend: disponibilidad en tiempo real

El widget se comunica con una API que gestiona la disponibilidad en tiempo real. Esta es la parte más crítica del sistema y donde la mayoría de soluciones baratas fallan. Un backend serio debe cumplir estas condiciones:

  • Control de capacidad por turno: el sistema conoce la capacidad real del restaurante (mesas, comensales por turno, distribución de sala) y no acepta más reservas de las que caben físicamente.
  • Prevención de overbooking: cuando dos clientes intentan reservar el último hueco simultáneamente, el sistema debe usar bloqueo optimista (SELECT … FOR UPDATE) para garantizar que solo uno de los dos obtiene la mesa. Sin este mecanismo, el overbooking es inevitable en restaurantes con alta demanda.
  • Gestión de no-shows: políticas configurables para clientes que reservan y no aparecen. Desde lista negra automática hasta pago anticipado o depósito parcial.
  • Panel de gestión: el restaurante gestiona todo desde un panel web: ve las reservas del día, modifica horarios, ajusta capacidad, consulta estadísticas y gestiona la comunicación con los clientes.

Opciones de widgets de reservas en el mercado

El mercado de widgets de reservas para restaurantes tiene varias opciones, cada una con un modelo de negocio diferente. Esta tabla compara las principales alternativas disponibles en España en 2026:

WidgetPrecioComisión/reservaShadow DOMIdiomasPush
TheFork / ElTenedorGratis2 – 5 EURNoMultiNo
ResyGratisVariableNoMultiNo
CoverManagerPago mensualNoMultiNo
OpenTableGratis1 – 7,50 USDNoMultiNo
KitKing (ContacPro)Precio cerrado0 EUR5
Desarrollo propioVariable0 EURConfigurableConfigurableConfigurable

Dato clave: las plataformas «gratuitas» como TheFork u OpenTable no son realmente gratuitas. No cobran por el widget, pero cobran por cada reserva que llega a través de él. Un restaurante con 300 reservas mensuales puede pagar más de 1.000 euros al mes en comisiones. Un widget propio con precio cerrado elimina ese coste variable desde el primer día.

KitKing: nuestro widget de reservas

KitKing (kitking.es) es el sistema de reservas para hostelería desarrollado íntegramente por ContacPro. No es un producto de terceros revendido ni una plantilla personalizada: es un desarrollo propio desde la primera línea de código hasta la última, diseñado específicamente para las necesidades reales de restaurantes en España.

Estas son sus características técnicas verificables:

  • Widget de 75 KB: compilado como IIFE (Immediately Invoked Function Expression), se carga en milisegundos. Para contexto, una imagen de Instagram pesa más que todo el widget.
  • Shadow DOM: aislamiento total del CSS. Se integra en cualquier web sin conflictos de estilo, sea WordPress, Shopify, HTML estático o cualquier CMS.
  • 5 idiomas: español, inglés, francés, alemán y portugués. Ideal para restaurantes en zonas turísticas que reciben clientes internacionales.
  • Notificaciones push nativas: implementadas con Web Push (RFC 8291/8292) y claves VAPID generadas con curva EC P-256. Sin servicios de terceros, sin cuotas mensuales por notificación.
  • Panel de gestión como PWA: el panel del restaurante es una Progressive Web App instalable en móvil, tablet u ordenador. Funciona offline para consultar reservas y se actualiza automáticamente.
  • Lighthouse 100/100/100/100: puntuación perfecta en rendimiento, accesibilidad, buenas prácticas y SEO en las 14 URLs principales auditadas. Este resultado es público y cualquiera puede verificarlo.
  • Sin comisiones: precio cerrado por el desarrollo e integración. Cero euros por reserva, cero euros por notificación, cero euros por usuario.
  • 6 plantillas de email: confirmación, modificación, cancelación, recordatorio y notificaciones al administrador. Todas con soporte completo de tildes, eñes y caracteres especiales.

El primer cliente en producción de KitKing es brote.es, un restaurante en Córdoba. El widget está integrado en su web WordPress mediante el tema brote-child y se carga desde functions.php con wp_footer. Lleva en producción desde marzo de 2026 y gestiona reservas reales diariamente.

Puedes ver los detalles completos de nuestro sistema de reservas para restaurantes y solicitar una demostración en vivo.

Cómo integrar un widget de reservas en tu web

La integración de un widget de reservas varía según el tipo de web que tengas. Estas son las tres situaciones más habituales:

Si tu web es WordPress

WordPress es el CMS más utilizado en hostelería en España, y hay dos formas principales de integrar un sistema de reservas:

  • Plugin nativo: MakIA Reservas es un plugin WordPress desarrollado por ContacPro con 36 clases PHP y 12 tablas de base de datos. Se instala como cualquier plugin, se configura desde el panel de administración de WordPress y se inserta en cualquier página mediante shortcode o bloque Gutenberg. La gestión de reservas, horarios, capacidad y notificaciones se hace directamente desde el escritorio de WordPress.
  • Widget embebible: si prefieres un sistema externo más ligero, el widget de KitKing se integra en WordPress añadiendo un script en functions.php del tema hijo. Es el método utilizado en brote.es y funciona con cualquier tema.

Si necesitas un plugin a medida para tu restaurante, puedes consultar nuestros servicios de desarrollo de plugins WordPress.

Si tu web es HTML, PHP o cualquier CMS

El widget de KitKing se integra con dos líneas de código en cualquier web, independientemente de la tecnología que utilice:

<div id="kitking-widget"></div>
<script src="https://kitking.es/widget.js" data-restaurant="tu-id"></script>

El div actúa como contenedor y el script carga el widget dentro de él con Shadow DOM. El widget se adapta automáticamente al ancho del contenedor, es responsive de serie y funciona en cualquier dispositivo. No necesitas instalar nada, no necesitas modificar tu servidor y no necesitas conocimientos técnicos para mantenerlo.

Esta integración funciona con HTML estático, PHP, Joomla, Drupal, Prestashop, Wix (modo HTML embebido), Squarespace y prácticamente cualquier plataforma que permita insertar código HTML personalizado.

Si no tienes web

Si tu restaurante todavía no tiene página web o la que tiene está obsoleta, lo más eficiente es crear una web nueva con el sistema de reservas integrado desde el inicio. En ContacPro ofrecemos un pack de hostelería completo que incluye web profesional, widget de reservas, carta digital y configuración de dominio desde 2.800 euros. Puedes consultar todos los detalles y precios en nuestra página de precios de páginas web en Córdoba.

Preguntas frecuentes sobre widgets de reservas

Puedo personalizar los colores del widget?

Sí. El widget de KitKing acepta parámetros de configuración para adaptar la paleta de colores, las fuentes y los textos a la identidad visual de tu restaurante. Puedes cambiar el color principal, el color de los botones, el texto de los botones y los mensajes de confirmación. El objetivo es que el widget parezca una parte natural de tu web, no un elemento externo pegado.

Qué pasa si el cliente no aparece (no-show)?

El sistema permite configurar varias políticas para gestionar los no-shows de forma automática. Las opciones incluyen lista negra automática (el cliente que no aparece queda marcado y en futuras reservas recibe un aviso), pago anticipado obligatorio para grupos grandes y depósito parcial configurable por el restaurante. Estas políticas se activan y ajustan desde el panel de gestión sin necesidad de tocar código.

Funciona en móvil?

Sí. El widget está diseñado mobile-first: los botones son grandes, los formularios son sencillos, el calendario es táctil y todo el flujo de reserva se completa con el pulgar. Más del 75% de las reservas online se realizan desde el móvil, así que el rendimiento en pantallas pequeñas no es un extra: es la prioridad.

Puedo gestionar varias sedes desde un solo panel?

Sí. KitKing soporta configuración multi-restaurante desde un único panel de administración. Cada sede tiene su propia configuración de horarios, capacidad, turnos y políticas, pero el propietario o grupo puede supervisar todas las sedes desde un solo acceso. Esto es especialmente útil para grupos de restauración con 2-10 locales que necesitan visión centralizada sin perder el control individual de cada establecimiento.

En la práctica: widget reservas restaurante en producción

En ContacPro programamos webs, plataformas y software a medida desde Córdoba. Estos son casos reales donde aplicamos los patrones explicados en este artículo.

Estilyo comparador moda

69.000 productos indexados, 119 tiendas, 720 marcas. PHP 7 API + React 19 con prerender selectivo para bots, Lighthouse 98/100/100 en móvil. Ejemplo de desarrollo web a medida a escala.

estilyo.es →

Brote (WordPress custom)

WordPress con Astra + brote-child-v2 optimizado. Plugin propio MakIA Reservas (36 clases, 12 tablas). Lighthouse 100/100/100 sin plugins de «optimización». Producción en Solete Repsol.

brote.es →

¿Necesitas desarrollo web a medida? Programamos webs con WordPress, Next.js, Astro o headless CMS desde Córdoba. Core Web Vitals verdes, SEO técnico desde el inicio y código entregado al cliente. Ver desarrollo web a medida →

El coste real de no tener reservas online

Un restaurante sin sistema de reservas online pierde clientes de tres formas. Primera: el cliente que quiere reservar fuera de horario de atención telefónica (noches, fines de semana, festivos) simplemente elige otro restaurante que sí le permite reservar a las 23:00 desde el sofá. Segunda: el cliente que no quiere llamar por teléfono, que es una proporción creciente especialmente entre menores de 40 años. Tercera: el cliente que llega a tu web, no encuentra un botón de reserva claro y se va a TheFork, donde tu restaurante compite en igualdad de condiciones con todos los demás de la zona.

Un widget de reservas propio soluciona estos tres problemas. Está disponible 24 horas, 7 días a la semana. No requiere llamada telefónica. Y mantiene al cliente en tu ecosistema digital, bajo tu marca, sin exponerle a la competencia. La inversión se recupera en semanas, no en meses.

Sigue leyendo

Desarrollo web
Headless CMS en 2026: cuando conviene y cuando no
Desarrollo web
Carta digital para restaurantes: guia completa con opciones y precios en 2026
Desarrollo web
Tutorial: integrar Stripe con suscripciones en Node.js

¿Tienes un proyecto en mente?

Hablemos de cómo desarrollar tu web, app o SaaS a medida.

Solicitar presupuesto