Everything you need to get started in minutes
In HubSpot page editor, click Add → search "WhatsApp Order Card" → drag it onto your page.
In the Content tab, find "Business WhatsApp number" → enter your number with country code (no +, spaces, or dashes).
Example India: 919876543210 | UK: 447911123456 | USA: 14155552671
In the Content tab → Products section → edit each product (image, name, price, description, button text) → Publish.
| Field | Description |
|---|---|
| Business WhatsApp number | Your business number with country code. No +, spaces, or dashes. This is where all orders will come. |
| Enable HubSpot click tracking | Toggle ON to fire a HubSpot behavioral event when someone clicks the order button. Use for analytics in HubSpot. |
| Field | Description |
|---|---|
| Product image | Upload or select an image for this product card. |
| Product name | The name shown on the card and in the WhatsApp message. |
| Product price | Price text (e.g., ₹999). Shown on card and in message. |
| Show price | Toggle to hide/show the price on the card. |
| Product description | Short description shown below the product name. |
| Pre-filled WhatsApp message | Message sent when order button is clicked. Use {{product_name}} and {{product_price}} as placeholders. |
| Button text | Text shown on the order button. Default: "Order on WhatsApp". |
{{product_name}} and {{product_price}} in your message template — they are automatically replaced with the actual product values when someone clicks the button.| Section | Options Available |
|---|---|
| Layout | Display Mode (Grid or Slider/Carousel) · Spacing between cards (px) |
| Card | Background color · Border color · Border radius · Card padding · Shadow on/off · Shadow color |
| Image | Aspect ratio (Square / Landscape / Portrait) · Image border radius |
| Product name | Font family · Font size · Font color · Font weight |
| Price | Font family · Font size · Font color · Strikethrough toggle |
| Description | Font family · Font size · Font color · Line height |
| Button | Background color · Hover color · Text color · Border radius · Show/hide WhatsApp icon |
The number of columns automatically matches the number of products you add:
On tablets (≤960px) → 2 columns automatically. On mobile (≤600px) → 1 column.
Shows products as a horizontally scrollable carousel with Previous / Next arrow buttons. Ideal for showcasing 5+ products. Switch to Slider in Styles → Layout → Display Mode.
📱 On mobile → WhatsApp App opens directly
🖥️ On desktop → WhatsApp Web opens in a new tab
Example: "Hi, I would like to order: Organic Skincare Kit - ₹999"