Widget de reservas

Pega el widget en cualquier web y sustituye el botón de WhatsApp. A la izquierda el código; a la derecha, la vista previa real de lo que verá tu cliente.

📖 Documentación completa, personalización y prompt para Claude →

1 · Formulario de reserva

Snippet — pégalo donde quieras el botón de reservar
Vista previa en vivodemo-restaurante

2 · Gestionar / cancelar por código

Snippet — página "gestionar mi reserva" (lee ?reserva=CODE)
Vista previa en vivodemo-restaurante

3 · Personalización — que el diseño lo ponga tu web

Mismos campos y misma base de datos; solo cambia el aspecto. De menos a más control:

A · Ajustes rápidos (atributos, sin CSS) 
<div
  data-metatierra-tenant="yemaya-zahara"
  data-metatierra-api="https://europe-west1-metatierra-reservas.cloudfunctions.net"
  data-metatierra-accent="#0E9F9A"
  data-metatierra-font="Poppins, sans-serif"
  data-metatierra-radius="8px"></div>
<script src="https://metatierra-reservas.web.app/metatierra-reservas.umd.cjs"></script>
B · Sin estilos + tus clases (recomendado: se ve como tu web) 
<div
  data-metatierra-tenant="yemaya-zahara"
  data-metatierra-api="https://europe-west1-metatierra-reservas.cloudfunctions.net"
  data-metatierra-unstyled
  data-metatierra-class-field="TU_CLASE_DE_CAMPO"
  data-metatierra-class-label="TU_CLASE_DE_LABEL"
  data-metatierra-class-input="TU_CLASE_DE_INPUT"
  data-metatierra-class-button="TU_CLASE_DE_BOTON"></div>
<script src="https://metatierra-reservas.web.app/metatierra-reservas.umd.cjs"></script>
C · Tu CSS con variables --mt-* 
<div data-metatierra-tenant="yemaya-zahara"
  data-metatierra-api="https://europe-west1-metatierra-reservas.cloudfunctions.net"
  data-metatierra-class="mi-form"></div>
<script src="https://metatierra-reservas.web.app/metatierra-reservas.umd.cjs"></script>

<style>
.mi-form.mt-reservas{
  --mt-accent:#0E9F9A; --mt-font:'Poppins',sans-serif;
  --mt-radius:6px; --mt-btn-radius:6px;
  --mt-surface:#0b1020; --mt-text:#fff; --mt-maxw:560px;
}
</style>

Slots (data-metatierra-class-<slot>): card · field · label · input · select · textarea · button · button-secondary · row · title · error. Para varios a la vez: data-metatierra-classes='{"input":"...","button":"..."}'. Si das input y no select/textarea, se usa también en ellos.

Variables CSS: --mt-accent · --mt-bg · --mt-surface · --mt-border · --mt-text(/-2/-3) · --mt-font · --mt-radius · --mt-radius-lg · --mt-input-bg · --mt-input-h · --mt-btn-bg · --mt-btn-color · --mt-btn-radius · --mt-btn-h · --mt-maxw.

El tenant_id de cada negocio lo ves en el panel Super Admin (al abrir el negocio). Para producción seria, usa un rewrite /api/* en tu hosting en vez de la URL directa de Cloud Functions (ver README del widget).

Toolkit: bundle UMD · embed.html (iframe)