WhatsApp Integration
Relevant source files
The following files were used as context for generating this wiki page:
WhatsApp Integration serves as the primary communication and conversion channel for AVP Supercars. It is designed to provide "Monaco-level" concierge service by offering high-speed, direct access to human agents for car rental, sourcing, and logistics requests. The integration is implemented through persistent UI elements and dynamic lead generation forms that pre-populate messages for the user.
The system bypasses traditional backend processing by utilizing wa.me deep links, allowing users to initiate encrypted chats directly from their browser or mobile device. This approach aligns with the project's goal of "clean communication" and "fast response" for premium clientele.
Sources: app/about/page.tsx:88, components/WhatsAppFloat.tsx:16, app/services/page.tsx:107
Architecture and Components
The integration consists of two main implementation patterns: a persistent floating action button and a structured request form that generates context-aware messages.
WhatsApp Floating Action Button
The WhatsAppFloat component is a globally accessible UI element. It is injected into the RootLayout, ensuring it remains visible across all application routes.
The component uses a fixed position at the bottom-right of the viewport with a high z-index (50) to maintain visibility over other content.
Sources: app/layout.tsx:86, components/WhatsAppFloat.tsx:5-15
Structured Request Form
The RequestForm component provides a more sophisticated integration by capturing specific user data and formatting it into a readable WhatsApp message.
| Field | Purpose | Source |
|---|---|---|
| Name | User identification | components/RequestForm.tsx:10 |
| Phone | Contact callback | components/RequestForm.tsx:11 |
| Car | Specific vehicle model | components/RequestForm.tsx:13 |
| Dates | Start and End rental period | components/RequestForm.tsx:14-15 |
| Location | Delivery destination | components/RequestForm.tsx:16 |
Data Flow and Message Generation
The integration relies on URL encoding to bridge the gap between the React state and the WhatsApp external interface.
Message Formatting Logic
Within the RequestForm, a useMemo hook is utilized to construct the whatsappText. This ensures that the message body is updated in real-time as the user types, without unnecessary re-renders.
Sources: components/RequestForm.tsx:39-50
Technical Implementation Details
The integration uses the following configuration constants (placeholders in the current demo):
- Phone Number: Defined as
whatsappNumberwithin components. Sources: components/WhatsAppFloat.tsx:4, components/RequestForm.tsx:36 - URL Pattern:
https://wa.me/${whatsappNumber}?text=${text}. Sources: components/WhatsAppFloat.tsx:9 - Default Text: A pre-defined string "Hi AVP Supercars, I’d like to request a car." is used for the floating button. Sources: components/WhatsAppFloat.tsx:5
Entry Points and User Experience
WhatsApp is promoted as the "fastest reply" method throughout the application's marketing copy and functional areas.
- Service Page: Encourages WhatsApp contact for "concierge-level" speed. Sources: app/services/page.tsx:115
- Location Page: Advises users that the fastest booking occurs when sending car, dates, and location via chat. Sources: app/locations/page.tsx:165
- Contact Page: Displays WhatsApp as a primary direct contact alongside traditional phone and email. Sources: app/contact/page.tsx:21
- Global Layout: The
WhatsAppFloatprovides a "Fast reply" indicator to manage user expectations. Sources: components/WhatsAppFloat.tsx:16
Summary
The WhatsApp Integration in the AVP Supercars project is a strategic UX choice that prioritizes immediate, high-touch communication. By leveraging React's state management to build complex, URL-encoded strings, the system provides a seamless transition from web-based inquiry to mobile-based conversation, facilitating faster confirmation of availability, rates, and deposits.