Cómo poner el botón de reservar en tu web

Dos formas de llevar a tus clientes a reservar:

	URL directa /c/:slug	Embed iframe /embed/r/:slug
Dónde reserva	En la página de RestaPro	Dentro de tu propia web
Diseño	Página completa	Compacta para encajar en tu layout
Tracking	source: web_page	source: web_embed
Uso	Compartir link, QR	WordPress, Wix, web custom

El embed mantiene tu tema visual y datos del restaurante.

Snippet listo para copiar

En el backoffice → Ajustes → Reservas → Embed verás el snippet con tu slug ya rellenado. Si lo quieres componer a mano:

<iframe
  src="https://www.restapro.es/embed/r/tu-slug"
  width="100%"
  height="720"
  style="border:0;"
  loading="lazy"
  allow="payment">
</iframe>

Reemplaza tu-slug por el identificador de tu restaurante.

Recomendaciones de altura

• Móvil (menos de 768px): height="900" o más.
• Desktop: 720-800 es ideal.
• Responsive automático: envuélvelo en un contenedor con min-height:

<div style="width:100%; min-height:720px;">
  <iframe
    src="https://www.restapro.es/embed/r/tu-slug"
    width="100%" height="100%"
    style="border:0;" loading="lazy">
  </iframe>
</div>

Por plataforma

WordPress

Bloque HTML personalizado y pegas el snippet. Disponible en el editor por defecto sin plugin.

Wix

Añadir → Más → Embebido HTML y pegas el snippet. Ajusta el tamaño del bloque arrastrando.

Squarespace

Insertar → Bloque personalizado → Código y pegas el snippet.

Web custom (HTML, React, Vue…)

Pega el snippet donde quieras que aparezca el formulario:

<section class="booking">
  <h2>Reserva tu mesa</h2>
  <iframe src="https://www.restapro.es/embed/r/tu-slug"
    width="100%" height="720" style="border:0;" loading="lazy">
  </iframe>
</section>

El embed hereda tu tema

Logo, colores, tipografía, branding, idioma — todo se sincroniza automáticamente desde Ajustes → Restaurante. No tienes que tocar nada en el iframe.

Tracking

Cada conversión desde el iframe se etiqueta como web_embed (vs web_page para la URL directa). En /app/reservas puedes filtrar por canal y comparar conversión de cada origen.

Solución de problemas

Problema	Causa	Fix
El iframe no aparece	Slug incorrecto	Cópialo desde Ajustes → Reservas
Se ve cortado	height insuficiente	Sube a 900px en móvil
Tema no aparece	Tema sin guardar	Guarda en Ajustes → Restaurante
Estilos rotos	CSS del host bloqueando	Usa style="border:0;" y déjalo aislado

Permisos del iframe

El atributo allow="payment" permite que en el futuro (cuando lleguemos a pre-pago de eventos) Stripe Elements funcione dentro del iframe sin problemas. Hoy no es estrictamente necesario, pero es buena práctica dejarlo.