Overview
The WhatsApp API provides functions to create WhatsApp links and open WhatsApp conversations with pre-filled messages.
Source: src/config/whatsapp.js
Functions
openWhatsApp()
Opens WhatsApp in a new tab with a pre-filled message.
import { openWhatsApp } from '@/config/whatsapp';
const ProductCard = ({ product }) => {
const handleWhatsAppOrder = () => {
openWhatsApp(product.name);
};
return (
<button onClick={handleWhatsAppOrder}>
Order via WhatsApp
</button>
);
};
Name of the product to include in the message
Custom message to send. If not provided, uses product-specific or default message template
- Opens WhatsApp in a new browser tab
- Uses
window.open() with noopener,noreferrer for security
- Message is URL-encoded automatically
- Message selection priority:
- Custom message (if provided)
- Product-specific message from
WHATSAPP_CONFIG.productMessages
- Default message template with product name
createWhatsAppURL()
Creates a WhatsApp URL with a pre-filled message.
import { createWhatsAppURL } from '@/config/whatsapp';
const url = createWhatsAppURL('ABC Su');
console.log(url);
// "https://wa.me/905303099887?text=Merhaba%2C%20ABC%20Su%20sipari%C5%9F%20etmek%20istiyorum."
// With custom message
const customUrl = createWhatsAppURL('ABC Su', 'Fiyat bilgisi alabilir miyim?');
Name of the product to include in the message
Custom message to send. If not provided, uses product-specific or default message template
Full WhatsApp URL with encoded message
Returns URL in format: https://wa.me/{phoneNumber}?text={encodedMessage}Example:https://wa.me/905303099887?text=Merhaba%2C%20ABC%20Su%20sipari%C5%9F%20etmek%20istiyorum.
Configuration
WHATSAPP_CONFIG
WhatsApp configuration object.
import { WHATSAPP_CONFIG } from '@/config/whatsapp';
console.log(WHATSAPP_CONFIG.phoneNumber); // "905303099887"
Show Configuration Properties
phoneNumber
string
default:"905303099887"
WhatsApp phone number with country code (without + symbol)Format: {countryCode}{phoneNumber}
- Turkey example:
905303099887 (90 = country code)
Default message template. Supports {productName} placeholderDefault: "Merhaba, {productName} sipariş etmek istiyorum."
Product-specific message templates. Keys are product names (lowercase), values are custom messagesExample:{
"abc su": "Merhaba! ABC Su ürününüz hakkında detaylı bilgi alabilir miyim?"
}
Message Selection Priority
The API selects messages in this order:
- Custom message (if provided as parameter)
- Product-specific message from
WHATSAPP_CONFIG.productMessages[productName.toLowerCase()]
- Default message template with
{productName} replaced
Adding Product-Specific Messages
// In whatsapp.js
export const WHATSAPP_CONFIG = {
phoneNumber: "905303099887",
defaultMessage: "Merhaba, {productName} sipariş etmek istiyorum.",
productMessages: {
"abc su": "ABC Su hakkında bilgi almak istiyorum.",
"damacana 19l": "19L Damacana sipariş etmek istiyorum. Teslimat süresi nedir?",
"su paketi": "Su paketi fiyatları nedir?"
}
};
Usage Examples
Basic Product Order
import { openWhatsApp } from '@/config/whatsapp';
const ProductDetail = ({ product }) => (
<div>
<h2>{product.name}</h2>
<button onClick={() => openWhatsApp(product.name)}>
Order via WhatsApp
</button>
</div>
);
Cart Order with Custom Message
import { openWhatsApp } from '@/config/whatsapp';
import { useCart } from '@/context/CartContext';
const CartCheckout = () => {
const { getCartMessage } = useCart();
const handleCheckout = () => {
const cartMessage = getCartMessage();
openWhatsApp('Sepet', cartMessage);
};
return (
<button onClick={handleCheckout}>
Send Order via WhatsApp
</button>
);
};
Share WhatsApp Link
import { createWhatsAppURL } from '@/config/whatsapp';
const ShareButton = ({ productName }) => {
const whatsappUrl = createWhatsAppURL(productName);
return (
<a href={whatsappUrl} target="_blank" rel="noopener noreferrer">
<WhatsAppIcon /> Share on WhatsApp
</a>
);
};
import { openWhatsApp } from '@/config/whatsapp';
const QuickInfoButton = ({ productName }) => {
const askQuestion = () => {
const message = `${productName} hakkında fiyat ve teslimat bilgisi alabilir miyim?`;
openWhatsApp(productName, message);
};
return (
<button onClick={askQuestion}>
Ask about this product
</button>
);
};
The phone number must be in international format without the + symbol:
| Country | Format | Example |
|---|
| Turkey | 90XXXXXXXXXX | 905303099887 |
| USA | 1XXXXXXXXXX | 12025551234 |
| UK | 44XXXXXXXXXX | 447700900123 |
Do not include:
- Plus sign (+)
- Spaces
- Dashes or parentheses
- Leading zeros after country code