Com posar el botó de reservar al teu web

Dues formes de portar els teus clients a reservar:

	URL directa /c/:slug	Embed iframe /embed/r/:slug
On reserva	A la pàgina de RestaPro	Dins del teu propi web
Disseny	Pàgina completa	Compacte per encaixar al teu layout
Tracking	source: web_page	source: web_embed
Ús	Compartir enllaç, QR	WordPress, Wix, web propi

L'embed manté el teu tema visual i les dades del restaurant.

Snippet a punt per copiar

Al backoffice → Configuració → Reserves → Embed veuràs el snippet amb el teu slug ja emplenat. Si el vols compondre a mà:

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

Reemplaça el-teu-slug per l'identificador del teu restaurant.

Recomanacions d'alçada

• Mòbil (menys de 768px): height="900" o més.
• Desktop: 720-800 és ideal.
• Responsive automàtic: embolica'l en un contenidor amb min-height:

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

Per plataforma

WordPress

Bloc HTML personalitzat i enganxes el snippet. Disponible a l'editor per defecte sense plugin.

Wix

Afegeix → Més → Encastat HTML i enganxes el snippet. Ajusta la mida del bloc arrossegant.

Squarespace

Inserir → Bloc personalitzat → Codi i enganxes el snippet.

Web propi (HTML, React, Vue…)

Enganxa el snippet on vulguis que aparegui el formulari:

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

L'embed hereta el teu tema

Logo, colors, tipografia, branding, idioma — tot se sincronitza automàticament des de Configuració → Restaurant. No has de tocar res a l'iframe.

Tracking

Cada conversió des de l'iframe s'etiqueta com a web_embed (vs web_page per a la URL directa). A /app/reservas pots filtrar per canal i comparar la conversió de cada origen.

Resolució de problemes

Problema	Causa	Fix
L'iframe no apareix	Slug incorrecte	Copia'l des de Configuració → Reserves
Es veu retallat	height insuficient	Puja a 900px al mòbil
Tema no apareix	Tema sense desar	Desa a Configuració → Restaurant
Estils trencats	CSS de l'amfitrió bloquejant	Fes servir style="border:0;" i deixa'l aïllat

Permisos de l'iframe

L'atribut allow="payment" permet que en el futur (quan arribem al pagament avançat d'esdeveniments) Stripe Elements funcioni dins de l'iframe sense problemes. Avui no és estrictament necessari, però és bona pràctica deixar-lo.