Skip to content

WhatsApp Floating Button

What It Does

Add a floating WhatsApp button to your store that stays visible as customers browse. When clicked, it opens a WhatsApp chat with your business number, making it easy for customers to ask questions.

When to Use It

Enable this plugin if you want to:

  • Provide instant customer support via WhatsApp
  • Make it easy for customers to contact you
  • Increase customer engagement and sales
  • Answer product questions in real-time
  • Build trust with direct communication

How It Works

A green WhatsApp icon appears in the corner of your store. When customers click it, WhatsApp opens with a pre-filled message. On product pages, the message automatically includes the product name and link.

Setup Instructions

Step 1: Get Your WhatsApp Business Number

You need a WhatsApp-enabled phone number:

  1. Use your existing WhatsApp Business number
  2. Include the country code (e.g., +966 for Saudi Arabia)
  3. Don't include spaces or dashes

Example formats: - ✅ Correct: +966501234567 - ❌ Wrong: 0501234567 - ❌ Wrong: +966 50 123 4567

Step 2: Enable the Plugin

  1. In your store admin, go to System Settings > Plugins
  2. Find the WhatsApp Floating Button card
  3. Click Configure
  4. Enable the plugin using the toggle switch
  5. Configure the settings (see below)
  6. Click Save

Configuration Fields

Enabled

Type: Toggle Description: Turn the button on or off

WhatsApp Number

Type: Text Required: Yes Format: +[country code][number] Description: Your WhatsApp Business number with country code

Example: +966501234567

Welcome Message

Type: Text Required: No Description: The message that appears in WhatsApp when customers click the button. On product pages, the product info is automatically added.

Default: Hello, I have a question

Examples: - Hi! I'd like to know more about your products - Hello, I need help with my order - مرحباً، لدي استفسار (Arabic)

Button Size

Type: Number Range: 36 to 96 pixels Default: 56 Description: The diameter of the WhatsApp button icon

Recommendations: - Small (36-48px): Less intrusive, works well on mobile - Medium (50-64px): Balanced, default size - Large (70-96px): Very visible, good for desktop

Show on Desktop

Type: On/Off Default: On

Description: Whether the floating button appears on computer screens (width 1024px and up).

Show on Mobile

Type: On/Off Default: Off

Description: Whether the floating button appears on phones. It is off by default because the mobile bottom bar usually carries its own WhatsApp button, so a phone visitor already has one.

These two settings are the only thing that decides where this button shows. They say nothing about the bottom bar, which has its own WhatsApp button and its own show/hide switch. If you turn this on while the bar also shows WhatsApp, phone visitors see two - that is allowed, and the choice is yours.

Button Position

Type: Select Default: Bottom Right Options: Bottom Right (most common), Bottom Left, Top Right, Top Left, Center Right, Center Left

Description: Which corner the floating button sits in. The same corner is used on every screen size.

Note: For Arabic sites (RTL), left/right positions automatically flip (right becomes left, left becomes right).

Vertical Margin

Type: Number Range: 0 to 200 pixels Default: 20 Description: Distance from the top or bottom edge of the screen

Example: - 20 = 20px from bottom/top - 50 = more space from bottom/top

Horizontal Margin

Type: Number Range: 0 to 200 pixels Default: 20 Description: Distance from the left or right edge of the screen

Example: - 20 = 20px from right/left edge - 50 = more space from right/left edge

Smart Features

Automatic Product Detection

When customers click the button on a product page, the WhatsApp message automatically includes:

  • Product name
  • Product link
  • Your welcome message

Example message sent:

Hello, I have a question

I'm interested in: iPhone 14 Pro Max
https://yourstore.com/products/iphone-14-pro-max

RTL Language Support

For Arabic and other right-to-left languages: - "Bottom Right" automatically becomes "Bottom Left" - "Top Right" becomes "Top Left" - No need to change settings when switching languages

Best Practices

Position: - Use "Bottom Right" for most stores (Bottom Left for Arabic) - Avoid covering important buttons or content

Welcome Message: - Keep it short and friendly - Use the customer's language - Mention what you can help with

Size: - Mobile: 48-56px (not too big) - Desktop: 56-64px (easier to see)

Response Time: - Respond quickly to WhatsApp messages - Set up auto-replies during off-hours - Use WhatsApp Business for better features

Troubleshooting

Button not appearing? - Make sure the plugin is enabled - Clear your browser cache - Check if you're blocking the WhatsApp domain

WhatsApp opens but number is wrong? - Verify your number includes the country code - Remove any spaces, dashes, or parentheses - Format example: +966501234567

Button covers important content? - Adjust the position setting - Increase vertical or horizontal margin - Try a smaller button size