Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/gus-16710/invitations/llms.txt

Use this file to discover all available pages before exploring further.

Two of the most practically important sections in any digital invitation are the RSVP confirmation and the gift registry. Instead of building a backend form or database, the platform keeps both features lightweight and instantly actionable: RSVP is a single tap that opens WhatsApp with a pre-filled message, and gift options surface direct links to major Mexican retailers alongside bank transfer details with clipboard copy.

​
RSVP — Confirm Section

The Confirm component provides a warm, animated invitation for guests to confirm their attendance. Confirmation is handled entirely via WhatsApp — there is no form, no database, and no email to manage.

​
WhatsApp Deep Link Pattern

The deep link format is: 
https://wa.me/[phone]?text=[URL-encoded message]
  • [phone] — the host’s phone number in international format, without + or spaces (e.g., 5215511422546 for a Mexican number).
  • [text] — an optional pre-filled message that appears in the WhatsApp compose box when the guest taps the link.
The platform also supports short links via wa.link, which are pre-configured redirects that bundle the phone number and message into a single short URL.

​
Button onClick Pattern

// src/app/quinces/daniela/components/Confirm.tsx (excerpt)
import { Button } from "@nextui-org/react";
import { FaWhatsapp, FaPhoneAlt } from "react-icons/fa";

// WhatsApp button — opens pre-filled chat in a new tab
<Button
  variant="bordered"
  color="warning"
  onClick={() => window.open("https://wa.link/llxza9", "_blank")}
  className="w-60"
>
  <FaWhatsapp className="text-2xl" />
  Mensaje de Whatsapp
</Button>

// Phone call button — opens the dialer
<Button
  variant="bordered"
  color="warning"
  onClick={() => window.open("tel:5511422546", "_blank")}
  className="w-60"
>
  <FaPhoneAlt className="text-2xl" />
  Llamada Telefonica
</Button>
Both buttons use window.open(..., "_blank") so the guest leaves the invitation in a background tab and can return after sending the message. The tel: URI scheme opens the device’s native dialer on both iOS and Android.
The phone number and WhatsApp message are hardcoded per invitation during the customisation process. There is no dynamic configuration — the developer edits the href / onClick value directly when setting up a new invitation.

​
Gift Registry — Gifts Section

Mexican events traditionally include a mesa de regalos (gift registry) that guests can browse before attending. The Gifts component surfaces multiple gift options in a single slide, covering the most popular Mexican retailers and a direct bank transfer option.

​
Supported Retailers

Amazon

Links to amazon.com.mx/registries — Mexico’s Amazon gift registry portal.

Liverpool

Links to mesaderegalos.liverpool.com.mx — Liverpool’s dedicated registry service.

Sears

Links to sears.com.mx/Mesa-de-Regalos — Sears Mexico gift registry.

Depósito Bancario

Opens a modal with the host’s bank account number and CLABE, each with a one-tap clipboard copy button.

​
Bank Transfer Modal with Clipboard Copy

Tapping the Depósito option opens a NextUI Modal that displays the beneficiary name, bank name, account number, and CLABE. Each numeric field has a Copiar button that writes the value to the clipboard and shows a brief Popover confirmation. 
// src/app/quinces/daniela/components/Gifts.tsx (excerpt)
import { useState } from "react";
import {
  Modal, ModalContent, ModalHeader, ModalBody, ModalFooter,
  Button, Code, Popover, PopoverTrigger, PopoverContent,
} from "@nextui-org/react";

const ModalCCard = ({ isOpen, onOpenChange }) => {
  const [openCount, setOpenCount] = useState(false);
  const [openCL, setOpenCL]       = useState(false);

  // Copy text to clipboard, then auto-close the popover after 1 s
  const clipBoard = (text: string) => {
    navigator.clipboard.writeText(text);
    setTimeout(() => {
      setOpenCount(false);
      setOpenCL(false);
    }, 1000);
  };

  return (
    <Modal isOpen={isOpen} onOpenChange={onOpenChange} size="xs" placement="center" backdrop="blur">
      <ModalContent>
        {(onClose) => (
          <>
            <ModalHeader>Datos Bancarios</ModalHeader>
            <ModalBody>
              <label>Beneficiario:</label>
              <Code>Rocio Díaz Romero</Code>

              <label>Banco:</label>
              <Code>BBVA Bancomer</Code>

              <label>Cuenta:</label>
              <div className="flex justify-between items-center">
                <Code className="w-full">655030651102</Code>
                <Popover placement="top" color="foreground"
                  isOpen={openCount} onOpenChange={(o) => setOpenCount(o)}>
                  <PopoverTrigger>
                    <Button size="sm" variant="faded"
                      onClick={() => clipBoard("655030651102")}>
                      Copiar
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent>
                    <div className="text-tiny px-1 py-2">Cuenta copiada</div>
                  </PopoverContent>
                </Popover>
              </div>

              <label>CLABE:</label>
              <div className="flex justify-between items-center">
                <Code className="w-full">0145806550365110265</Code>
                <Popover placement="top" color="foreground"
                  isOpen={openCL} onOpenChange={(o) => setOpenCL(o)}>
                  <PopoverTrigger>
                    <Button size="sm" variant="faded"
                      onClick={() => clipBoard("0145806550365110265")}>
                      Copiar
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent>
                    <div className="text-tiny px-1 py-2">CLABE copiada</div>
                  </PopoverContent>
                </Popover>
              </div>
            </ModalBody>
            <ModalFooter>
              <Button color="danger" variant="light" onPress={onClose}>Cerrar</Button>
            </ModalFooter>
          </>
        )}
      </ModalContent>
    </Modal>
  );
};
navigator.clipboard.writeText() is a Promise-based API that requires a secure context (HTTPS or localhost). Since all invitations are deployed over HTTPS, this works on all modern mobile browsers without any additional polyfill. The setTimeout that closes the Popover after 1 second gives the guest just enough time to read the “copiada” confirmation before it disappears.

​
Opening the Gifts Modal

The parent Gifts component uses NextUI’s useDisclosure hook to manage the modal’s open/close state: 
// Gifts.tsx — wiring the Depósito option to the modal
const { isOpen, onOpen, onOpenChange } = useDisclosure();
const openLink = (link: string) => window.open(link, "_blank");

// Retailer links open externally; Depósito opens the modal
<Avatar src="/img/.../credit-logo.png" isBordered onClick={() => onOpen()} />
<Link color="warning" onClick={() => onOpen()}>Depósito</Link>

// Modal rendered at the bottom of the JSX tree
<ModalCCard isOpen={isOpen} onOpenChange={onOpenChange} />

​
Google Maps Integration

The Ceremony and Reception sections provide a button or link that opens Google Maps so guests can navigate directly to the venue. The pattern is a button with an onClick that calls window.open with a Google Maps search URL: 
// Pattern used in Ceremony / Reception components
<Button
  onClick={() =>
    window.open(
      "https://maps.google.com/?q=Parroquia+San+Juan+Bautista,+CDMX",
      "_blank"
    )
  }
>
  <LuMapPin /> Ver en Google Maps
</Button>
The q parameter accepts a free-text address or a place name. For precise locations, a q=lat,lng pair can be used instead (e.g., ?q=19.4326,-99.1332).
All contact and financial information — phone numbers, WhatsApp links, bank account numbers, and CLABE numbers — is hardcoded directly into each invitation’s component files during the customisation process. There is no admin panel or CMS. When setting up a new invitation, the developer replaces the placeholder values in Confirm.tsx and Gifts.tsx with the client’s real details.

Build docs developers (and LLMs) love

Get started for freeTalk to us