1. Basic Webhook Integration

   1. Webhook Types

      • Submit: Sends a notification when a response is submitted.

      • Reject: Sends a notification when a response is rejected or incomplete
        (e.g., when the respondent drops out due to a disqualification field).

   2. Webhook Name: The name of the webhook.

   3. Webhook URL: The URL provided by third-party tools for webhook integration.

   4. Request Type: You can choose between POST and GET request types.

   5. Custom Header: Customize the key-value pairs in the header.

      • Header Name: Commonly, platforms like Discord or Slack use "Content-Type".

      • Value: For platforms like Discord or Slack, the default value is "application/json".

   6. Body Configuration

      • Custom Body: Use the body preset values to set the content of the webhook notification.

      • Body Preset: The format is typically ":"{{res:response_value}}",
        where you can copy the value inside the quotes and paste it into the custom body.

        • Question: Identify the question associated with the response.

          • If you've added "hidden fields", you can copy the preset for the hidden field at the bottom.

        • projectKey: Identify the project using the project key.

        • customerKey: Identify the respondent using the customer key.

          • The URL must include customerKey=value
            (e.g., https://walla.my/v/~~~?source=Instagram&customerKey=Minsu).

        • responseKey: Identify the response using the response key.

      • If you're sharing a survey URL like
        https://walla.my/v/fLptDL9bbvlxRvWRTNud?source=Instagram&customerKey=Minsu,
        and you set the body as mentioned,
        you'll receive a webhook notification with the respective details.

        {
        "content": "{{projectKey}} The respondent's birthday is {{res:2865092957}}. The CustomerKey for this response is {{customerKey}}, and the ResponseKey is {{responseKey}}. This response was recorded through the hidden field {{hidden:1495742778}}."
        }

        
        

2. Integrating with Discord

   1. Go to the "Channel Settings" of the Discord server where you want to receive notifications.

   2. Click the "Integrations" tab, and then click "Webhooks".

   3. Click the "Copy Webhook URL" button.

   4. In Walla, go to the "Integrations" tab and click the "Manage Webhooks" button.

   5. Paste the URL copied from Discord and click the "Add Webhook" button.

   6. In the custom header settings, set the Header Name to Content-Type,
      and the Value to application/json.

      • If you want to receive notifications for "Rejection" instead of "Submission",
        change the webhook type to Reject.

   7. Activate the Body Settings and use the Body presets to customize the content
      you want to receive in Discord.

      • Write the desired content between the quotation marks in the format below.

      • To receive the response content, paste {{res:~~}} in the body.

      • If you have configured hidden fields, you can also receive notifications for these fields.

   8. After saving your changes, activate it in "Webhook Settings".

   9. Once the response is received, you will get notifications on Discord.

   
   

3. Integrating with Slack

   1. Go to https://api.slack.com/start/quickstart(opens in a new tab) and click "Go to Your Apps".

   2. Click "Create an App".

   3. Select "From scratch".

   4. Enter a name for the webhook and select the Slack workspace where you want to
      receive notifications.

   5. Click "Incoming Webhooks".

   6. Enable Incoming Webhooks.

   7. Click "Add New Webhook to Workspace".

   8. Select the channel where you want to receive notifications.

   9. Copy the generated Webhook URL.

   10. In Walla, go to the "Integrations" tab and click the "Manage Webhooks" button.

   11. Paste the URL copied from Slack and click "Add Webhook".

   12. Set the Header Name to Content-Type, and the Value to application/json.

       • If you want to receive notifications for "Rejection" instead of "Submission",
         change the webhook type to Reject.

   13. Activate Body Settings, then refer to the body presets below to freely write the content you want to receive in Slack.

       • Follow the format below and write the desired content between the quotation marks.

         {
             "text": "Please feel free to write your desired content here."
         }

       • If you want to receive the response content, paste the preset {{res:~~}}.

       • If you've set up hidden fields, you can also receive notifications for the
         hidden field content.

   14. After saving the changes, activate it in "Webhook Settings".

   15. Click on the "Install App" tab, then click "Reinstall to Workspace" to reinstall the webhook.

   16. Choose the channel where you want to receive notifications.

   17. Once a response arrives, you'll receive the notification in Slack.

   
   

4. Integrating with Email

   1. Visit https://script.google.com/ and click on "New Project".

   2. Clear all the default content, then paste the code below.

      • In the code, replace "------@------.---" with the email address
        where you want to receive notifications
        (e.g., "minsu@walla.my, yeonghee@walla.my").

      • In the code, replace <${FORM_TITLE}> ------------with the subject of the email.

        (e.g., <${FORM_TITLE}> Submitted Response)

        function doPost(e) {
          // Parsing the POST data to get the required data
          var data = JSON.parse(e.postData.contents);
          var formAnswers = data.form_answers;
          var submittedAt = new Date(data.form_response.submitted_at);
         
          var formattedDate = formatDate(submittedAt);
          var FORM_TITLE= data.form_definition.title;
          var PROJECT_KEY= data.form_definition.id;
          // Building email content with enhanced styling
          var emailBody = `<!doctype html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta charset="utf-8"/> <meta content="width=device-width" name="viewport"/> <meta content="IE=edge" http-equiv="X-UA-Compatible"/> <meta name="x-apple-disable-message-reformatting"/> <meta content="telephone=no,address=no,email=no,date=no,url=no" name="format-detection"/> <title>Checkout</title> <link href="https://fonts.googleapis.com/css?family=Inter:600" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Inter:400" rel="stylesheet" type="text/css"> <!--[if mso]> <style> * { font-family: sans-serif !important; } </style> <![endif]--> <!--[if !mso]><!--> <!-- <![endif]--> <style> html { margin: 0 !important; padding: 0 !important; } * { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } td { vertical-align: top; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; } a { text-decoration: none; } img { -ms-interpolation-mode:bicubic; } @media only screen and (min-device-width: 320px) and (max-device-width: 374px) { u ~ div .email-container { min-width: 320px !important; } } @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { u ~ div .email-container { min-width: 375px !important; } } @media only screen and (min-device-width: 414px) { u ~ div .email-container { min-width: 414px !important; } } </style> <!--[if gte mso 9]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml> <![endif]--> <style> @media only screen and (max-device-width: 599px), only screen and (max-width: 599px) { .eh { height:auto !important; } .desktop { display: none !important; height: 0 !important; margin: 0 !important; max-height: 0 !important; overflow: hidden !important; padding: 0 !important; visibility: hidden !important; width: 0 !important; } .mobile { display: block !important; width: auto !important; height: auto !important; float: none !important; } .email-container { width: 100% !important; margin: auto !important; } .stack-column, .stack-column-center { display: block !important; width: 100% !important; max-width: 100% !important; direction: ltr !important; } .wid-auto { width:auto !important; } .table-w-full-mobile { width: 100%; } .mobile-center { text-align: center; } .mobile-center > table { display: inline-block; vertical-align: inherit; } .mobile-left { text-align: left; } .mobile-left > table { display: inline-block; vertical-align: inherit; } .mobile-right { text-align: right; } .mobile-right > table { display: inline-block; vertical-align: inherit; } } </style></head> <body width="100%" style="background-color:#f0f0f0;margin:0;padding:0!important;mso-line-height-rule:exactly;"> <div style="background-color:#f0f0f0"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" color="#f0f0f0"/></v:background> <![endif]--> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="center"><table bgcolor="#ffffff" style="margin:0 auto;" align="center" id="brick_container" cellspacing="0" cellpadding="0" border="0" width="600" class="email-container"><tr> <td width="600"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td width="600" style="background-color:#ffffff; " bgcolor="#ffffff" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="600"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td width="552" style="height:88px; background-color:#ffffff; padding-left:24px; padding-right:24px;" bgcolor="#ffffff" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td height="8" style="height:8px; min-height:8px; line-height:8px;"></td></tr> <tr><td ><table cellspacing="0" cellpadding="0" border="0"><tr><td width="120" ><img src="https://plugin.markaimg.com/public/43a815fe/bPMY4vgBZFROX7CsM8YKvooE7Gafev.png" width="120" border="0" style="min-width:120px; width:120px; height: auto; display: block;"></td></tr></table></td></tr> <tr><td height="8" style="height:8px; min-height:8px; line-height:8px;"></td></tr></table></td></tr></table></td></tr><tr> <td width="600"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td width="552" style="background-color:#ffffff; padding-left:24px; padding-right:24px;" bgcolor="#ffffff" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td height="24" style="height:24px; min-height:24px; line-height:24px;"></td></tr> <tr> <td width="100%" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td ><div style="line-height:36px;text-align:left;"><span style="color:#101828;font-weight:600;font-family:Inter,Arial,sans-serif;font-size:28px;line-height:36px;text-align:left;">New response is submitted.</span></div></td></tr><tr><td height="8" style="height:8px; min-height:8px; line-height:8px;"></td></tr><tr><td ><div style="line-height:24px;text-align:left;"><span style="color:#667085;font-family:Inter,Arial,sans-serif;font-size:15px;line-height:24px;text-align:left;">A new response was submitted to your project “${FORM_TITLE}”.</span></div></td></tr></table></td></tr> <tr><td height="24" style="height:24px; min-height:24px; line-height:24px;"></td></tr></table></td></tr></table></td></tr><tr> <td width="100%"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="100%" style="background-color:#ffffff; padding-left:24px; padding-right:24px;" bgcolor="#ffffff" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td height="24" style="height:24px; min-height:24px; line-height:24px;"></td></tr> <tr> <td width="100%"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="552" align="center" style="background-color:#ffffff; " bgcolor="#ffffff" > <table class="table-w-full-mobile" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" width="49%" class="stack-column-center"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="right" style="background-color:#ffffff; " bgcolor="#ffffff" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="24" align="right"><img src="https://plugin.markaimg.com/public/43a815fe/daIuervM7Qtcl2wyGNMCY87fXUdxzA.png" width="24" border="0" style="min-width:24px; width:24px; height: auto; display: block;"></td><td style="width:8px; min-width:8px;" width="8"></td> <td > <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center" style="background-color:#ffffff; " bgcolor="#ffffff" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td align="center"><div style="line-height:20px;text-align:left;"><span style="color:#363a57;font-weight:700;font-family:Arial,Arial,sans-serif;font-size:15px;line-height:20px;text-align:left;">Project </span></div></td></tr><tr><td height="4" style="height:4px; min-height:4px; line-height:4px;"></td></tr><tr><td align="center"><div style="line-height:24px;text-align:left;"><span style="color:#101828;font-family:Inter,Arial,sans-serif;font-size:15px;line-height:24px;text-align:left;">${FORM_TITLE}</span></div></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td><td class="stack-column-center" height="16" style="width:16px; min-width:16px; height:16px; min-height:16px;" width="16"></td> <td align="center" width="49%" class="stack-column-center"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="right" style="background-color:#ffffff; " bgcolor="#ffffff" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="24" align="right"><img src="https://plugin.markaimg.com/public/43a815fe/o9Gf4q7jZW8ve9moQojP9v0h91Amrv.png" width="24" border="0" style="min-width:24px; width:24px; height: auto; display: block;"></td><td style="width:8px; min-width:8px;" width="8"></td> <td > <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center" style="background-color:#ffffff; " bgcolor="#ffffff" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td align="center"><div style="line-height:20px;text-align:left;"><span style="color:#363a57;font-weight:700;font-family:Arial,Arial,sans-serif;font-size:15px;line-height:20px;text-align:left;">Recent timestamp</span></div></td></tr><tr><td height="4" style="height:4px; min-height:4px; line-height:4px;"></td></tr><tr><td align="center"><div style="line-height:20px;text-align:left;"><span style="color:#363a57;font-family:Arial,Arial,sans-serif;font-size:15px;line-height:20px;text-align:left;">${formattedDate}</span></div></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr><tr><td height="24" style="height:24px; min-height:24px; line-height:24px;"></td></tr>`
         
         
         
         
          formAnswers.forEach(function(field, index) {
            var question = field.label;
            var answer = getAnswerString(field);
            const reponseSection = `<tr><td width="100%" align="center" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td height="16" style="height:16px; min-height:16px; line-height:16px;"></td></tr> <tr> <td > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td ><div style="line-height:28px;text-align:left;"><span style="color:#101828;font-weight:600;font-family:Inter,Arial,sans-serif;font-size:20px;line-height:28px;text-align:left;">${question}</span></div></td></tr></table></td></tr></table></td></tr> <tr><td height="16" style="height:16px; min-height:16px; line-height:16px;"></td></tr></table></td></tr><tr> <td width="100%"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="100%" style="background-color:#f4f5f6; border-radius:8px; padding-left:12px; padding-right:12px;" bgcolor="#f4f5f6" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td height="16" style="height:16px; min-height:16px; line-height:16px;"></td></tr> <tr> <td width="100%" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td ><div style="line-height:24px;text-align:left;"><span style="color:#667085;font-family:Inter,Arial,sans-serif;font-size:15px;line-height:24px;text-align:left;">${answer}</span></div></td></tr></table></td></tr></table></td></tr> <tr><td height="16" style="height:16px; min-height:16px; line-height:16px;"></td></tr></table></td></tr></table></td></tr></table></td></tr>`
            // Adding to email body
            emailBody += reponseSection
          });
         
          emailBody +=`<tr><td height="24" style="height:24px; min-height:24px; line-height:24px;"></td></tr></table></td></tr></table></td></tr><tr> <td width="600"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td width="552" align="center" style="vertical-align: middle; background-color:#ffffff; padding-left:24px; padding-right:24px;" bgcolor="#ffffff" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td height="24" style="height:24px; min-height:24px; line-height:24px;"></td></tr> <tr> <td style="vertical-align: middle;" width="100%"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="100%" align="center" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="560" align="center" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td align="center"><div style="line-height:24px;text-align:center;"><span style="color:#667085;font-family:Inter,Arial,sans-serif;font-size:15px;line-height:24px;text-align:center;">Check out the most recent response!</span></div></td></tr></table></td></tr></table></td></tr><tr><td height="24" style="height:24px; min-height:24px; line-height:24px;"></td></tr><tr><td align="center"><table cellspacing="0" cellpadding="0" border="0"><tr><td align="center"> <div> <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://app.walla.my" style="height:50px;v-text-anchor:middle;width:160px;" fillcolor="#000000" stroke="f" arcsize="16%"> <w:anchorlock/> <center style="white-space:nowrap;display:inline-block;text-align:center;color:#ffffff;font-weight:600;font-family:Inter,Arial,sans-serif;font-size:18px;">Take me</center></v:roundrect> <![endif]--> <a href="https://app.walla.my" style="white-space:nowrap;background-color:#000000;border-radius:8px; display:inline-block;text-align:center;color:#ffffff;font-weight:600;font-family:Inter,Arial,sans-serif;font-size:18px;line-height:50px;width:160px; -webkit-text-size-adjust:none;mso-hide:all;">Take me</a></div></td></tr></table></td></tr></table></td></tr></table></td></tr> <tr><td height="24" style="height:24px; min-height:24px; line-height:24px;"></td></tr></table></td></tr></table></td></tr><tr> <td width="600"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td width="552" align="center" style="vertical-align: middle; background-color:#ffffff; padding-left:24px; padding-right:24px;" bgcolor="#ffffff" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td height="24" style="height:24px; min-height:24px; line-height:24px;"></td></tr> <tr> <td style="vertical-align: middle;" width="100%"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="552" align="center" style="vertical-align: bottom; " > <table class="table-w-full-mobile" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align: bottom;" align="center" width="48%" class="stack-column-center"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td style="height:120px; " > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td ><table cellspacing="0" cellpadding="0" border="0"><tr><td width="120" ><img src="https://plugin.markaimg.com/public/43a815fe/eoRbQJjbNomN1QrfzlYBQ63bLAqadg.png" width="120" border="0" style="min-width:120px; width:120px; height: auto; display: block;"></td></tr></table></td></tr><tr><td height="12" style="height:12px; min-height:12px; line-height:12px;"></td></tr><tr> <td width="100%" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td ><div style="line-height:24px;text-align:left;"><span style="color:#101828;font-weight:600;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:24px;text-align:left;">Walla Form</span></div></td></tr><tr><td height="4" style="height:4px; min-height:4px; line-height:4px;"></td></tr><tr><td ><div style="line-height:24px;text-align:left;"><span style="color:#667085;font-family:Inter,Arial,sans-serif;font-size:15px;line-height:24px;text-align:left;">Form your insights.</span></div></td></tr></table></td></tr></table></td></tr></table></td><td class="stack-column-center" height="16" style="width:24px; min-width:24px; height:16px; min-height:16px;" width="24"></td> <td style="vertical-align: bottom;" align="center" width="48%" class="stack-column-center"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" > <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td ><div style="line-height:24px;text-align:left;"><span style="color:#667085;font-family:Inter,Arial,sans-serif;font-size:15px;line-height:24px;text-align:left;">Seoul, Mapodae-ro 122</span></div></td></tr><tr><td height="4" style="height:4px; min-height:4px; line-height:4px;"></td></tr><tr><td ><div style="line-height:24px;text-align:left;"><span style="color:#667085;font-family:Inter,Arial,sans-serif;font-size:15px;line-height:24px;text-align:left;"><a style="color:#667085;text-decoration:none;" href="mailto:cs@walla.my" target="_blank">cs@walla.my</a></span></div></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr> <tr><td height="24" style="height:24px; min-height:24px; line-height:24px;"></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></div></body></html>`
         
          // Send the email
          var recipientEmail = "------@------.---"; // Replace with the actual recipient's email
          var subject = `<${FORM_TITLE}> ------------`;
           var advancedOptions = {
            htmlBody: emailBody,
            charset: "UTF-8"
          };
          GmailApp.sendEmail(recipientEmail, subject, "", advancedOptions);
         
          return ContentService.createTextOutput(JSON.stringify({result: "success"})).setMimeType(ContentService.MimeType.JSON);
        }
         
         
        // Helper function to format the date
        function formatDate(date) {
          return Utilities.formatDate(date, "Asia/Seoul", "yyyy-MM-dd HH:mm:ss");
        }
         
         
        // Helper function to format the answer based on its type
        function getAnswerString(field) {
          switch (field.type) {
            case 'CHECKBOX':
            case 'RADIO':
              return Array.isArray(field.response) ? field.response.join(', ') : field.response;
            case 'CHECKBOX_GRID':
            case 'RADIO_GRID':
              return field.response.map(el => el.lineResponse.join(', ')).join('; ');
            case 'GEOLOCATION':
              return Object.entries(field.response || {}).map(([key, value]) => `${key}: ${value}`).join(', ');
            case 'HIDDEN':
              return field.response || '';
            default:
              return Array.isArray(field.response) ? field.response.join(', ') : field.response;
          }
        }

   3. Click on "Deploy" and select "New Deployment".

   4. Set the type to "Web App", and set the access to "Anyone".

   5. Approve the access permissions.

   6. Select the email address to act as the sender.

   7. Copy the "URL" of the web app.

   8. In Walla, go to the "Integrations" tab and click the "Manage Webhooks" button.

   9. Paste the URL and add the webhook.

   10. After saving the changes, activate the webhook in the "Webhook Settings".

   11. Once the response arrives, you will receive notifications via email.

       
       

5. Integrating with Google Sheets

   1. In Google Sheets, go to the "Extensions" tab and click on "Apps Script".

   2. Add a new script.

   3. Clear all the default content, then paste the code below.

      function doPost(e) {
        var ss = SpreadsheetApp.getActiveSpreadsheet();
        var sheet = ss.getSheets()[0];
        ss.setSpreadsheetTimeZone('Asia/Seoul');
        // Parsing the POST data to get the required data
        var data = JSON.parse(e.postData.contents);
       
        var formAnswers = data.form_answers;
        var submittedAt = new Date(data.form_response.submitted_at);
       
        var responseId = data.form_response.response_id.slice(0,10);
        // First row: labels
        if (sheet.getLastRow() === 0) {
          var fieldLabels = formAnswers.map(function(answer) {
            if (answer.type === 'RADIO_GRID' || answer.type === 'CHECKBOX_GRID') {
              return answer.response.map(el => `${answer.label} - ${el.lineLabel}`);
            }
            return answer.label
          }).flat();
          var headers = ['Response ID', 'Time Submitted', ...fieldLabels]
          sheet.appendRow(headers);
        }
         var rowData = formAnswers.map(field => {
            switch (field.type) {
              case 'CHECKBOX':
              case 'RADIO': {
                var isResponseArray = Array.isArray(field.response);
                if (isResponseArray) {
                  return field.response.filter(el => Boolean(el)).join(', ');
                }
                return field.response || '';
              }
              case 'CHECKBOX_GRID':
              case 'RADIO_GRID': {
                var isLineResponseArray = Array.isArray(field.response.lineResponse)
                return field.response.map(el => {
                  if (isLineResponseArray) {
                    return el.lineResponse.filter(el => Boolean(el)).join(', ');
                  }
                  return el.lineResponse || '';
                })
              }
              case 'GEOLOCATION': {
                var response = field.response || {};
                var responseArray = Object.entries(response).map(el => `${el[0]}: ${el[1]}`);
                return responseArray.join(', ');
              }
              case 'HIDDEN': {
                return field.response === undefined || field.response === null
                  ? ''
                  : field.response;
              }
              default: {
                var response =
                  field.response === undefined || field.response === null ? '' : field.response;
                if (Array.isArray(response)) {
                  return response.join(', ');
                }
                return response;
              }
            }
          }).flat();
        sheet.appendRow([responseId, submittedAt, ...rowData]);
        return ContentService.createTextOutput(JSON.stringify({result: "success"})).setMimeType(ContentService.MimeType.JSON);
      }

   4. Click on "Deploy" and select "New Deployment".

   5. Set the Type to "Web App" and set Access to Anyone.

   6. Approve the necessary access permissions.

   7. Copy the "URL" of the web app.

   8. In Walla, go to the "Integrations" tab and click the "Manage Webhooks" button.

   9. Paste the URL and add the webhook.

   10. After saving the changes, activate the webhook in the "Webhook Settings".

   11. Once a response arrives, the response data will be recorded in Google Sheets.

⚠️ The format of the webhook request data can be found on the information page provided by each service. Please refer to their specific documentation for detailed information.