Looking for a simple way to let guests book directly via WhatsApp?
Adding a 'Book on WhatsApp' button to your tourism website makes the process stress-free and convenient.

Instead of endless back-and-forth emails, potential guests can fill out a quick form and instantly send a pre-filled message straight to your WhatsApp. No plugins needed, just a bit of custom HTML code that you can easily add to your site. If you need help implementing on your website, please let us know.

If you need a custom form, please let your web designer or agency know, and they can edit the code as needed. If you still need help, contact us.

Why Add a WhatsApp Booking Button?

Instant Communication – Guests can reach you directly without waiting for emails.
Pre-filled Booking Info – No need to ask for extra details; everything is sent in one message.
No Extra Costs – No third-party booking fees or complicated systems.
Mobile-Friendly – Most people book via their phones, making WhatsApp an easy option.

How it works

Select dates and enter details

Details confirmed and passed to WhatsApp button

Get Guests to Book on WhatsApp

A simple form collects basic booking details
(date range calendar, number of guests, accommodation type).
The form automatically formats the details into a WhatsApp message.
When the visitor clicks on the Book on WhatsApp button, it sends the message directly to your WhatsApp number with one click.

Add This Custom Code to Your Website

Below is the custom HTML code you can use. Simply replace onclick="sendWhatsApp('+27XXXXXXXXX')" with your actual WhatsApp number in this format +27XXXXXXXXX, and you're good to go:

To use the date range selection option, you will need to add Flatpickr calendar to your websites head.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

Form Code:

<label for="date-range">Select Your Stay:</label>
<input type="text" id="date-range" required placeholder="Select date range">

<label for="guests">Number of Guests:</label>
<input type="number" id="guests" min="1" required>

<label for="accommodation">Accommodation Type:</label>
<select id="accommodation" required>
    <option value="" disabled selected>Select Accommodation Type</option>
    <option value="Caravan Stand">Caravan Stand</option>
    <option value="Tented Camp">Tented Camp</option>
    <option value="Chalet">Chalet</option>
    <option value="Cabin">Cabin</option>
</select><br>

<!-- Notification -->
<p id="bookingMessage" style="display: none; font-weight: 600;">
    ✅ Saved, scroll down to book via WhatsApp!</p>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        flatpickr("#date-range", {
            mode: "range",
            dateFormat: "d M Y",
            minDate: "today",
            onClose: function(selectedDates) {
                checkFields();
            }
        });
    });

    function checkFields() {
        let dateRange = document.getElementById("date-range").value;
        let guests = document.getElementById("guests").value;
        let accommodation = document.getElementById("accommodation").value;
        let message = document.getElementById("bookingMessage");

        if (dateRange && guests && accommodation) {
            message.style.display = "block";
        } else {
            message.style.display = "none";
        }
    }

    function sendWhatsApp(phone) {
        let dateRange = document.getElementById("date-range").value || "";
        let guests = document.getElementById("guests").value || "";
        let accommodation = document.getElementById("accommodation").value || "Not specified";
        let property = event.target.getAttribute("data-property") || "Unknown Campsite";
        let reference = "StayHere"; 

        if (!dateRange || !guests || !accommodation) {
            alert("Please fill in all fields before booking.");
            return;
        }

        let message = `Hello, I would like to book at ${property}.\n\nDates: ${dateRange}\nGuests: ${guests}\nReference: ${reference}\nAccommodation Type: ${accommodation}`;
        let whatsappURL = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;

        window.open(whatsappURL, "_blank");
    }

    document.getElementById("guests").addEventListener("input", checkFields);
    document.getElementById("accommodation").addEventListener("change", checkFields);
</script>

Button Code:

<button class="wabutton" type="button" data-property="Your Property Name"  onclick="sendWhatsApp('+27XXXXXXXXX')"> Book on WhatsApp</button>

How to Use It:

Copy and paste the code above into your website where you want the booking form to appear.
Replace onclick="sendWhatsApp('+27XXXXXXXXX')" with your actual WhatsApp number (use international format, e.g., +27XXXXXXXXX for South Africa).
In the button code; replace the data-property="Your Property Name" with your own property name.
Save and refresh your website; your visitors can now book with a single click!

Need help? Let us know →

Stress-Free Booking for Your Guests!

Adding a WhatsApp booking button is a quick and effective way to simplify reservations and boost conversions. Guests love the ease of instant messaging, and you get direct bookings from your website. Try it out, and let your visitors book hassle-free today!

Let me know in the comments if you need any tweaks or additional features!

If you need help implementing on your website, please let us know.