When using webhook to process data received after a form submission, we are able to run a webhook bundle to response and to redirect the user to a thank you page after the submission. I want to know if it is possible to do a second redirection after Make complete the background running task.
Welcome to the Make community!
The simpler/better way would be to display a “pop-up” thank you message using JavaScript (on the same page) upon form submission, then only redirect after your scenario returns with the Webhook Response.
Hope this helps! Let me know if there are any further questions or issues.
— @samliew
P.S.: Investing some effort into the Make Academy will save you lots of time and frustration using Make.
1 Like
The common way to redirect after a POST would be to send a HTTP 303 redirect. Here is an example:
P.S. Depending on how much time your scenario takes, serve this message as soon as you can to inform the user that the submission is ok. You do not have to run the webhook response at the end of your scenario but also in the second or Nth step. This way you will not keep your user waiting for a 200 OK message/Thank you page. Also, if there are any errors, your user will not get a scenario failed error which they might not understand.
1 Like
Thank you so much!
The point is: To serve a message after the submission, it would be necessary to run the response bundle to redirect to another page telling them to wait for conclusion, but it will close the connection, not allowing me to run another response page to the final page with the result.
Wow! It seems to be a good way to solve that. Amazing solution! Thank you so much, O’ll try that.
1 Like
In that case you can put the webhook response module as the second module.
An alternative would be to serve the html using the webhook response module:
We use a custom GPT setup to build these pages fairly quickly and even build complete browser based applications on Make.
Here is an example code to show a confirmation page that closes automatically (if allowed by the browser):
{
"subflows": [
{
"flow": [
{
"id": 21,
"module": "gateway:WebhookRespond",
"version": 1,
"parameters": {},
"mapper": {
"status": "200",
"body": "<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Update processed</title>\n <!-- Font Awesome CSS -->\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\">\n <!-- Bootstrap CSS -->\n <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\"\n integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\"\n crossorigin=\"anonymous\">\n <style>\n body {\n font-family: sans-serif;\n text-align: center;\n padding-top: 50px;\n }\n .container {\n max-width: 500px;\n margin: auto;\n }\n .btn-close {\n margin-top: 20px;\n padding: 10px 20px;\n font-size: 16px;\n }\n #closeMessage {\n display: none;\n margin-top: 15px;\n font-size: 14px;\n color: #666;\n }\n </style>\n</head>\n<body>\n<div class=\"container\">\n <img src=\"https://workninjas.nl/wp-content/uploads/2021/08/work-ninjas-01-w150.png\" width=\"200\" height=\"200\" alt=\"Work Ninjas Logo\">\n <h2 class=\"mt-4\">Update succesful</h2>\n <p>The update was processed succesfully. This window will close automatically...</p>\n \n <button id=\"closeButton\" class=\"btn btn-primary btn-close\" onclick=\"window.close();\">Close this window</button>\n \n <p id=\"closeMessage\">If this window does not close you can use the button above.</p>\n</div>\n\n<script>\n setTimeout(function() {\n window.close();\n }, 3000);\n\n // Fallback: Show close button if auto-close fails\n setTimeout(function() {\n document.getElementById(\"closeMessage\").style.display = \"block\";\n }, 4000);\n</script>\n\n</body>\n</html>\n",
"headers": []
},
"metadata": {
"designer": {
"x": 2422,
"y": 590,
"name": "Show confirmation"
},
"restore": {
"expect": {
"headers": {
"mode": "chose"
}
}
},
"expect": [
{
"name": "status",
"type": "uinteger",
"label": "Status",
"validate": {
"min": 100
},
"required": true
},
{
"name": "body",
"type": "any",
"label": "Body"
},
{
"name": "headers",
"type": "array",
"label": "Custom headers",
"validate": {
"maxItems": 16
},
"spec": [
{
"name": "key",
"label": "Key",
"type": "text",
"required": true,
"validate": {
"max": 256
}
},
{
"name": "value",
"label": "Value",
"type": "text",
"required": true,
"validate": {
"max": 4096
}
}
]
}
]
}
}
]
}
],
"metadata": {
"version": 1
}
}
Let me know if you want to go down this route and need assistance with this, since it just needs to be done on your web page, it’s one less complication/dependency/scenario.