How to put the reserve button on your website

Two ways to send your customers to reserve:

	Direct URL /r/:slug	Embed iframe /embed/r/:slug
Where they reserve	On the RestaPro page	Inside your own website
Design	Full page	Compact to fit your layout
Tracking	source: web_page	source: web_embed
Use	Share link, QR	WordPress, Wix, custom site

The embed keeps your visual theme and restaurant data.

Snippet ready to copy

In the backoffice → Settings → Reservations → Embed you'll see the snippet with your slug already filled in. If you'd rather assemble it manually:

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

Replace your-slug with your restaurant's identifier.

Height recommendations

• Mobile (under 768px): height="900" or more.
• Desktop: 720-800 is ideal.
• Auto-responsive: wrap it in a container with min-height:

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

By platform

WordPress

Custom HTML block and paste the snippet. Available in the default editor without any plugin.

Wix

Add → More → HTML Embed and paste the snippet. Adjust the block size by dragging.

Squarespace

Insert → Custom block → Code and paste the snippet.

Custom site (HTML, React, Vue...)

Paste the snippet wherever you want the form to appear:

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

The embed inherits your theme

Logo, colors, typography, branding, language - everything syncs automatically from Settings → Restaurant. You don't have to touch anything in the iframe.

Tracking

Each conversion from the iframe is tagged as web_embed (vs web_page for the direct URL). In /app/reservas you can filter by channel and compare conversion of each source.

Troubleshooting

Problem	Cause	Fix
The iframe doesn't appear	Wrong slug	Copy it from Settings → Reservations
It's clipped	Insufficient height	Bump to 900px on mobile
Theme doesn't show	Theme not saved	Save in Settings → Restaurant
Broken styles	Host CSS interfering	Use style="border:0;" and keep it isolated

Iframe permissions

The allow="payment" attribute means that in the future (when we get to event prepayment), Stripe Elements will work inside the iframe without issues. It isn't strictly necessary today, but it's good practice to leave it.