How to Send WhatsApp Messages from Wix Forms Using Zaple.ai

Are you looking for a reliable way to instantly engage with your website visitors the moment they reach out?

If you're using Wix Forms V2 and want to automatically send a WhatsApp template message after a successful form submission, you're in the right place. In this guide, we'll walk you through a clean, secure, and production-friendly setup using Zaple.ai and Wix Velo.

By connecting your Wix form to Zaple.ai's powerful API, you can instantly follow up with leads, confirm event registrations, or send rich media like images and documents directly to their WhatsApp.

Let's dive into how to build this seamless frontend-to-backend integration.

Why Connect Wix Forms to WhatsApp?

In today's fast-paced digital world, email follow-ups often get lost in spam folders. WhatsApp, boasting a 98% open rate, ensures your message is seen instantly.

With this integration, you achieve:

• Instant Lead Engagement: Strike while the iron is hot by messaging users right after they submit an inquiry.
• Secure Architecture: Keep your API keys hidden on the backend using Wix Secrets Manager.
• Rich Media Support: Zaple's v3 API allows you to send stunning templates with image headers and dynamic variables seamlessly.

What We Are Building: The Integration Flow

1. A visitor submits your Wix Forms V2 form.
2. The onSubmitSuccess() event fires on your webpage.
3. The script extracts the submitted details using getFieldValues().
4. The page securely passes this data to a Wix backend web method.
5. The backend safely retrieves your Zaple credentials from the Wix Secrets Manager.
6. A POST request triggers Zaple’s v3 template-message API.
7. Your visitor instantly receives a personalized WhatsApp template message!

Prerequisites

Before we write any code, ensure you have the following ready:

• A published Wix site with Velo (Dev Mode) enabled.
• A Wix Forms V2 form embedded on a page.
• An active Zaple.ai account.
• An approved WhatsApp template in your Zaple dashboard.
• Your Zaple Template ID.
• A public image URL (if your template features a media header).

Step 1: Securely Store Your Zaple API Secrets in Wix

Never hardcode API keys in your frontend code. Using Wix Secrets Manager ensures your credentials stay secure.

Go to your Wix Dashboard → Settings → Secrets Manager and create these two secrets:

• Zaple_API_Key
• Zaple_API_Secret

Step 2: Configure Your Wix Page Code (Frontend)

Open your Wix Editor, turn on Dev Mode, and select your form page. We need to attach logic to the form element to capture data only after a successful submission.

Add the following code to your page:

import { sendThankYouMessage } from 'backend/zaple.web';

$w.onReady(function () {
    // Listen for a successful form submission
    $w("#form2").onSubmitSuccess(async () => {
        console.log("Form submission detected!");

        // Retrieve the submitted values
        const submissionFields = $w("#form2").getFieldValues();
        console.log("Field Values:", submissionFields);

        // Map your form field keys here
        const firstName = submissionFields.first_name;
        const rawPhone = submissionFields.whatsapp_number_1;

        if (!rawPhone) {
            console.error("Phone field (whatsapp_number_1) was empty or not found.");
            return;
        }

        // Clean the phone number (keep only digits)
        const phoneNumber = String(rawPhone).replace(/\D/g, "");

        console.log("Name to send:", firstName);
        console.log("Phone to send:", phoneNumber);

        try {
            // Call the secure backend method
            const response = await sendThankYouMessage(firstName, phoneNumber);
            console.log("Zaple response received:", response);
        } catch (err) {
            console.error("Error calling Zaple:", err);
        }
    });
});

Step 3: Create the Secure Backend Web Module

To execute the API call securely, we must create a backend Web Module.

In your Wix Velo sidebar, under Backend, create a new file named zaple.web.js and paste this code:

import { Permissions, webMethod } from "wix-web-module";
import { fetch } from "wix-fetch";
import { getSecret } from "wix-secrets-backend";

// Create an explicitly permissioned web method to be called from the frontend
export const sendThankYouMessage = webMethod(
    Permissions.Anyone,
    async (firstName, phoneNumber) => {
        console.log("sendThankYouMessage called", { firstName, phoneNumber });

        const url = "https://app.zaple.ai/api/v3/send-template-message";

        // Retrieve secure credentials
        const apiKey = await getSecret("Zaple_API_Key");
        const apiSecret = await getSecret("Zaple_API_Secret");

        // Construct the Zaple payload
        const payload = {
            template_id: "56386517725194833309742", // Replace with your template ID
            country_code: "91", // Default country code
            send_to: phoneNumber,

            // Required if your template includes a media header
            media_url_type: "public_url",
            media_url: "https://assets.zaple.ai/7/U3l6GpdzpHjShICdW2FWcmNguZ3JG5pnAubXzeTH.jpg"

            // Uncomment to pass dynamic variables, like the user's name
            // body_text1: firstName
        };

        console.log("Zaple payload:", payload);

        // Send the request to Zaple
        const response = await fetch(url, {
            method: "POST",
            headers: {
                "Zaple-Api-Key": apiKey,
                "Zaple-Api-Secret": apiSecret,
                "Content-Type": "application/json"
            },
            body: JSON.stringify(payload)
        });

        const responseText = await response.text();
        console.log("Zaple raw response:", response.status, responseText);

        if (!response.ok) {
            throw new Error(`Zaple API error ${response.status}: ${responseText}`);
        }

        try {
            return JSON.parse(responseText);
        } catch (e) {
            return { success: true, rawResponse: responseText };
        }
    }
);

⚠️ A Common Backend Mistake

A frequent error is exporting a plain async function instead of a proper webMethod(). Current Wix Velo standards require you to use webMethod(Permissions.Anyone, async () => { ... }) for frontend-callable backend functions. If you forget this, the frontend import will fail.

Step 4: Map Your Wix Form Field IDs Exactly

Your script relies entirely on the precise field keys returned by $w("#form2").getFieldValues().

If your output looks like this:

{
  "first_name": "test",
  "whatsapp_number_1": 9099039992
}

You must ensure that your variables in Step 2 (submissionFields.first_name and submissionFields.whatsapp_number_1) exactly match the IDs in your Wix Form settings.

Step 5: Handling Media in WhatsApp Templates

If your approved WhatsApp template in Zaple has an image or document header, you must include the media fields in your payload:

media_url_type: "public_url",
media_url: "https://your-public-image-url.com/image.png"

Note: Ensure the URL used is publicly accessible and does not require authentication to view.

Step 6: Testing and Troubleshooting

Publish or preview your site, submit a test form, and monitor your Site Logs in the Wix dashboard.

What You Should See:

• Frontend Logs: Form submission detected! → Name to send: ...
• Backend Logs: sendThankYouMessage called → Zaple payload: ... → Zaple raw response: 200
• Your Phone: A successful WhatsApp ping! 📱

Quick Troubleshooting Guide:

1. Frontend logs are appearing, but no backend logs?
   You likely exported a plain function instead of webMethod(...), or your import path is incorrect. Ensure your file is saved precisely as backend/zaple.web.js.
2. Backend is running, but no WhatsApp message is received?
   Check for invalid API Keys / Secrets, using the wrong template_id, or an invalid phone number format. If you are passing country_code: "91", make sure send_to only contains the 10-digit local number (e.g., 9099039992, not 919099039992).
3. Dynamic Template Variables are blank?
   If your template says "Hi {{1}}, thank you...", you must pass body_text1: firstName in your Zaple payload. Check Zaple's template setup for exact variable indexing.

Final Thoughts

Integrating Wix Forms V2 with Zaple.ai is one of the most practical and impactful automations you can build for lead generation, event registration, and customer inquiries.

By leveraging Wix's backend capabilities and onSubmitSuccess(), you ensure your API credentials remain untouchable while delivering a rapid, personalized experience to your customers via WhatsApp.

Frequently Asked Questions