WhatsApp Integration
Relevant source files
The following files were used as context for generating this wiki page:
The WhatsApp Integration in the Boda-Cris project serves as a communication bridge between the event administrators and the guest list. Its primary purpose is to facilitate the distribution of wedding invitations, reminders, and updates through the WhatsApp Web API (wa.me). This system allows for both individual messaging and bulk broadcasting with dynamic variable injection based on guest data and event content.
The integration is deeply coupled with the guest management system, utilizing real-time data from the GuestContext and event details from the ContentContext to personalize messages. It supports template management, scheduling, and message history tracking to ensure efficient communication workflows.
Sources: src/components/admin/WhatsAppBroadcast.jsx:1-12, src/components/admin/GuestList.jsx:1-15, src/pages/AdminPage.jsx:45-55
Communication Workflow and Architecture
The system utilizes a client-side architecture where message composition and distribution are handled directly in the browser. The core logic resides within the WhatsAppBroadcast component, which manages the selection of recipients, template processing, and the execution of message sending.
Data Flow Diagram
The following diagram illustrates how guest data and event content are transformed into personalized WhatsApp messages.
The system fetches guest lists and event details (names, dates, locations) to populate message variables. It also persists user-defined templates and send history in the browser's local storage.
Sources: src/components/admin/WhatsAppBroadcast.jsx:100-140, src/components/admin/GuestList.jsx:65-80
Core Features and Functionality
The integration provides several layers of messaging capability, ranging from quick individual actions to complex automated broadcasts.
Messaging Modes
| Feature | Description | File Reference |
|---|---|---|
| Individual Message | Send a quick invitation from the Guest List or Guest Detail view. | GuestList.jsx |
| Massive Broadcast | Send messages to multiple selected guests with a 1-second delay between each. | WhatsAppBroadcast.jsx |
| Scheduled Sends | Program messages for future delivery (requires app to remain open). | WhatsAppBroadcast.jsx |
| Template Editor | Create, save, and edit custom message templates with dynamic variables. | WhatsAppBroadcast.jsx |
Sources: src/components/admin/GuestList.jsx:190-210, src/components/admin/WhatsAppBroadcast.jsx:220-250
Template Engine and Variable Injection
The system uses a custom string replacement engine to inject dynamic data into message templates. This allows administrators to create a single template that automatically adapts to each guest's specific details.
Available Variables
The following variables are supported for injection into templates:
| Variable | Description | Example Data |
|---|---|---|
{{nombre}} | Name of the guest | Juan Pérez |
{{novio}} | Groom's name | Carlos |
{{novia}} | Bride's name | María |
{{fecha}} | Formatted event date | 15 de Marzo, 2025 |
{{lugar}} | Venue name | Hacienda San José |
{{adultos}} | Number of adults | 2 |
{{link}} | Invitation page URL | https://... |
Conditional Logic
The template engine supports basic conditional blocks using a pseudo-Handlebars syntax:
{{#if adultos}}...{{/if}}: Only shows content if the guest has adults assigned.{{#if estado_pendiente}}...{{/if}}: Useful for targeted reminders to unconfirmed guests.
Sources: src/components/admin/WhatsAppBroadcast.jsx:65-90, src/components/admin/WhatsAppBroadcast.jsx:167-200
Implementation Details
Message Sending Logic
Individual and bulk messages are sent by constructing a wa.me URL. For bulk sends, the system implements a setTimeout loop to prevent browser blocks or rate-limiting issues.
// Example of mass send implementation
selectedGuestObjects.forEach((guest, index) => {
setTimeout(() => {
const message = replaceVariables(customMessage, guest)
const encodedMessage = encodeURIComponent(message)
const phone = guest.phone?.replace(/\D/g, '') || ''
window.open(`https://wa.me/${phone}?text=${encodedMessage}`, '_blank')
}, index * 1000) // 1 second delay between each
})
Sources: src/components/admin/WhatsAppBroadcast.jsx:221-230
Component Interaction
The GuestList component serves as the entry point for both individual messaging and launching the WhatsAppBroadcast modal.
Configuration and Persistence
The system persists configuration and metadata in localStorage to maintain state across sessions without requiring a backend database for administrative preferences.
- Templates: Stored under
whatsappTemplates. Defaults include Invitation, Reminder, Thanks, and Update. - History: Stored under
whatsappHistoryto track previous broadcast attempts. - Scheduled: Stored under
scheduledWhatsAppfor pending future messages.
Sources: src/components/admin/WhatsAppBroadcast.jsx:110-125
Technical Requirements and Constraints
- Phone Format: Phone numbers must be present and are sanitized (non-digit characters removed) before URL construction.
- Browser Context: Bulk sending opens multiple tabs/windows; users may need to allow pop-ups for the site.
- Scheduling: Because the system is client-side, the application must remain active in the browser for scheduled sends to trigger.
Sources: src/components/admin/WhatsAppBroadcast.jsx:135-140, src/components/admin/WhatsAppBroadcast.jsx:545-550
In summary, the WhatsApp Integration provides a robust, template-driven communication system that leverages the project's existing guest data to streamline event coordination and guest engagement through direct messaging.