Introduction
Webhook integrations provide a real-time connection point for applications and services. With n8n, creating webhooks that respond with custom HTML pages can be done quickly and effectively. In this guide, we will explain how to set up a simple webhook in n8n that returns an HTML response formatted with Bootstrap 5.
What is a Webhook?
A webhook is an HTTP endpoint that other services can send data to in real time. When the webhook receives data, it triggers a workflow — such as sending notifications, processing forms, or returning responses. n8n provides powerful and easy-to-configure webhook nodes to build these integrations.
Setting Up the Simple Webhook in n8n
The workflow consists of two key nodes:
- Webhook Node: This node listens for incoming HTTP requests at the path
/my-form. It supports multiple HTTP methods like GET and POST. - Respond to Webhook Node: This node sends back the response to whoever called the webhook. Here, it returns an HTML page with Bootstrap 5 styling.
Workflow Structure:
- The Webhook node is triggered on receiving a GET request.
- It passes the execution to the Respond to Webhook node.
- The Respond to Webhook node sets the HTTP header
Content-Typetotext/html; charset=UTF-8. - It then sends back an HTML document that includes Bootstrap 5 CSS/JS CDN links and displays a simple “Hello, world!” message.
Sample HTML Response Explained
The HTML document returned uses Bootstrap’s standard starter template:
<!doctype html>for HTML5<html lang="en">with charset and responsive meta tags for mobile-friendly design- Bootstrap CSS linked from jsDelivr CDN
- A title tag for the page living in the browser tab
- Basic
<h1>heading to display the message - Bootstrap’s JavaScript bundle linked at the bottom for functionality
How to Deploy and Test
- Deploy this workflow in your n8n environment.
- Make sure your n8n instance is accessible via a public URL or tunneling service.
- Send a GET request to
https://your-n8n-domain.com/webhook/my-form. - You will receive the styled HTML page with the “Hello, world!” heading as the response.
Customization Ideas
This sample can be extended easily. A few ideas to enhance this include:
- Adding dynamic content based on query parameters or payload
- Injecting CSS styles or additional JS libraries for richer UI
- Rendering form submission status or result messages
- Integrating with databases or APIs to respond with real data
Conclusion
Using n8n’s webhook and response nodes, you can quickly build custom HTTP endpoints that deliver well-structured HTML content. This is ideal for prototyping web apps, handling form submissions, or serving lightweight web pages from automated workflows.
Call to Action
Start creating your own webhook responses in n8n today! Experiment with different HTML templates and dynamically generated content to deliver engaging user experiences.