Manual para crear tu propia invitación — Madify Invita

Este documento explica cómo armar tu propia página de invitación (a mano o pidiéndosela a una inteligencia artificial como Claude) para publicarla en Madify Invita. Tu página recibe los datos de tu evento automáticamente y las confirmaciones de asistencia llegan a tu panel.

Si vas a usar una IA: copia este documento completo en la conversación y pídele tu diseño. Al final hay un bloque «Prompt para la IA» listo para usar.

1. Qué vas a entregar

Un archivo ZIP con tu sitio:

mi-invitacion.zip
├── index.html        ← obligatorio (en la raíz del ZIP o dentro de UNA carpeta)
├── css/estilos.css
├── js/app.js
└── img/foto.webp

• index.html es la portada. Puedes tener más páginas (galeria.html); también reciben los datos.
• Usa rutas relativas: img/foto.webp, nunca /img/foto.webp ni rutas de tu computadora.
• Todo en UTF-8.

2. Reglas del ZIP

• Extensiones permitidas: avif, css, eot, gif, htm, html, ico, jpeg, jpg, js, json, m4a, map, mjs, mp3, mp4, ogg, otf, png, svg, ttf, txt, wav, webm, webmanifest, webp, woff, woff2.
• Máximo 50 MB comprimido, 200 MB descomprimido y 500 archivos.
• Se ignoran __MACOSX/, .DS_Store y archivos ocultos. No se aceptan enlaces simbólicos ni rutas con ...
• Optimiza las imágenes (WebP o JPEG, menos de 400 KB cada una): la mayoría de tus invitados abrirá la invitación desde el celular.
• Si la página tiene un error de sintaxis en las variables, el sistema te dice el archivo y la línea.

3. Datos dinámicos (variables)

Tu HTML se procesa con el motor de plantillas de Django. Escribe {{ variable }} donde quieras que aparezca un dato y {% if … %}…{% endif %} para mostrar algo solo si existe.

Llaves principales:

event

Cada ubicación (event.locations, event.main_location)

Cada link (event.links, event.gift_links)

Cuentas para regalo ({% for acc in event.bank_accounts %})

guest (solo cuando se abre con link personal)

rsvp (la respuesta previa de ese invitado, si ya confirmó)

rsvp_config

Filtros útiles

{{ event.starts_at|date:"l j \d\e F \d\e Y" }}   → sábado 24 de octubre de 2026
{{ event.starts_at|date:"g:i a" }}              → 1:00 p.m.
{{ event.starts_at|date:"c" }}                  → 2026-10-24T13:00:00-06:00 (para cuentas regresivas en JS)
{{ event.description|linebreaksbr }}            → respeta los saltos de línea
{{ event.honorees|upper }}                      → ANA Y LUIS
{{ guest.max_adults|pluralize:"es" }}           → «es» si es plural (lugar/lugares)
{{ event.extra.hashtag|default:"#AnayLuis" }}   → valor por defecto si está vacío

Ejemplos:

<h1>{{ event.honorees }}</h1>
<p>{{ event.starts_at|date:"l j \d\e F" }} · {{ event.starts_at|date:"g:i a" }}</p>

{% if guest %}
  <p>¡Hola, {{ guest.name }}! Reservamos {{ guest.max_adults }} lugar{{ guest.max_adults|pluralize:"es" }}.</p>
{% endif %}

{% for loc in event.locations %}
  <h3>{{ loc.kind_label }}: {{ loc.name }}</h3>
  <p>{{ loc.address }}</p>
  {% if loc.maps_link %}<a href="{{ loc.maps_link }}">Ver mapa</a>{% endif %}
{% endfor %}

{% for link in event.gift_links %}<a href="{{ link.url }}">{{ link.label }}</a>{% endfor %}

Si tu JavaScript usa llaves dobles (Vue, Handlebars, etc.), enciérralo en {% verbatim %}…{% endverbatim %} para que no se procese.

4. Confirmación de asistencia

Opción A — formulario listo

<section id="confirmar">
  {% rsvp_form %}
</section>
{% rsvp_script %}   {# antes de </body> #}

Genera un formulario completo (nombre, asiste sí/no, adultos, niños, nombres de acompañantes, mensaje) que puedes estilizar con CSS: .rsvp-form, .rsvp-field, .rsvp-submit, .rsvp-success, .rsvp-error.

Opción B — tu propio formulario

Pon data-rsvp en tu <form> y usa estos name en los campos:

Atributos que entiende el script:

<form data-rsvp data-success-yes="¡Gracias! Nos vemos pronto." data-success-no="¡Te extrañaremos!">
  <input name="name" placeholder="Tu nombre" required>
  <label><input type="radio" name="attending" value="yes"> Sí asistiré</label>
  <label><input type="radio" name="attending" value="no"> No podré ir</label>
  <div data-rsvp-when-attending hidden>
    <input type="number" name="adults" min="1" value="1">
    <input type="number" name="children" min="0" value="0" data-rsvp-children>
    <div data-rsvp-attendees></div>
  </div>
  <textarea name="message"></textarea>
  <input type="text" name="website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px">
  <button type="submit">Enviar</button>
  <p data-rsvp-success hidden></p>
  <p data-rsvp-error hidden></p>
</form>
{% rsvp_script %}

• Con link personal (?i=…) el nombre se llena solo, se respetan los lugares del invitado y, si ya había confirmado, su respuesta aparece para modificarla.
• Sin link personal (link general) se pide el nombre y se respetan los límites del evento.
• Los límites se validan también en el servidor: no se puede confirmar de más aunque alguien modifique la página.

Funciones del evento (etiquetas listas)

Funcionan igual en cualquier diseño. Si tu página no las incluye, la música y el botón de la galería se agregan solos (flotantes) cuando el evento los tiene.

<div data-countdown="{{ event.starts_at|date:'c' }}">
  <span data-countdown-days></span> días · <span data-countdown-hours></span> h · <span data-countdown-minutes></span> min
</div>
{% gallery_button "Comparte tus fotos" %}
{% share_buttons %}
{% invite_extras %}   {# antes de </body> #}

5. Página de ejemplo completa (mínima)

<!doctype html>
<html lang="es-MX">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ event.title }}</title>
  <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <header>
    <p class="eyebrow">{{ event.type_label }}</p>
    <h1>{{ event.honorees }}</h1>
    <p>{{ event.starts_at|date:"l j \d\e F \d\e Y" }} · {{ event.starts_at|date:"g:i a" }}</p>
    {% if guest %}<p class="hola">¡Hola, {{ guest.name }}!</p>{% endif %}
  </header>

  {% if event.description %}<section><p>{{ event.description|linebreaksbr }}</p></section>{% endif %}

  <section>
    {% for loc in event.locations %}
      <article>
        <h2>{{ loc.kind_label }}</h2>
        {% if loc.name %}<h3>{{ loc.name }}</h3>{% endif %}
        <p>{{ loc.address }}{% if loc.starts_at %} · {{ loc.starts_at|time:"g:i a" }}{% endif %}</p>
        {% if loc.maps_link %}<a href="{{ loc.maps_link }}" target="_blank" rel="noopener">Cómo llegar</a>{% endif %}
      </article>
    {% endfor %}
  </section>

  {% if event.gift_links %}
  <section>
    <h2>Mesa de regalos</h2>
    {% for link in event.gift_links %}<a href="{{ link.url }}" target="_blank" rel="noopener">{{ link.label }}</a>{% endfor %}
  </section>
  {% endif %}

  <section id="confirmar">
    <h2>Confirma tu asistencia</h2>
    {% if event.rsvp_deadline %}<p>Antes del {{ event.rsvp_deadline|date:"j \d\e F" }}.</p>{% endif %}
    {% rsvp_form %}
  </section>

  {% rsvp_script %}
</body>
</html>

6. Prompt para la IA

Copia y pega esto después de este manual, cambiando lo que está entre corchetes:

Con base en el manual anterior, crea mi invitación digital para [tipo de evento: boda, XV años, bautizo…]
con estilo [describe: elegante, minimalista, floral, rústico, colores dorado y verde olivo…].

Requisitos:
- Entrégame el contenido de cada archivo y la estructura del ZIP (index.html en la raíz, css/, img/).
- Usa SOLO las variables del manual ({{ event.… }}, {{ guest.… }}); no escribas datos fijos de fecha, lugar o nombres.
- Incluye una sección de confirmación con {% rsvp_form %} (o un formulario data-rsvp) y {% rsvp_script %} antes de </body>.
- Diseño mobile first, que cargue rápido (sin frameworks pesados); fuentes de Google Fonts permitidas.
- No cargues scripts de terceros (salvo Google Fonts) ni envíes datos a otros servidores.
- Si usas JavaScript con llaves dobles, enciérralo en {% verbatim %}.
- Rutas relativas para imágenes y CSS. Indica qué imágenes debo agregar y de qué tamaño.
Secciones que quiero: [portada con nombres y fecha, cuenta regresiva, mensaje, ubicaciones con mapa, mesa de regalos, galería, confirmación…].

7. Antes de enviar (checklist)

• [ ] index.html en la raíz del ZIP y rutas relativas.
• [ ] Probaste la página abriéndola en el celular (los datos aparecen como {{ … }} hasta que se publica: es normal).
• [ ] La sección de confirmación usa {% rsvp_form %} o un form data-rsvp y {% rsvp_script %}.
• [ ] Imágenes optimizadas y el ZIP pesa menos de 50 MB.
• [ ] Sin scripts externos ni formularios que manden datos a otros sitios.
• [ ] No hay un fotos/index.html: la dirección /fotos/ de tu invitación es la galería de invitados.

8. Cómo enviarlo

1. Entra a tu panel: https://invite-app.madify.mx/admin/ → Mi sitio → Enviar sitio.
2. Elige tu evento y sube el ZIP. Si algo no cumple las reglas, verás el error al momento.
3. Lo revisamos (normalmente en menos de 24 horas) y te avisamos por correo cuando esté publicado. Si necesita cambios, te decimos cuáles.

Necesitas un plan que incluya sitio propio. Consulta los planes en https://invite.madify.mx/precios/.

9. Qué no se permite

• Scripts que capturen datos de tus invitados y los manden a otros servidores, o formularios que apunten a otros sitios.
• Contenido ilegal, engañoso u ofensivo, o que use marcas o imágenes sin permiso.
• Intentar leer archivos del servidor o romper el sistema (la página se rechaza).

¿Dudas? Escríbenos a contacto@madify.mx.