# Integration Guide — Connect Your AI Agent to Chat4Agent

> Step-by-step guide to integrate Make.com, n8n, Activepieces or Gumloop with Chat4Agent. Configure webhooks, headers, and payloads. Your AI chatbot goes live in minutes.

Source: https://chat4agent.com/how-to

---

# How-to

Connect your Make.com, n8n or any other agent to a Chat4Agent widget.

Make.com

n8n

Generic agent

## Make.com
1. Add a **Custom Webhook** trigger.
2. Copy its URL into the Agent Webhook URL in your chat's Agent Settings.

![Make.com Custom Webhook trigger](https://chat4agent.ams3.digitaloceanspaces.com/system/chat4agent_make-step-1.gif)
1. Add your Make Agent into the canvas.
2. Use `{{1.body.Session\_Id}}` as the conversation key (and `{{1.body.Thread\_Id}}` to segment by thread).

![Make.com step 2](https://chat4agent.ams3.digitaloceanspaces.com/system/chat4agent_make-step-2.gif)
1. Final **Webhook Response** body — a JSON bundle that echoes the four identifiers plus the `Response` string from your AI Agent:

```
1. {
 "Org_Id": "{{1.body.Org_Id}}",
 "Chat_Id": "{{1.body.Chat_Id}}",
 "Session_Id": "{{1.body.Session_Id}}",
 "Thread_Id": "{{1.body.Thread_Id}}",
 "Response": "{{<ai-node>.output}}"
}

```

![Make.com step 3](https://chat4agent.ams3.digitaloceanspaces.com/system/chat4agent_make-step-3.gif)
1. **The response body must be JSON.**
2. Make's default response is the plain text `Accepted`, which the widget cannot parse.
3. In your **Webhook Response** module, set the body exactly to the JSON template shown in step 5 above.
4. Set **Advanced** → **Custom headers** → `Content-Type: application/json`.
5. **Important: stringify your Agent's response** before putting it in `Response`.

![The finished Make.com scenario: Listen to Chat4Agent (custom webhook), My Agent, Send Response to Chat4Agent (webhook response)](https://chat4agent.ams3.digitaloceanspaces.com/system/Chat4Agent.com_make-step-4.gif)

## n8n
1. Add a **Webhook** node (HTTP Method: POST).
2. Open the **Production URL** tab and copy that URL into the Agent Webhook URL in your chat's Agent Settings.
3. **That URL has to be reachable from the internet.** Chat4Agent calls your webhook from its own servers, not from your browser.
3. On **n8n Cloud** it already is, and it looks like `https://<your-instance>.app.n8n.cloud/webhook/<identifier>` — for example `https://acme.app.n8n.cloud/webhook/abc123-def456-ghi789`. Copy it as it is.
3. On a **self-hosted** n8n it usually is not: `http://localhost:5678/…` means "this machine", and a private address such as `192.168.x.x` or `10.x.x.x` only exists inside your network — we cannot call either. Publish n8n under a public hostname first, over HTTPS, and paste that address instead. If you do not manage the network yourself, this is the part to hand to whoever does: they need to point a public name at the machine and forward the port through to n8n.

![n8n Webhook node set to POST, showing the Production URL tab](https://chat4agent.ams3.digitaloceanspaces.com/system/Chat4Agent.com_n8n-step-1.png)
1. Add an **IF** node right after. Condition: `{{ $json.headers\["x-chat4agent-secret"\] }}` **equals** the Secret from Agent Settings.

![n8n IF node comparing the x-chat4agent-secret header against the Secret](https://chat4agent.ams3.digitaloceanspaces.com/system/Chat4Agent.com_n8n-step-2.png)
1. Wire the `false` branch to a **Respond to Webhook** returning status `401`.
2. Wire the `true` branch to your AI node, using `{{ $json.body.Session\_Id }}` as the conversation key (add `{{ $json.body.Thread\_Id }}` if needed).

![The finished n8n canvas — Webhook into the IF node, true branch to the AI Agent and Respond to Webhook, false branch to a 401](https://chat4agent.ams3.digitaloceanspaces.com/system/Chat4Agent.com_n8n-step-3.png)
1. Final **Respond to Webhook** body — echo the four identifiers and return the AI output in `Response`:

```
1. {
 "Org_Id": "={{ $('Webhook').item.json.body.Org_Id }}",
 "Chat_Id": "={{ $('Webhook').item.json.body.Chat_Id }}",
 "Session_Id": "={{ $('Webhook').item.json.body.Session_Id }}",
 "Thread_Id": "={{ $('Webhook').item.json.body.Thread_Id }}",
 "Response": "={{ $json.output }}"
}

```

![n8n Respond to Webhook node with Respond With set to JSON and the response body filled in](https://chat4agent.ams3.digitaloceanspaces.com/system/Chat4Agent.com_n8n-step-4.png)
1. Any platform that can receive a webhook and answer with JSON works: this tab is the contract.
2. Every request the widget sends to your Agent Webhook carries the Secret in **four headers with identical values**: `x-chat4agent-secret` (primary), `x-make-secret`, `x-make-apikey` and `x-n8n-secret` (platform aliases).
3. Verify whichever one is easiest in your platform; they always match.
4. Reject any request where none matches the Secret shown in Agent Settings.

## Step 1

## Message sent to your Agent

Headers

```

Content-Type: application/json
x-chat4agent-secret: <Secret>
x-make-secret: <Secret> # same value — alias for Make
x-make-apikey: <Secret> # same value — alias for Make (API key variant)
x-n8n-secret: <Secret> # same value — alias for n8n

```

Payload

```

{
 "Org_Id": "<organization id that owns this chat>",
 "Chat_Id": "<chat id being served>",
 "Session_Id": "<unique per visitor, rotates every 1h>",
 "Thread_Id": "<conversation thread id>",
 "Message": "<visitor text, Markdown allowed>"
}

```

## Step 2

## Response sent to Chat4Agent

Headers

```

Content-Type: application/json

```

Payload

```

{
 "Org_Id": "<same as request>",
 "Chat_Id": "<same as request>",
 "Session_Id": "<same as request>",
 "Thread_Id": "<same as request>",
 "Response": "<agent reply text, Markdown allowed>"
}

```
1. The `Response` field must be a JSON string (stringified).
2. Markdown syntax (headings, bold, italics, lists, links, code blocks) is preserved through the widget.
3. Echo the four identifiers back: it keeps every reply traceable.