WhatsApp has become one of the most effective means of communication in the world since it’s a platform people not only trust but use constantly. It’s no wonder, then, that people are now adapting WhatsApp to send surveys as well, for customer follow-ups after a purchase, service feedback for restaurants and retail, and much more. That's because WhatsApp’s high engagement and global accessibility make it a natural fit for collecting real-time feedback. What if I told you that you can build one for yourself, too? In this tutorial, you’ll learn how to build a complete WhatsApp survey system using Next.js, Strapi, and Twilio. ## Prerequisites To follow through with this tutorial, the following prerequisites should be met: - [Node.js installed (18++)](https://nodejs.org/en/download) - Basic understanding of [JavaScript](https://strapi.io/blog/comprehensive-review-of-top-javascript-frontend-frameworks). - Understanding of Next.js - A code editor. - A [Twilio account](https://www.twilio.com) (either free or paid). If you are new to Twilio, click here to create a free account. - [ngrok](https://ngrok.com/) setup ## What We're Building So, here's the scope of the project. * We'll use [Next.js](https://strapi.io/integrations/nextjs-cms) as the frontend to allow us to trigger surveys and view the responses. * [Strapi](https://strapi.io) will serve as the backend, which serves as content management for your survey questions and stores all our responses. * Finally, we'll use [Twilio](https://strapi.io/blog/how-to-create-and-use-sms-and-email-services-in-strapi-1) to handle the messaging layer, managing both outgoing and incoming questions. ## Start up your Ngrok To start up ngrok, run this command: ```bash ngrok http 3000 ``` Copy the ngrok URL from your terminal, it’ll look something like https://abcd1234.ngrok.io. You’ll need this for Twilio to send webhook requests to your local development server. This ensures Twilio can forward replies from users directly into your app while testing locally. ## Get your Twilio Credentials Log in to the Twilio Console. From the Account Info panel of the main dashboard, copy your Account SID, Auth Token, and phone number. Again, store them somewhere safe, for the time being. ![Twillio API key setup.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Build_a_Whatt_Sapp_Survery_app_19184f07a9.png) Next, head over to **Explore products** and click on **Messaging** and then **Try WhatsApp**. This will redirect to the WhatsApp sandbox. Head over to the sandbox settings tab and update the URL with this: ```bash your-ngrok-url/api/receive-response ``` The `receive-response` is the webhook and we'll create that later in the tutorial. ![Try Whatsapp.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Try_Whatsapp_0857ec14be.png) ## Setup Strapi Backend and Collection Types You need to have Strapi installed on your local machine. Navigate to the folder you want your project installed in the terminal and run this command: ```bash npx create-strapi@latest my-strapi-project ``` Replace `my-strapi-project` with the actual project name you intend to use. Once you've run this command, the terminal will ask if you want to `Login/Signup` or `skip` this step. Make your pick by using the arrow keys and pressing Enter. If you opt to log in, you will receive a 30-day trial of the Growth plan, which will be automatically applied to your newly formed project. If you neglect this step, your project will revert to the CMS Free plan. Proceed to set up Strapi the way you want it. To start the Strapi application, run the following command in the project folder: ```bash npm run develop ``` You’ll need to sign up to access your Strapi dashboard. After you’re done signing up, you should have a dashboard. ### Create Collection Type and Fields in Strapi The next step to setting up Strapi is to create a `collection type`. Navigate to **Content-Type Builder** on the side navigation bar of your dashboard. For this project, we'll create two collection types and click on the **+** sign to create a new collection type. For this project, we'll create two collection types. One for a survey and the other for a response. For the first collection type, name it **Survey-question** and click the "Continue" button. This will take you to the next step: selecting the fields appropriate for your collection type. Give it the following fields: - `questionText` (Text, required) - `order` (Number, required) - `isActive` (Boolean, default: true) Click on "finish" and then save the collection type. Your collection type should look like this: ![Survey Question Collection.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Survey_Question_Collection_84def648a8.png) For the second collection, name it `survey-response`. Click the "Continue" button. This will take you to the next step: selecting the fields appropriate for your collection type. Give it the following fields: - `phoneNumber` (Text, required) - `questionId` (Number, required) - `questionText` (Text) - `answer` (Text, required) - `timestamp` (DateTime, default: now) Click on "finish" and then save the collection type. Your collection type should look like this: ![Survey Response Collection.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Survey_Response_Collection_056d0a340f.png) ### Add Sample Questions Head over to **Content Manager>survey-question** and populate with a few questions like: - Order: 1, Text: "How would you rate our service? (1-5)" - Order: 2, Text: "What did you like most about your experience?" - Order: 3, Text: "Any suggestions for improvement?" ![Add Sample Data.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Add_Sample_Data_355e22ef5b.png) ### Enable Public Access After creating your collection type, navigate to **Settings > USERS & PERMISSIONS PLUGIN > Roles**and click on **Public**. Then scroll down to Permissions, click on **survey-question**, select `find` and `findOne,` and click **Save**. ![Enable Public API Access.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Enable_Public_API_Access_605f17c76a.png) Also, click on **survey-response** and select `create,` `find,` `findOne` and click **Save**. ![Enable Public Access 2.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Enable_Public_Access_2_d13d99c811.png) ### Create an API Token To create an API token, navigate to **Settings > API Tokens**. Create a new API token and set it, naming it what you want and giving it full access. ![Create an API Token.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Create_an_API_Token_dd3056b996.png) So we've finished setting up Strapi. Let us now set up and develop the frontend. ## Create the Next.js Project To install Next.js, navigate back to the project folder in the terminal. Run the following command: ```bash npx create-next-app@latest ``` Follow the instructions to set up your project, but ensure to use the `app router` because that's what we'll be using in our project: ```bash What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes Would you like your code inside a `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to use Turbopack for `next dev`? No / Yes Would you like to customize the import alias (`@/*` by default)? No / Yes What import alias would you like configured? @/* ``` Below is a representation of how our project folder will look ```bash src/app/ ├── api/ │ ├── send-survey/ │ │ └── route.js │ └── receive-response/ │ └── route.js ├── send-survey/ │ └── page.js ├── responses/ │ └── page.js ├── questions/ │ └── page.js └── page.js ``` ### Environment Variables Create .env.local in your Next.js project and the Twilio credentials, your Strapi API token as well as the URL like so: ```bash TWILIO_ACCOUNT_SID=your_twilio_account_sid TWILIO_AUTH_TOKEN=your_twilio_auth_token TWILIO_WHATSAPP_FROM=whatsapp:+14155238886 STRAPI_API_URL=http://localhost:1337 STRAPI_API_TOKEN=your_strapi_api_token ``` ### Install the Required Dependencies For this project, we'll be installing Twilio and axios. Open up a terminal and navigate to your project folder. Run the following code: ```bash npm install twilio axios ``` ### Create the API Route for Sending the Survey You need an API endpoint that will be used to fetch the questions from Strapi and send them via WhatsApp using Twilio. Create a folder named `api` in the root project folder, then inside it, add a `send-survey` subfolder. Inside that, create a file named `route.js`. Add the following code: ```javascript import { NextResponse } from "next/server"; import twilio from "twilio"; const requiredEnvVars = { TWILIO_ACCOUNT_SID: process.env.TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN: process.env.TWILIO_AUTH_TOKEN, TWILIO_WHATSAPP_FROM: process.env.TWILIO_WHATSAPP_FROM, STRAPI_API_URL: process.env.STRAPI_API_URL, STRAPI_API_TOKEN: process.env.STRAPI_API_TOKEN, }; const missingVars = Object.entries(requiredEnvVars) .filter(([key, value]) => !value) .map(([key]) => key); if (missingVars.length > 0) { console.error(`Missing environment variables: ${missingVars.join(", ")}`); } const client = twilio( process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN ); export async function POST(request) { try { if (missingVars.length > 0) { console.error(`Missing environment variables: ${missingVars.join(", ")}`); return NextResponse.json( { error: `Missing environment variables: ${missingVars.join(", ")}` }, { status: 500 } ); } const { phoneNumber } = await request.json(); if (!phoneNumber) { return NextResponse.json( { error: "Phone number is required" }, { status: 400 } ); } const strapiUrl = `${process.env.STRAPI_API_URL}/api/survey-questions?sort=order:asc&pagination[limit]=1`; console.log("Fetching from:", strapiUrl); // Debug log const response = await fetch(strapiUrl, { headers: { Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`, }, }); if (!response.ok) { console.error( "Strapi response error:", response.status, response.statusText ); return NextResponse.json( { error: `Failed to fetch questions from Strapi: ${response.statusText}`, }, { status: 500 } ); } const data = await response.json(); const firstQuestion = data.data[0]; if (!firstQuestion) { return NextResponse.json( { error: "No questions found" }, { status: 404 } ); } const message = await client.messages.create({ from: process.env.TWILIO_WHATSAPP_FROM, to: `whatsapp:${phoneNumber}`, body: `📋 Survey Started!\n\nQuestion 1: ${firstQuestion.questionText}\n\nReply with your answer to continue.`, }); return NextResponse.json({ success: true, messageSid: message.sid }); } catch (error) { console.error("Error sending survey:", error); return NextResponse.json( { error: "Failed to send survey", details: error.message }, { status: 500 } ); } } ``` In the code above, we define a Next.js API route that kicks off a WhatsApp survey. It begins by verifying that all required environment variables, such as Twilio and Strapi credentials, are set. If anything’s missing, it logs an error and returns a failure response. Once a valid phone number is received in the request body, the route fetches the first survey question from Strapi. If a question is found, it sends it to the user via WhatsApp using Twilio. The response confirms the message was sent and includes the message SID for reference. This route acts as the entry point for starting any new survey session. ### Create an API Route for Receiving Responses You also need a [webhook](https://docs.strapi.io/cms/backend-customization/webhooks) in which Twilio will call when a user replies to a survey message. This will be used to process their answer, save it to Strapi, and send the next question. In the `src/app/api/` folder, create a folder called `receive-response`. Inside it, create a file called `route.js`. To explain better, let's break the logic into reusable steps and helper functions: First, you need to set up imports and environment variables, and also create a function that gets the current question. Add the following: **Step 1: Create Environment Variable and `getCurrentQuestionForUser` Function** ```javascript import { NextResponse } from "next/server"; import twilio from "twilio"; const requiredEnvVars = { TWILIO_ACCOUNT_SID: process.env.TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN: process.env.TWILIO_AUTH_TOKEN, TWILIO_WHATSAPP_FROM: process.env.TWILIO_WHATSAPP_FROM, STRAPI_API_URL: process.env.STRAPI_API_URL, STRAPI_API_TOKEN: process.env.STRAPI_API_TOKEN, }; const missingVars = Object.entries(requiredEnvVars) .filter(([key, value]) => !value) .map(([key]) => key); if (missingVars.length > 0) { console.error(`Missing environment variables: ${missingVars.join(", ")}`); } const client = twilio( process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN ); async function getCurrentQuestionForUser(phoneNumber) { try { console.log(`🔍 Getting current question for ${phoneNumber}`); const allQuestionsResponse = await fetch( `${process.env.STRAPI_API_URL}/api/survey-questions?sort=order:asc`, { headers: { Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`, }, } ); if (!allQuestionsResponse.ok) { throw new Error( `Failed to fetch questions: ${allQuestionsResponse.status} ${allQuestionsResponse.statusText}` ); } const allQuestionsData = await allQuestionsResponse.json(); const allQuestions = allQuestionsData.data; console.log(`Found ${allQuestions.length} total questions`); console.log( "First question structure:", JSON.stringify(allQuestions[0], null, 2) ); console.log( "Question orders:", allQuestions.map((q) => q.order) ); if (allQuestions.length === 0) { console.log("No questions found in Strapi"); return { question: null, isFirstQuestion: false }; } console.log(`Fetching responses for phone: "${phoneNumber}"`); let responsesResponse; let userResponses = []; try { const encodedPhone = encodeURIComponent(phoneNumber); const url1 = `${process.env.STRAPI_API_URL}/api/survey-responses?filters[phoneNumber][$eq]=${encodedPhone}&sort=createdAt:asc`; console.log(`🔍 Trying URL 1: ${url1}`); responsesResponse = await fetch(url1, { headers: { Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`, }, }); if (responsesResponse.ok) { const responsesData = await responsesResponse.json(); userResponses = responsesData.data || []; console.log(`Approach 1 found ${userResponses.length} responses`); } } catch (error) { console.log("Approach 1 failed:", error.message); } if (userResponses.length === 0) { try { console.log( "Trying approach 2: Get all responses and filter manually" ); const url2 = `${process.env.STRAPI_API_URL}/api/survey-responses?sort=createdAt:asc`; responsesResponse = await fetch(url2, { headers: { Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`, }, }); if (responsesResponse.ok) { const allResponsesData = await responsesResponse.json(); const allResponses = allResponsesData.data || []; console.log(`Total responses in DB: ${allResponses.length}`); console.log( "First response structure:", JSON.stringify(allResponses[0], null, 2) ); userResponses = allResponses.filter((response) => { const storedPhone = response.phoneNumber || response.data?.phoneNumber; console.log(`Comparing "${storedPhone}" with "${phoneNumber}"`); return storedPhone === phoneNumber; }); console.log( ` Manual filter found ${userResponses.length} responses for ${phoneNumber}` ); } } catch (error) { console.log("Approach 2 failed:", error.message); } } console.log( ` Final result: Found ${userResponses.length} existing responses for ${phoneNumber}` ); console.log( "Full response structure:", JSON.stringify(userResponses[0], null, 2) ); userResponses.forEach((resp, idx) => { const questionId = resp.attributes?.questionId || resp.questionId || resp.data?.questionId; const answer = resp.attributes?.answer || resp.answer || resp.data?.answer; console.log(` Response ${idx + 1}: Q${questionId} = "${answer}"`); }); if (userResponses.length === 0) { console.log("First question for this user"); return { question: allQuestions[0], isFirstQuestion: true }; } const answeredQuestionIds = userResponses .map( (response) => response.questionId || response.data?.questionId ) .filter((id) => id !== undefined); console.log("Answered question IDs:", answeredQuestionIds); const nextQuestion = allQuestions.find( (q) => !answeredQuestionIds.includes(q.order) ); if (nextQuestion) { console.log(`Next question to answer: Q${nextQuestion.order}`); } else { console.log("All questions have been answered!"); } return { question: nextQuestion, isFirstQuestion: false }; } catch (error) { console.error(" Error in getCurrentQuestionForUser:", error); return { question: null, isFirstQuestion: false }; } } ``` The `getCurrentQuestionForUser` function checks which survey question a user should be asked next. It fetches all questions from Strapi and figures out which questions they've already answered. **Step 2: Create `getNextQuestion` Function** When a user answers a question, it should move on to the next, so we need a function that grabs the next question. Right after the `getCurrentQuestionForUser` add this: ```javascript async function getNextQuestion(currentOrder) { try { console.log(`🔍 Looking for question after order ${currentOrder}`); const response = await fetch( `${process.env.STRAPI_API_URL}/api/survey-questions?filters[order][$gt]=${currentOrder}&sort=order:asc&pagination[limit]=1`, { headers: { Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`, }, } ); if (!response.ok) { throw new Error( `Failed to fetch next question: ${response.status} ${response.statusText}` ); } const data = await response.json(); const nextQuestion = data.data[0] || null; if (nextQuestion) { console.log(`Found next question: Q${nextQuestion.order}`); } else { console.log(" No more questions - survey complete"); } return nextQuestion; } catch (error) { console.error("Error in getNextQuestion:", error); return null; } } ``` The `getNextQuestion` function fetches the next survey question after a given order value. It queries Strapi for the next question where order is greater than `currentOrder`, sorted in ascending order, and limited to just one result. If found, it returns that question; if not, it logs that the survey is complete. **Step 3: Create `SaveResponse` Function** Lastly, you want to save the response of the user when they are done with the survey. Right after the `getNextQuestion`, add this: ```javascript async function saveResponse(phoneNumber, question, answer) { try { const questionData = question; const payload = { data: { phoneNumber, questionId: questionData.order, answer, timestamp: new Date().toISOString(), }, }; console.log("Saving payload:", JSON.stringify(payload, null, 2)); const response = await fetch( `${process.env.STRAPI_API_URL}/api/survey-responses`, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`, }, body: JSON.stringify(payload), } ); if (!response.ok) { const errorText = await response.text(); console.error(`Save failed: ${response.status} ${response.statusText}`); console.error("Error details:", errorText); throw new Error( `Failed to save response: ${response.statusText} - ${errorText}` ); } const result = await response.json(); console.log("Response saved successfully:", result.data?.id); return { success: true, data: result }; } catch (error) { console.error(" Error in saveResponse:", error); return { success: false, error: error.message }; } } ``` The `saveResponse` function saves a user's answer to a survey question in Strapi. It builds a payload with the phone number, question order, answer, and a timestamp. It then sends this data as a POST request to the `/survey-responses` endpoint. **Step 4: Create Main Function** Now let's wire everything inside a main function: ```javascript export async function POST(request) { try { console.log("=== WEBHOOK RECEIVED ==="); if (missingVars.length > 0) { console.error(`Missing environment variables: ${missingVars.join(", ")}`); return new NextResponse("Configuration Error", { status: 500 }); } const formData = await request.formData(); const from = formData.get("From"); const body = formData.get("Body"); const phoneNumber = from.replace("whatsapp:", ""); console.log(`From: ${phoneNumber}`); console.log(` Message: ${body}`); console.log(`Strapi URL: ${process.env.STRAPI_API_URL}`); console.log("Testing Strapi connection..."); try { const testResponse = await fetch( `${process.env.STRAPI_API_URL}/api/survey-questions`, { headers: { Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`, }, } ); console.log( `Strapi connection: ${testResponse.status} ${testResponse.statusText}` ); } catch (strapiError) { console.error("Strapi connection failed:", strapiError.message); return new NextResponse("Strapi Connection Error", { status: 500 }); } const currentQuestionInfo = await getCurrentQuestionForUser(phoneNumber); console.log("Current question info:", currentQuestionInfo); if (currentQuestionInfo.question) { console.log( `Saving response for question ${currentQuestionInfo.question.order}` ); const saveResult = await saveResponse( phoneNumber, currentQuestionInfo.question, body ); console.log("Save result:", saveResult); const nextQuestion = await getNextQuestion( currentQuestionInfo.question.order ); console.log("Next question:", nextQuestion); if (nextQuestion) { const message = await client.messages.create({ from: process.env.TWILIO_WHATSAPP_FROM, to: from, body: `Question ${nextQuestion.order}: ${nextQuestion.questionText}`, }); console.log( `Sent question ${nextQuestion.order} to ${phoneNumber} (SID: ${message.sid})` ); } else { const message = await client.messages.create({ from: process.env.TWILIO_WHATSAPP_FROM, to: from, body: " Thank you for completing our survey! Your feedback is valuable to us.", }); console.log( `Survey completed for ${phoneNumber} (SID: ${message.sid})` ); } } else { const message = await client.messages.create({ from: process.env.TWILIO_WHATSAPP_FROM, to: from, body: "Hi! You don't have an active survey. Please wait for a new survey to be sent to you.", }); console.log(` No active survey for ${phoneNumber} (SID: ${message.sid})`); } return new NextResponse("OK"); } catch (error) { console.error("Error processing response:", error); console.error("Stack trace:", error.stack); return new NextResponse("Error", { status: 500 }); } } ``` The `POST` function handles incoming WhatsApp messages. It checks the config, gets the user's message and phone number, confirms Strapi is reachable, and then wires together the other functions. It finds the current question, saves the user's answer, fetches the next question, and replies via WhatsApp. Once the survey is done, it sends a thank-you message. ### Create the Send Survey Page You need a page where a user can enter a WhatsApp number to which the survey questions are to be sent. In the `src/app,` create a folder called `send-survey.` Inside it, create a file called `page.js` and add the following code: ```javascript "use client"; import { useState } from "react"; export default function SendSurvey() { const [phoneNumber, setPhoneNumber] = useState(""); const [loading, setLoading] = useState(false); const [message, setMessage] = useState(""); const handleSendSurvey = async (e) => { e.preventDefault(); setLoading(true); setMessage(""); try { const response = await fetch("/api/send-survey", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ phoneNumber }), }); const data = await response.json(); if (response.ok) { setMessage("Survey sent successfully!"); setPhoneNumber(""); } else { setMessage(`Error: ${data.error}`); } } catch (error) { setMessage("Failed to send survey"); } finally { setLoading(false); } }; return (

← Back to Home

Send WhatsApp Survey

{message && (

{message}

)}

); } ``` The code above creates a component that powers the “Send Survey” page, which allows an admin or operator to trigger a WhatsApp survey for any phone number. The user enters a number, submits the form, and the app sends a request to the `/api/send-survey` endpoint. ### Create the View Responses Page In the `src/app,` create a folder called `responses.` Inside it, create a file called `page.js` and add the following code: ```javascript "use client"; import { useState, useEffect } from "react"; export default function Responses() { const [responses, setResponses] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); const [groupedResponses, setGroupedResponses] = useState({}); useEffect(() => { fetchResponses(); }, []); const fetchResponses = async () => { try { setLoading(true); setError(""); const strapiUrl = process.env.NEXT_PUBLIC_STRAPI_API_URL || "http://localhost:1337"; console.log("Fetching from:", `${strapiUrl}/api/survey-responses`); const response = await fetch( `${strapiUrl}/api/survey-responses?sort=createdAt:desc`, { headers: { "Content-Type": "application/json", }, } ); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log("Raw API response:", data); const responseData = data.data || []; setResponses(responseData); const grouped = responseData.reduce((acc, response) => { const phone = response.phoneNumber || response.data?.phoneNumber; if (phone) { if (!acc[phone]) { acc[phone] = []; } acc[phone].push(response); } return acc; }, {}); console.log("Grouped responses:", grouped); setGroupedResponses(grouped); } catch (error) { console.error("Error fetching responses:", error); setError(`Failed to fetch responses: ${error.message}`); } finally { setLoading(false); } }; const getResponseValue = (response, field) => { return ( response.attributes?.[field] || response[field] || response.data?.[field] || "N/A" ); }; if (loading) { return (

Loading responses...

); } if (error) { return (

{error}

); } return (

← Back to Home

Survey Responses

Total responses: {responses.length} | Unique users:{" "} {Object.keys(groupedResponses).length}

{Object.keys(groupedResponses).length === 0 ? (

📊

No responses yet.

Send a survey to get started!

) : (

{Object.entries(groupedResponses).map( ([phoneNumber, userResponses]) => (

📱 {phoneNumber} ({userResponses.length} response {userResponses.length !== 1 ? "s" : ""})

{userResponses .sort((a, b) => { const aOrder = getResponseValue(a, "questionId"); const bOrder = getResponseValue(b, "questionId"); return aOrder - bOrder; }) .map((response, index) => (

Q{getResponseValue(response, "questionId")}:{" "} {getResponseValue(response, "questionText")}

Answer:{" "} {getResponseValue(response, "answer")}

{new Date( getResponseValue(response, "timestamp") || getResponseValue(response, "createdAt") ).toLocaleString()}

))}

) )}

)} {/* Debug section - remove in production */}

Debug Information (click to expand)

          {JSON.stringify(
            { responses: responses.slice(0, 2), groupedResponses },
            null,
            2
          )}

); } ``` The code above creates a component that displays the responses. When the page loads, it fetches all survey responses from Strapi and organizes them by phone number. Below is an image of the response page: ![image showing the response page.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/image_showing_the_response_page_29daace338.png) ### Create the Manage Questions Page In the `src/app` folder, create a subfolder called `questions`. Inside it, create a file called `page.js` and add the following code: ```javascript "use client"; import { useState, useEffect } from "react"; export default function Questions() { const [questions, setQuestions] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); useEffect(() => { fetchQuestions(); }, []); const fetchQuestions = async () => { try { setLoading(true); setError(""); const strapiUrl = process.env.NEXT_PUBLIC_STRAPI_API_URL || "http://localhost:1337"; console.log( "Fetching questions from:", `${strapiUrl}/api/survey-questions` ); const response = await fetch( `${strapiUrl}/api/survey-questions?sort=order:asc`, { headers: { "Content-Type": "application/json", }, } ); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log("Questions API response:", data); const questionsData = data.data || []; setQuestions(questionsData); } catch (error) { console.error("Error fetching questions:", error); setError(`Failed to fetch questions: ${error.message}`); } finally { setLoading(false); } }; const getQuestionValue = (question, field) => { return ( question[field] || question.data?.[field] || "N/A" ); }; if (loading) { return (

Loading questions...

); } if (error) { return (

{error}

); } return (

← Back to Home

Survey Questions

Manage in Strapi Admin

Total questions: {questions.length}

{questions.length === 0 ? (

❓

No questions found.

Add some questions in the Strapi admin panel to get started.

Open Strapi Admin

) : (

{questions .sort((a, b) => { const aOrder = getQuestionValue(a, "order"); const bOrder = getQuestionValue(b, "order"); return aOrder - bOrder; }) .map((question) => (

Order: {getQuestionValue(question, "order")} {getQuestionValue(question, "isActive") ? "Active" : "Inactive"}

{getQuestionValue(question, "questionText")}

Created:{" "} {new Date( getQuestionValue(question, "createdAt") ).toLocaleString()}

))}

)} ); } ``` In the code above, we create a component for the questions. When the page loads, it fetches all the survey questions from Strapi and displays them in order. Each question card shows its order, active status, text, and creation date. If no questions are found, it prompts the user to add them via the Strapi admin panel. Below is an image of what the page will look like: ![Manage Questions Page.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Manage_Questions_Page_b8002c7875.png) ### Create the Home Page with Navigation Navigate to the `src/app/page.js` file and update the code to this: ```javascript export default function Home() { return (

WhatsApp Survey App

📋

Send Survey

Start a new WhatsApp survey for a user

Send Survey

📊

View Responses

See all survey responses and analytics

View Responses

❓

Manage Questions

View and manage survey questions

Manage Questions

); } ``` Below is an image of what the home page looks like: ![Home Page.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Home_Page_09d7bbb3fd.png) Next, navigate to `src/app/globals.css` and update the code to this: ```javascript @import "tailwindcss"; :root { --background: #ffffff; --foreground: #171717; }F @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); } @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; } } body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } @tailwind base; @tailwind components; @tailwind utilities; body { background-color: #f9fafb; } .container { max-width: 1200px; } ``` Also, update your `src/app/layout.js` with this: ```javascript import { Inter } from "next/font/google"; import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata = { title: "WhatsApp Survey App", description: "Send surveys via WhatsApp and collect responses", }; export default function RootLayout({ children }) { return ( {children} ); } ``` All set now let's test the application! ## Test the Application Here are the steps to take when testing your app: * Create survey questions in the Strapi admin panel * Send a survey to a WhatsApp number using the Send Survey page. * The recipient will receive the questions one after another. * The responses or answers will be automatically stored in Strapi. * You can then view all responses in the **Responses** page. In your terminal run this command to start the terminal: ```bash npm run dev ``` Next, navigate to http://localhost:3000 in your browser: ![Home Page for Demo.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/Home_Page_for_Demo_530efe12a4.png) To send a survey, click **Send survey** and enter a number. Make sure you add the country code. ![demo.gif](https://delicate-dawn-ac25646e6d.media.strapiapp.com/demo_0b45f3a3f4.gif) Once completed, it is added to Strapi's backend, and you can view this on the **View Responses** page. ![View Responses page.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/View_Responses_page_9af7b0babc.png) ## Complete GitHub Code Here's the link to the full project on [GitHub](https://github.com/oyedeletemitope/whatsapp-survey-strapi-twilio). ## Conclusion You now have a fully functional WhatsApp-based survey system built with Next.js, Strapi, and Twilio. The system covers everything from triggering the first survey message to processing replies and walking users through the flow automatically. You can extend this by adding survey analytics and reporting, conditional logic for branching questions, reusable survey templates, scheduled campaign triggers, or even integrating it directly with your CRM.