Widget · Documentación

Cómo embeber y personalizar el widget de reservas. Mismos campos y misma base de datos en todos los casos: solo cambia el aspecto y el idioma. ← Volver a la demo

Contenido
Inicio rápido Atributos Idioma Personalización Versiones / presets Slots y variables Prompt para Claude

Inicio rápido

Pega el <div> donde quieras el formulario y el <script> una vez por página.

Formulario de reserva

Reservar

<div
  data-metatierra-tenant="yemaya-zahara"
  data-metatierra-api="https://europe-west1-metatierra-reservas.cloudfunctions.net"></div>
<script src="https://metatierra-reservas.web.app/metatierra-reservas.umd.cjs"></script>

Página "Gestiona tu reserva"

Gestionar (modo manage)

<div
  data-metatierra-tenant="yemaya-zahara"
  data-metatierra-api="https://europe-west1-metatierra-reservas.cloudfunctions.net"
  data-metatierra-mode="manage"></div>
<script src="https://metatierra-reservas.web.app/metatierra-reservas.umd.cjs"></script>

Atributos (data-attributes)

Atributo	Para qué
`data-metatierra-tenant`	ID del negocio. Obligatorio (salvo que venga de un preset).
`data-metatierra-api`	URL base de la API. `https://europe-west1-metatierra-reservas.cloudfunctions.net`
`data-metatierra-mode`	`book` (def.) o `manage`.
`data-metatierra-locale`	Fuerza idioma (`es`, `en`…). Si se omite, usa el `lang` de la página.
`data-metatierra-unstyled`	No inyecta CSS: solo quedan las clases estructurales para que tu web mande.
`data-metatierra-class`	Clase extra en la raíz, para acotar tu propio CSS.
`data-metatierra-accent` · `-font` · `-radius` · `-bg` · `-surface` · `-border` · `-text` · `-button-bg` · `-button-color`	Retoques rápidos (→ variables `--mt-*`).
`data-metatierra-theme`	JSON de variables `--mt-*` sin prefijo. Ej: `'{"radius":"6px"}'`
`data-metatierra-class-<slot>`	Aplica una clase de TU web a ese elemento (ver slots abajo).
`data-metatierra-classes`	JSON con varias: `'{"input":"form-control","button":"btn"}'`
`data-metatierra-preset`	Nombre de una configuración definida en `window.MetatierraReservasPresets`.

Idioma sin selector

El widget muestra un solo idioma, resuelto en este orden:

data-metatierra-locale si lo pones.
el lang de la página (<html lang="es">).
el idioma por defecto del negocio.

Personalización (4 niveles)

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>

B · Sin estilos + tus clases recomendado

Adopta el diseño de 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>

C · Tu CSS con variables

Sobre-escribe --mt-*

<div data-metatierra-tenant="yemaya-zahara" data-metatierra-api="…"
  data-metatierra-class="mi-form"></div>

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

D · Por defecto

Sin nada, usa el estilo Metatierra con el color de marca del negocio.

Versiones / presets

Define varias configuraciones nombradas en window.MetatierraReservasPresets antes del script y refiérelas con data-metatierra-preset. Los atributos del propio <div> siempre mandan sobre el preset.

Varias versiones reutilizables

<script>
  window.MetatierraReservasPresets = {
    surf: {
      tenantId: "yemaya-zahara",
      apiBaseUrl: "https://europe-west1-metatierra-reservas.cloudfunctions.net",
      unstyled: true,
      classes: { input: "form-control", button: "btn btn-primary w-100", field: "mb-3", label: "form-label" }
    },
    oscuro: { theme: { surface: "#0b1020", text: "#ffffff", accent: "#0E9F9A" } }
  };
</script>

<div data-metatierra-preset="surf"></div>
<div data-metatierra-preset="surf" data-metatierra-mode="manage"></div>
<script src="https://metatierra-reservas.web.app/metatierra-reservas.umd.cjs"></script>

Slots y variables

Slots (`data-metatierra-class-<slot>`)

card · field · label · input · select · textarea · button · button-secondary · row · title · error
Si das input y no select/textarea, se usa también en ellos.

Variables CSS (`--mt-*`)

accent · on-accent · bg · surface · border · text · text-2 · text-3 · font · radius · radius-lg · input-bg · input-h · btn-bg · btn-color · btn-radius · btn-h · maxw

Prompt para Claude (integrarlo en una web)

Cópialo y pásalo a la IA que construye la web. Sustituye TENANT por el ID del negocio.

Prompt maestro

Vas a integrar el sistema de reservas embebible de "Metatierra Reservas" en esta web.
NO construyas backend, base de datos ni lógica de envío: el widget ya gestiona campos,
validación, guardado y emails de confirmación/cancelación. Solo insertas el widget y lo
adaptas al diseño de la web.

DATOS:
- tenant: TENANT
- API:    https://europe-west1-metatierra-reservas.cloudfunctions.net
- script: https://metatierra-reservas.web.app/metatierra-reservas.umd.cjs  (cárgalo 1 vez por página)

QUÉ HACER:
1) Zona "Reservar": inserta el widget en modo book (por defecto).
2) Página "Gestiona tu reserva" (ruta /mi-reserva): el mismo widget con
   data-metatierra-mode="manage". Enlázala en el menú/footer.

IDIOMA: no pongas selector. El widget usa el lang de la página (<html lang>). Para forzarlo:
data-metatierra-locale="es" (o "en").

DISEÑO (elige según la web):
- Si la web usa framework/CSS con clases (Bootstrap, Tailwind, design system propio):
  añade data-metatierra-unstyled y pasa LAS CLASES REALES de la web por elemento con
  data-metatierra-class-input, -button, -field, -label, -select, -textarea. Inspecciona
  los componentes existentes y reutiliza SUS clases para que se vea nativo.
- Si la web NO tiene clases claras: deja el estilo por defecto y ajusta color con
  data-metatierra-accent="#RRGGBB" (opcional -font, -radius).
- Para afinar con tu CSS: data-metatierra-class="mi-form" y sobre-escribe variables
  --mt-* en .mi-form.mt-reservas { ... }.

SLOTS (data-metatierra-class-<slot>): card, field, label, input, select, textarea,
button, button-secondary, row, title, error. (input se aplica también a select/textarea).

VARIABLES CSS (--mt-*): accent, bg, surface, border, text, text-2, text-3, font, radius,
radius-lg, input-bg, input-h, btn-bg, btn-color, btn-radius, btn-h, maxw.

VARIAS VERSIONES (opcional): define window.MetatierraReservasPresets = { nombre: {config} }
antes del script y usa data-metatierra-preset="nombre". Los atributos del div mandan sobre el preset.

REGLAS:
- No cambies tenant ni api. No añadas campos ni backend.
- El <script> una sola vez por página.
- Es responsive; deja que ocupe el ancho del contenedor (máx ~480px, ajustable con --mt-maxw).

EJEMPLO reservar (adaptado a clases de la web):
<div data-metatierra-tenant="TENANT"
  data-metatierra-api="https://europe-west1-metatierra-reservas.cloudfunctions.net"
  data-metatierra-unstyled
  data-metatierra-class-field="..." data-metatierra-class-label="..."
  data-metatierra-class-input="..." data-metatierra-class-button="..."></div>
<script src="https://metatierra-reservas.web.app/metatierra-reservas.umd.cjs"></script>

EJEMPLO gestionar:
<div data-metatierra-tenant="TENANT" data-metatierra-api="(misma)"
  data-metatierra-mode="manage" data-metatierra-unstyled
  data-metatierra-class-input="..." data-metatierra-class-button="..."></div>

Para producción seria, sirve la API tras un rewrite /api/* en tu hosting en vez de la URL directa de Cloud Functions.