AI Recruitment Case Study

WhatsApp Cloud API trigger for CV actions

When a CV is uploaded, selected or shortlisted on the azizsaif.com recruitment page, the system fires an instant WhatsApp message to the business number through a secure server-side endpoint.

Domainazizsaif.com
TriggerCV submit / select / shortlist
BackendNetlify serverless function
APIWhatsApp Cloud API v21

How it works

The site is static HTML on GitHub Pages. The WhatsApp call happens entirely server-side inside a Netlify function so the API token is never in the browser.

👥Candidate uploads CV on azizsaif.com/Hr-recuritement-ai-process/
↓ POST request (JSON payload)
Netlify function — /.netlify/functions/cv-whatsapp
↓ Server-side API call
💬WhatsApp Cloud API — graph.facebook.com/v21.0/{PHONE_ID}/messages
↓ Instant delivery
📱WhatsApp message on business number

How to build it

Five steps from zero to live WhatsApp alerts on every CV action.

1

Create the WhatsApp Cloud API app in Meta

Go to developers.facebook.com, create an app, add the WhatsApp product, and collect three values: the access token, the Phone Number ID, and the verified recipient number.

Meta for Developers — WhatsApp API Setup
App Dashboard → WhatsApp → API Setup Phone number ID: 1234567890123456 Display number: +971 XX XXXX XXXX Temporary token: EAAxxxxxx... Recipient number: 971XXXXXXXXX (no +) ✓ Send test message to verify
2

Add the Netlify serverless function

Create netlify/functions/cv-whatsapp.js in the repo. This function receives the CV action payload and makes the WhatsApp API call server-side. The token stays private in Netlify environment variables.

// netlify/functions/cv-whatsapp.js exports.handler = async (event) => { if (event.httpMethod !== "POST") return { statusCode: 405, body: "Method Not Allowed" }; const { candidateName, positionApplied, cvUrl, action } = JSON.parse(event.body || "{}"); const WA_TOKEN = process.env.WHATSAPP_TOKEN; const WA_PHONE_ID = process.env.WHATSAPP_PHONE_ID; const WA_TO = process.env.WHATSAPP_RECIPIENT_NO; const res = await fetch( "https://graph.facebook.com/v21.0/" + WA_PHONE_ID + "/messages", { method: "POST", headers: { "Authorization": "Bearer " + WA_TOKEN, "Content-Type": "application/json" }, body: JSON.stringify({ messaging_product: "whatsapp", to: WA_TO, type: "text", text: { body: action + ": " + candidateName + " — " + positionApplied } }) } ); const data = await res.json(); return { statusCode: res.ok ? 200 : 502, body: JSON.stringify({ success: res.ok, data }) }; };
3

Set environment variables in Netlify

In Netlify go to Site Settings → Environment Variables and add the three secrets. These are never committed to the repo.

Netlify — Environment Variables
WHATSAPP_TOKEN = EAAxxxxxx... WHATSAPP_PHONE_ID = 1234567890123456 WHATSAPP_RECIPIENT_NO = 971XXXXXXXXX ✓ Encrypted. Never exposed to browser.

Also add netlify.toml to the repo root to wire the functions directory and CORS headers.

[build] publish = "." functions = "netlify/functions" [[headers]] for = "/.netlify/functions/*" [headers.values] Access-Control-Allow-Origin = "https://azizsaif.com" Access-Control-Allow-Methods = "POST, OPTIONS"
4

Wire trigger events on the recruitment page

Add the JavaScript trigger block to Hr-recuritement-ai-process/index.html. It listens for file upload, shortlist-ready and candidate-select actions then posts to the Netlify function.

// Drop-in trigger — paste before </body> in recruitment page async function sendCVWhatsApp(action, candidate) { try { await fetch("/.netlify/functions/cv-whatsapp", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action, candidateName: candidate.name || "Unknown", positionApplied: candidate.position || "Promoter", cvUrl: "https://azizsaif.com/Hr-recuritement-ai-process/" }) }); } catch (e) { console.warn("WA trigger:", e.message); } } // Trigger 1: file upload document.querySelector('input[type="file"]') ?.addEventListener("change", (e) => { sendCVWhatsApp("cv_submitted", { name: e.target.files.length + " CV(s) uploaded", position: "Promoter Screener" }); }); // Trigger 2: select / shortlist buttons (via data attributes) document.addEventListener("click", (e) => { const btn = e.target.closest("[data-wa-action]"); if (!btn) return; sendCVWhatsApp(btn.dataset.waAction, { name: btn.dataset.candidateName, position: btn.dataset.position }); });
5

Test live and push to GitHub

Upload a sample CV and confirm the WhatsApp message arrives. Then push all files to the aziz-saif-story repo — Netlify auto-deploys from main.

Terminal — git push
git add netlify/ netlify.toml Hr-recuritement-ai-process/index.html case-studies/whatsapp-cv-trigger.html git commit -m "feat: WhatsApp Cloud API CV trigger" git push origin main ✓ Netlify auto-deploys from main ✓ Function live at /.netlify/functions/cv-whatsapp ✓ WhatsApp alerts active on all CV actions

What this delivers

3trigger points
(upload, select, shortlist)
<2sWhatsApp delivery
after CV action
0tokens exposed
to the browser

Instant recruiter awareness

Know the moment a candidate uploads, is selected, or reaches Tier A without opening the dashboard.

Secure by design

WhatsApp token lives only in Netlify env vars. The frontend never touches credentials.

Reusable pattern

The same trigger function works across all AI service pages on azizsaif.com — one endpoint, multiple trigger points.

Open the demo

The recruitment screener is live. The WhatsApp trigger requires the Netlify function with valid API credentials.