Tutorial paso a paso. Tiempo estimado: 10 minutos. Necesitas una cuenta Kitking (Plan Free es suficiente). Crear cuenta gratis si aún no la tienes.
Qué vas a conseguir
Al terminar este tutorial tu restaurante tendrá un widget de reservas funcional embebido en tu web. Los clientes podrán reservar mesa sin salir de tu sitio, sin descargar nada y sin pagar comisión por reserva. El widget se carga en un iframe ligero (alrededor de 75 KB con Shadow DOM aislado), por lo que no romperá tus estilos ni penalizará la velocidad de carga.
Antes de empezar
- Tener una cuenta Kitking activa con al menos un restaurante creado y su slug definido (por ejemplo
brote,asador-central). - Acceso al editor de tu web para pegar un fragmento de HTML (WordPress, Wix, Squarespace, Webflow o HTML plano).
- Haber configurado al menos una mesa y un horario de servicio en el panel. Sin mesas el widget no permite reservar.
Cómo configurar el widget de reservas paso a paso
- Accede a tu panel Kitking. Entra en kitking.es/panel con tus credenciales y selecciona el restaurante para el que vas a generar el widget.
- Abre el menú «Widget e integraciones». Está en el lateral izquierdo, debajo de «Reservas». Verás un asistente con la previsualización en vivo.
- Elige el modo de visualización. Tienes tres opciones: botón flotante en una esquina, botón en línea (lo insertas donde quieras) o widget completo embebido. Para empezar, recomendamos el botón en línea.
- Personaliza colores e idioma. Define el color primario (hex), el color de texto y el idioma por defecto. El widget soporta cinco idiomas: español, inglés, francés, italiano y alemán, y detecta el del navegador del cliente.
- Copia el snippet generado. En la pestaña «Código» verás dos líneas: una etiqueta
<script>con tu identificador único y una etiqueta<div>con el slug de tu restaurante. Pulsa «Copiar al portapapeles». - Pégalo en tu web. Abre el editor de tu CMS, ve a la página donde quieras el botón (lo habitual es la home, el menú o la página de contacto) y pega el snippet en un bloque HTML. Guarda y publica los cambios.
- Haz una reserva de prueba. Abre tu web desde una ventana de incógnito, pulsa el botón y completa una reserva ficticia (puedes cancelarla después desde el panel). Verifica que llega al calendario de Kitking y que el correo de confirmación se envía.
- Activa los avisos. En «Notificaciones» del panel, marca correo y, si tienes plan Pro, WhatsApp para recordatorios automáticos. Esto reduce los no-shows de forma significativa.
Personalizar el widget al estilo de tu restaurante
Por defecto el widget hereda tipografías genéricas para no chocar con tu web. Si quieres que parezca nativo, ajusta tres cosas desde «Apariencia» en el panel:
- Tipografía. Selecciona «Heredar del sitio» para que use la misma fuente que tu web. Funciona en webs con fuentes de Google Fonts o autoalojadas.
- Color primario. Usa el mismo hex de tu logotipo. El widget aplicará ese color al botón de confirmar reserva y a los iconos de las mesas.
- Texto del botón. Cámbialo a algo más concreto: «Reservar mesa en sala», «Reservar en terraza» o «Reservar grupo grande» funcionan mejor que un genérico «Reservar».
Variantes según tu CMS
Si usas WordPress
Tienes dos formas: pegar el snippet en un bloque «HTML personalizado» dentro de la página, o instalar el shortcode [kitking slug="tu-restaurante"], disponible para clientes con plan Free y superiores. El shortcode acepta parámetros para fijar el idioma o el color desde el propio editor.
Si usas Wix o Squarespace
Ambas plataformas permiten añadir un bloque «Insertar código» o «Embed». Pega el snippet completo (las dos etiquetas) en ese bloque. En Wix Studio el bloque se llama «HTML iframe»; en Squarespace, «Code block».
Si usas Webflow o HTML plano
Pega el snippet en un componente «Embed» o directamente en el HTML antes del cierre de </body>. Kitking detectará el dominio automáticamente y servirá la versión cacheada en CDN.
Si todavía no tienes web
Puedes seguir aceptando reservas con el enlace público kitking.es/reservar/tu-slug. Compártelo en tu perfil de Google Business, Instagram bio o WhatsApp. Cuando tengas web, instalas el widget y mantienes el mismo enlace activo.
Problemas comunes y soluciones
«He pegado el código pero no aparece el botón»
Comprueba que el editor de tu CMS no haya escapado las comillas o los signos de menor o mayor. El snippet debe quedar tal cual lo copiaste. Si tu tema tiene cache (por ejemplo WP Rocket o W3 Total Cache), vacíala tras pegar el código.
«El widget aparece pero no carga las mesas»
El widget consulta la disponibilidad en vivo. Si no hay mesas configuradas, ningún horario coincide con la fecha actual, o el restaurante está marcado como cerrado en el calendario, verás un mensaje de «Sin disponibilidad». Revisa horarios y mesas en el panel.
«El color del botón no se aplica»
Verifica que el hex incluye el carácter # y que tiene seis dígitos (por ejemplo #1A8754). Si tu web fuerza estilos con !important a botones globales, abre un ticket en hola@kitking.es; te enviamos un selector CSS específico para tu widget.
«Aparece doble botón en mi web»
Has pegado el snippet en dos sitios distintos. Borra uno de los dos. Si querías mostrar dos puntos de entrada distintos, usa el modo «botón en línea» en una posición y «botón flotante» en otra, pero cada modo se genera con un snippet diferente desde el panel.
Por qué importa configurar bien el widget
El widget es la entrada principal de reservas online desde tu propia web. Cada reserva que llega a través de él no paga comisión (a diferencia de las plataformas tipo agregador) y queda directamente en tu calendario, con el contacto del cliente disponible para que puedas comunicarte con él más adelante en campañas o recordatorios. Una instalación cuidada (color de marca, copy concreto, sin obstáculos) marca la diferencia entre que el cliente complete la reserva o abandone para llamar por teléfono, con el coste de tiempo que eso supone para tu equipo de sala.
Preguntas frecuentes
¿Cuánto cuesta tener el widget?
El widget está disponible en todos los planes, incluido el Plan Free. No hay coste por reserva ni comisión sobre el ticket medio.
¿El widget ralentiza mi web?
El widget carga de forma asíncrona y pesa aproximadamente 75 KB minificados. No bloquea el renderizado de tu página y no afecta a la puntuación de Lighthouse de tu sitio si tu web base ya está optimizada.
¿Funciona en móvil?
Sí. El widget está diseñado mobile-first y se adapta a pantallas pequeñas con teclado virtual, selector de fecha nativo y resúmenes plegables.
¿Puedo tener varios widgets para distintos locales?
Sí. Cada local tiene su slug propio y su snippet. Si gestionas una cadena, el Plan Business permite multi-local con un único panel para todos los slugs.
¿El widget afecta al SEO de mi web?
No introduce contenido duplicado ni links salientes con peso SEO. Para mejorar el posicionamiento de tu restaurante, complementa el widget con datos estructurados Restaurant Schema en tu home (lo puedes generar también desde el panel Kitking).
¿Y si quiero quitar el widget?
Borra el snippet de tu web. Las reservas ya recibidas siguen en tu panel y los datos de clientes no se pierden. Puedes volver a instalarlo cuando quieras con el mismo slug.
Próximos pasos
Ya que has configurado el widget, puede interesarte también:
- Guía completa de Kitking — de la creación de cuenta a las primeras reservas.
- Cómo activar las reservas desde Google — añade un segundo canal sin comisión.
- Cómo diseñar la web de tu restaurante para que reciba reservas — dónde colocar el widget para que convierta mejor.