Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Andy Dixon
|
69c2e0c1b1 | ||
 Andy Dixon
|
862572a002 |
@@ -1,5 +0,0 @@
|
||||
*
|
||||
!go.mod
|
||||
!*.go
|
||||
!docs.html
|
||||
!static
|
||||
@@ -1 +0,0 @@
|
||||
webhooks
|
||||
@@ -0,0 +1,8 @@
|
||||
RewriteEngine On
|
||||
|
||||
# Skip existing files and directories
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
|
||||
# Redirect all requests to the PHP script
|
||||
RewriteRule ^(.*)$ index.php [L,QSA]
|
||||
-13
@@ -1,13 +0,0 @@
|
||||
FROM golang:1.26-alpine AS build
|
||||
WORKDIR /src
|
||||
COPY go.mod ./
|
||||
COPY *.go docs.html ./
|
||||
COPY static ./static
|
||||
RUN CGO_ENABLED=0 go build -trimpath -ldflags="-s -w" -o /webhooks .
|
||||
|
||||
FROM gcr.io/distroless/static-debian12:nonroot
|
||||
COPY --from=build /webhooks /webhooks
|
||||
ENV LISTEN=:8080 SMTP_ADDR=172.17.0.1:25 MAIL_FROM=no-reply@webhook.me.uk PUBLIC_HOST=webhook.me.uk
|
||||
EXPOSE 8080
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s CMD ["/webhooks", "-check"]
|
||||
ENTRYPOINT ["/webhooks"]
|
||||
@@ -1,381 +0,0 @@
|
||||
# Webhook Parser Development Guide
|
||||
|
||||
This guide explains how to create custom webhook parsers for the Webhook Email Forwarder.
|
||||
|
||||
## 📋 Overview
|
||||
|
||||
Parsers format webhook data from specific services (GitHub, Grafana, Stripe, GitLab, etc.) into readable HTML emails instead of the raw request dump.
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### URL Format
|
||||
|
||||
Parsers are triggered by adding the parser name to the URL:
|
||||
|
||||
```
|
||||
https://your-domain.com/{email}/{parser-name}
|
||||
```
|
||||
|
||||
**Examples:**
|
||||
- `https://webhook.me.uk/test%40example.com/github`
|
||||
- `https://webhook.me.uk/user%40company.com/grafana`
|
||||
- `https://webhook.me.uk/dev%40startup.io/json`
|
||||
|
||||
### How It Works
|
||||
|
||||
1. User configures the webhook URL with their email and parser name
|
||||
2. Service sends a webhook to that URL
|
||||
3. The server looks the parser name up in the `parsers` map in `main.go`
|
||||
4. The parser turns the request into an email body and subject
|
||||
5. The email is sent and the caller gets a JSON acknowledgement naming the parser and subject
|
||||
|
||||
If no parser is named, the name is unknown, or the parser returns `ok == false`, the default raw-request email is used instead.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Creating a Parser
|
||||
|
||||
### File and Function
|
||||
|
||||
Create `parser_{servicename}.go` in the package root with one function of this type:
|
||||
|
||||
```go
|
||||
// Parser turns a raw webhook into an email. ok=false means "fall back to the default email".
|
||||
type Parser func(raw []byte, headers http.Header, meta Meta) (html, subject string, ok bool)
|
||||
```
|
||||
|
||||
Then register it in `main.go`:
|
||||
|
||||
```go
|
||||
var parsers = map[string]Parser{
|
||||
"github": githubParse,
|
||||
"grafana": grafanaParse,
|
||||
"json": jsonParse,
|
||||
"wxinteract": wxinteractParse,
|
||||
"servicename": servicenameParse, // <- add yours
|
||||
}
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
#### `raw []byte`
|
||||
The complete request body as received.
|
||||
|
||||
```go
|
||||
v, err := decodeJSON(raw) // ordered JSON: *OMap, []any, string, json.Number, bool, nil
|
||||
payload := asObject(v) // nil if the body is not an object
|
||||
```
|
||||
|
||||
`decodeJSON` keeps object keys in the order the sender wrote them, so tables read naturally. Use it rather than `encoding/json` into a `map`, which sorts keys.
|
||||
|
||||
#### `headers http.Header`
|
||||
All request headers, including `Host`. Lookups through `headers.Get` are case-insensitive, which covers the lowercase names HTTP/2 delivers:
|
||||
|
||||
```go
|
||||
event := headers.Get("X-GitHub-Event")
|
||||
```
|
||||
|
||||
#### `meta Meta`
|
||||
```go
|
||||
type Meta struct {
|
||||
Date string // "2026-01-22 15:30:45"
|
||||
IP string // the client address nginx forwards, not the proxy
|
||||
Method string // "POST"
|
||||
ContentType string // "application/json"
|
||||
}
|
||||
```
|
||||
|
||||
### Return Value
|
||||
|
||||
- **Success:** the complete HTML document (from `emailShell`), the subject line, and `true`
|
||||
- **Failure:** `"", "", false` to fall back to the default email
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Building the Email
|
||||
|
||||
Never write a full HTML document by hand. Compose the body from the helpers in `render.go` and wrap it with `emailShell`, which adds the stylesheet, gradient header, and footer. Every parser looks the same this way and design changes happen in one place.
|
||||
|
||||
```go
|
||||
html := emailShell(title, stamp, body, footerSentence)
|
||||
```
|
||||
|
||||
| Argument | What it is |
|
||||
|----------|------------|
|
||||
| `title` | Header text, already HTML-safe. Start with an emoji. |
|
||||
| `stamp` | Usually `h(meta.Date)`. Shown as a pill under the title. |
|
||||
| `body` | Your sections. |
|
||||
| `footerSentence` | One line, e.g. "This Stripe webhook was automatically forwarded to your email address." Empty string for the generic default. |
|
||||
|
||||
### Building Blocks
|
||||
|
||||
```go
|
||||
section(title, innerHTML string) string // <div class="section"> with a title
|
||||
table(rows ...string) string // a real <table class="metadata">
|
||||
row(label, valueHTML string) string // one label/value <tr>
|
||||
link(url string) string // escaped <a href>
|
||||
kvTable(m *OMap) string // every key/value of an object as one table
|
||||
renderDataAsTable(v any, depth int) string // arbitrary nested JSON as tables (generic fallback)
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```go
|
||||
body := section("💳 Payment Details", table(
|
||||
row("Event", h(event)),
|
||||
row("Amount", h(amount)+" "+h(currency)),
|
||||
row("Customer", h(customer)),
|
||||
)) + section("📝 Note", `<div class="message-box">`+esc(note)+`</div>`)
|
||||
```
|
||||
|
||||
**Other classes you can use inside a section:**
|
||||
|
||||
| Class | Use for |
|
||||
|-------|---------|
|
||||
| `.subsection-title` | A bold sub-heading |
|
||||
| `.data-box` | A `<pre>` for raw JSON, headers, or code (dark block) |
|
||||
| `.message-box` | Quoted free text such as an SMS body |
|
||||
| `.error-box` | Error details |
|
||||
| `.array-item` / `.array-item-title` | A card for one item of a list (an alert, a commit) |
|
||||
| `.path-title` | A breadcrumb pill above a nested table, e.g. `order->items->[0]` |
|
||||
| `.commit-item` with `.sha`, `.who`, `.msg` | The GitHub commit card, reusable for any id + author + message list |
|
||||
|
||||
### Reading values
|
||||
|
||||
```go
|
||||
str(v) // scalar as text ("" for null, "true"/"false" for bools)
|
||||
strOr(v, "N/A") // PHP's `?? 'N/A'`: only missing/null takes the default
|
||||
get(payload, "repository", "full_name") // nested lookup, nil if any step is missing
|
||||
asObject(v) // *OMap or nil
|
||||
isContainer(v) // object or array?
|
||||
num(v) // float64 for a json.Number, else 0
|
||||
```
|
||||
|
||||
### Escaping
|
||||
|
||||
Two helpers, use the right one:
|
||||
|
||||
- `h(s)` for anything that goes into an attribute or a single-line value.
|
||||
- `esc(s)` for free text that may contain line breaks (commit messages, descriptions, SMS bodies). It escapes **and** converts newlines to `<br>`.
|
||||
|
||||
Subjects are plain text, never escaped.
|
||||
|
||||
---
|
||||
|
||||
## 📝 Example: Simple Parser
|
||||
|
||||
`parser_simplepay.go` for a fictional "SimplePay" service:
|
||||
|
||||
```go
|
||||
package main
|
||||
|
||||
import "net/http"
|
||||
|
||||
func simplepayParse(raw []byte, headers http.Header, meta Meta) (string, string, bool) {
|
||||
payload := asObject(mustDecode(raw))
|
||||
if payload == nil {
|
||||
return "", "", false // not a JSON object: use the default email
|
||||
}
|
||||
|
||||
event := strOr(payload.Get("event"), "Unknown")
|
||||
amount := strOr(payload.Get("amount"), "N/A")
|
||||
currency := strOr(payload.Get("currency"), "USD")
|
||||
customer := strOr(payload.Get("customer_email"), "Unknown")
|
||||
note := strOr(payload.Get("note"), "")
|
||||
|
||||
body := section("💳 Payment Details", table(
|
||||
row("Event", h(event)),
|
||||
row("Amount", h(amount)+" "+h(currency)),
|
||||
row("Customer", h(customer)),
|
||||
row("IP Address", h(meta.IP)),
|
||||
))
|
||||
if note != "" {
|
||||
body += section("📝 Note", `<div class="message-box">`+esc(note)+`</div>`)
|
||||
}
|
||||
|
||||
html := emailShell("💳 SimplePay: "+h(event), h(meta.Date), body,
|
||||
"This SimplePay webhook was automatically forwarded to your email address.")
|
||||
return html, "💳 SimplePay " + event + " - " + amount + " " + currency, true
|
||||
}
|
||||
|
||||
func mustDecode(raw []byte) any {
|
||||
v, err := decodeJSON(raw)
|
||||
if err != nil {
|
||||
return nil
|
||||
}
|
||||
return v
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Style Guidelines
|
||||
|
||||
The shell owns colours, fonts, and spacing. Parsers only choose structure and words.
|
||||
|
||||
1. **Sections**: one `section` per logical group
|
||||
2. **Tables**: `table(row(...))` for label/value pairs, never hand-written divs
|
||||
3. **Lists**: one `.array-item` card per item (alerts, commits, line items)
|
||||
4. **Raw data**: `.data-box` for anything the reader might want to copy
|
||||
5. **Free text**: `.message-box`, escaped with `esc`
|
||||
6. **Links**: `link(url)`
|
||||
|
||||
### Emojis
|
||||
|
||||
- 💳 Payment events
|
||||
- 🚀 Deployments/releases
|
||||
- 📤 Push/upload events
|
||||
- 🔀 Merge/pull request events
|
||||
- ⚠️ Errors/warnings
|
||||
- ✅ Success events
|
||||
- 🔔 Notifications
|
||||
|
||||
Put the same emoji at the start of the subject line so inbox filters can key on it.
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Security Best Practices
|
||||
|
||||
### 1. Escape everything dynamic
|
||||
|
||||
```go
|
||||
// ❌ DANGEROUS - XSS in the email
|
||||
body += "<div>" + str(payload.Get("user_input")) + "</div>"
|
||||
|
||||
// ✅ SAFE (single line)
|
||||
body += "<div>" + h(str(payload.Get("user_input"))) + "</div>"
|
||||
|
||||
// ✅ SAFE (multi-line free text)
|
||||
body += `<div class="message-box">` + esc(str(payload.Get("message"))) + `</div>`
|
||||
```
|
||||
|
||||
### 2. Validate input
|
||||
|
||||
```go
|
||||
if payload == nil || payload.Get("event_type") == nil {
|
||||
return "", "", false
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Verify signatures (optional)
|
||||
|
||||
```go
|
||||
sig := headers.Get("X-Service-Signature")
|
||||
mac := hmac.New(sha256.New, []byte(secret))
|
||||
mac.Write(raw)
|
||||
if sig == "" || !hmac.Equal([]byte(sig), []byte(hex.EncodeToString(mac.Sum(nil)))) {
|
||||
return "", "", false
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Your Parser
|
||||
|
||||
### 1. Unit test
|
||||
|
||||
`main_test.go` has a `capture(t)` helper that swaps the mailer for an in-memory one and a `do(...)` helper that drives the handler. Add a test in the same style:
|
||||
|
||||
```go
|
||||
func TestSimplePay(t *testing.T) {
|
||||
c := capture(t)
|
||||
_, out := do(t, "POST", "/t%40e.com/simplepay", `{"event":"paid","amount":"9.99"}`, nil)
|
||||
if out["subject"] != "💳 SimplePay paid - 9.99 USD" || !strings.Contains(c.html, "9.99") {
|
||||
t.Fatalf("%v", out["subject"])
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```bash
|
||||
go test ./...
|
||||
```
|
||||
|
||||
### 2. Run locally without sending mail
|
||||
|
||||
Point the server at any SMTP sink (the repo's tests don't need one, but for eyeballing the HTML):
|
||||
|
||||
```bash
|
||||
LISTEN=127.0.0.1:8098 SMTP_ADDR=127.0.0.1:2525 go run .
|
||||
curl -X POST http://127.0.0.1:8098/test%40example.com/simplepay \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"event":"paid","amount":"9.99","currency":"USD"}'
|
||||
```
|
||||
|
||||
The JSON response tells you which parser ran and what subject was used.
|
||||
|
||||
### 3. Test the failure case
|
||||
|
||||
Send invalid data and confirm the response shows the default subject (`‼️ Webhook Request Received`).
|
||||
|
||||
### 4. Test a lowercase header
|
||||
|
||||
Real deliveries over HTTP/2 arrive with lowercase header names. `headers.Get` handles it, but if you read `headers[...]` directly you will miss them.
|
||||
|
||||
---
|
||||
|
||||
## 📋 Parser Checklist
|
||||
|
||||
- [ ] File is `parser_{servicename}.go` and the function matches the `Parser` type
|
||||
- [ ] Registered in the `parsers` map in `main.go`
|
||||
- [ ] Returns `false` on failure/invalid data
|
||||
- [ ] Header lookups use `headers.Get`
|
||||
- [ ] All dynamic content goes through `h` or `esc`
|
||||
- [ ] Body uses `section` / `table` / `row` and is wrapped with `emailShell`
|
||||
- [ ] Subject line includes an emoji and key information
|
||||
- [ ] Unit test added and `go test ./...` passes
|
||||
- [ ] README section added for the parser
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Contributing Parsers
|
||||
|
||||
1. Add `parser_{servicename}.go` and register it
|
||||
2. Add a test
|
||||
3. Document usage in README.md (service name, URL format, supported events)
|
||||
4. Submit a pull request with an example payload in the description
|
||||
|
||||
---
|
||||
|
||||
## 📚 Reference
|
||||
|
||||
### Existing parsers
|
||||
|
||||
- `parser_github.go` - Multiple event types, commit cards, generic fallback
|
||||
- `parser_grafana.go` - Nested alert cards with label and annotation tables
|
||||
- `parser_json.go` - Recursive rendering with path breadcrumbs
|
||||
- `parser_wxinteract.go` - Many event types in one switch
|
||||
- `render.go` - `emailShell`, `esc`, `h`, `decodeJSON`, `renderDataAsTable`, table helpers
|
||||
- `main.go` - Routing, JSON response, default email, parser registry
|
||||
- `mail.go` - SMTP delivery
|
||||
|
||||
### Configuration
|
||||
|
||||
| Variable | Default | Meaning |
|
||||
|----------|---------|---------|
|
||||
| `LISTEN` | `127.0.0.1:8080` | Address to listen on (`:8080` in the container) |
|
||||
| `SMTP_ADDR` | `127.0.0.1:25` | SMTP relay (`172.17.0.1:25` in the container, the host's postfix) |
|
||||
| `MAIL_FROM` | `no-reply@webhook.me.uk` | Envelope and From address |
|
||||
| `PUBLIC_HOST` | `webhook.me.uk` | Host shown in email footers |
|
||||
|
||||
---
|
||||
|
||||
## ❓ FAQ
|
||||
|
||||
**Q: Can I use external libraries?**
|
||||
A: The project has no dependencies beyond the standard library. Keep it that way unless there is a very good reason.
|
||||
|
||||
**Q: Can I make API calls in a parser?**
|
||||
A: Not recommended. Parsers should be fast and not depend on external services.
|
||||
|
||||
**Q: What if my service sends different content types?**
|
||||
A: Check `meta.ContentType` and parse accordingly.
|
||||
|
||||
**Q: Can I create multiple parsers for one service?**
|
||||
A: Yes. Register as many names as you like.
|
||||
|
||||
**Q: Can I change the colours or fonts?**
|
||||
A: Change `shellSrc` in `render.go` and every email picks it up.
|
||||
|
||||
---
|
||||
|
||||
**Happy Parser Building! 🚀**
|
||||
@@ -1,17 +1,14 @@
|
||||
# Webhook Email Forwarder
|
||||
|
||||
A single-binary Go service for debugging webhooks by forwarding them directly to your email.
|
||||
A simple, elegant PHP solution for debugging webhooks by forwarding them directly to your email.
|
||||
|
||||
## 🌟 Features
|
||||
|
||||
- **Email Delivery**: Receive complete webhook data directly in your inbox
|
||||
- **Custom Parsers**: Beautifully formatted emails for GitHub, Grafana, Webex Interact, and any JSON payload
|
||||
- **JSON Response**: Every request gets a structured JSON acknowledgement, not a wall of `print_r`
|
||||
- **Secure**: Built-in email validation and XSS protection
|
||||
- **Instant**: Real-time webhook processing and forwarding
|
||||
- **Simple**: No database or complex setup required
|
||||
- **Universal**: Supports all HTTP methods and content types
|
||||
- **Extensible**: Easy to add new parsers for any webhook service
|
||||
|
||||
## 📋 Overview
|
||||
|
||||
@@ -23,163 +20,18 @@ This webhook service captures incoming HTTP requests and forwards complete reque
|
||||
Replace `@` with `%40` in your email address:
|
||||
- `test@example.com` becomes `test%40example.com`
|
||||
|
||||
The landing page has a URL builder that does this for you.
|
||||
|
||||
### 2. Configure Webhook
|
||||
Use one of the following URL formats as your webhook endpoint:
|
||||
|
||||
**Standard format** (raw webhook data):
|
||||
Use the following URL format as your webhook endpoint:
|
||||
```
|
||||
https://your-domain.com/{encoded-email}
|
||||
```
|
||||
|
||||
**With parser** (formatted email for specific services):
|
||||
```
|
||||
https://your-domain.com/{encoded-email}/{parser-name}
|
||||
```
|
||||
|
||||
### 3. Check Your Inbox
|
||||
Receive webhook data instantly in your email!
|
||||
|
||||
**Standard format:**
|
||||
Receive detailed webhook data instantly in your email with the subject:
|
||||
```
|
||||
‼️ Webhook Request Received - [timestamp]
|
||||
```
|
||||
|
||||
**With parser:**
|
||||
```
|
||||
📤 GitHub push - username/repo
|
||||
🚨 Grafana Alert: firing - 2 alerts
|
||||
📊 JSON Webhook - [timestamp]
|
||||
📥 Webex Interact: Inbound SMS Received
|
||||
```
|
||||
|
||||
## 📬 The Response
|
||||
|
||||
Every request is answered with `application/json`, pretty-printed. JSON bodies are decoded and echoed back under `data.json` so you can see exactly what the server understood.
|
||||
|
||||
```json
|
||||
{
|
||||
"ok": true,
|
||||
"message": "Webhook received and forwarded to test@example.com",
|
||||
"forwarded_to": "test@example.com",
|
||||
"parser": "default",
|
||||
"subject": "‼️ Webhook Request Received - 2026-09-12 17:18:02",
|
||||
"received_at": "2026-09-12T17:18:02+00:00",
|
||||
"request": {
|
||||
"method": "POST",
|
||||
"content_type": "application/json",
|
||||
"ip": "203.0.113.7",
|
||||
"headers": 9,
|
||||
"body_bytes": 40
|
||||
},
|
||||
"data": {
|
||||
"query": { "src": "curl" },
|
||||
"form": {},
|
||||
"json": { "event": "user.created", "user_id": 12345 },
|
||||
"files": []
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
| Field | Meaning |
|
||||
|-------|---------|
|
||||
| `ok` | `true` on success, `false` on error |
|
||||
| `parser` | The parser used, or `default` |
|
||||
| `subject` | The subject line of the email that was sent |
|
||||
| `request.headers` | Number of headers received |
|
||||
| `request.body_bytes` | Raw body length |
|
||||
| `data.query` / `data.form` | Query string and form fields (always objects, never `[]`) |
|
||||
| `data.json` | Decoded body when the Content-Type is JSON, otherwise `null` |
|
||||
| `data.files` | Names of uploaded file fields |
|
||||
|
||||
Any 2xx is enough for most services to mark the delivery as succeeded and stop retrying.
|
||||
|
||||
## 🎨 Webhook Parsers
|
||||
|
||||
Parsers format webhooks from specific services into beautiful, readable emails. Add the parser name to the end of the URL. If a parser can't understand the payload, the email falls back to the standard raw format so nothing is lost.
|
||||
|
||||
### Available Parsers
|
||||
|
||||
#### GitHub (`/github`)
|
||||
Formats GitHub webhook events with full event details.
|
||||
|
||||
**Supported events:**
|
||||
- Push events (each commit as a card with a linked sha, author, and full multi-line message)
|
||||
- Pull requests
|
||||
- Issues
|
||||
- Releases
|
||||
- Everything else in a clean generic layout
|
||||
|
||||
**Example URL:**
|
||||
```
|
||||
https://your-domain.com/test%40example.com/github
|
||||
```
|
||||
|
||||
Header names are matched case-insensitively, so deliveries over HTTP/2 (where headers arrive lowercase) work correctly.
|
||||
|
||||
#### Grafana / Prometheus Alertmanager (`/grafana`)
|
||||
Formats Alertmanager webhook payloads from Grafana or Prometheus.
|
||||
|
||||
**What you get:**
|
||||
- Firing or resolved status in the subject and header
|
||||
- Group labels, common labels, and common annotations
|
||||
- Each alert as its own card with labels, annotations, start and end times, and a link to the generator
|
||||
|
||||
**Example URL:**
|
||||
```
|
||||
https://your-domain.com/test%40example.com/grafana
|
||||
```
|
||||
|
||||
#### JSON (`/json`)
|
||||
Renders any JSON body as tables. Nested objects are split into separate tables with path-based breadcrumbs (for example `order->items->[0]->tags`), so you can find a deeply nested value without squinting at raw JSON.
|
||||
|
||||
**Handles:**
|
||||
- Objects and arrays of objects
|
||||
- Arrays of plain values, as one table under their breadcrumb
|
||||
- Scalar bodies (a bare string, number, boolean, or `null`)
|
||||
- Multi-line string values, with line breaks preserved
|
||||
|
||||
**Example URL:**
|
||||
```
|
||||
https://your-domain.com/test%40example.com/json
|
||||
```
|
||||
|
||||
#### Webex Interact (`/wxinteract`)
|
||||
Formats Webex Interact SMS API webhook events into clean, readable emails.
|
||||
|
||||
**Supported events:**
|
||||
- 📤 Outbound SMS - Submitted
|
||||
- ✅ Outbound SMS - Delivered
|
||||
- ❌ Outbound SMS - Failed
|
||||
- 🔗 Shortlink Clicked
|
||||
- 📥 Inbound SMS Received
|
||||
- 🚫 SMS Opt Out Received
|
||||
- 👤 Contacts Callback
|
||||
|
||||
**Example URL:**
|
||||
```
|
||||
https://your-domain.com/test%40example.com/wxinteract
|
||||
```
|
||||
|
||||
**What you get:**
|
||||
- Event-specific formatting with relevant emojis
|
||||
- Message content displayed in a message box, line breaks intact
|
||||
- Contact and campaign information
|
||||
- Error details for failed messages
|
||||
- Click tracking details for shortlinks
|
||||
- Custom fields support for contact callbacks
|
||||
|
||||
**Test samples available in:** `wxinteract_test_samples.json`
|
||||
|
||||
See also the [Webex Interact Guide](WEBEX_INTERACT_GUIDE.md).
|
||||
|
||||
### Creating Your Own Parser
|
||||
|
||||
A parser is one Go function of type `Parser` in `parser_{name}.go`, registered in the `parsers` map in `main.go`. Build the body with `section`, `table`, and `row`, escape free text with `esc`, and wrap it with `emailShell` so it picks up the shared design. See the [Parser Development Guide](PARSER_PROMPT.md) for details.
|
||||
|
||||
---
|
||||
|
||||
## 💡 Usage Examples
|
||||
|
||||
### cURL - POST Request with JSON
|
||||
@@ -191,165 +43,70 @@ curl -X POST https://your-domain.com/test%40example.com \
|
||||
|
||||
### cURL - GET Request with Parameters
|
||||
```bash
|
||||
curl "https://your-domain.com/test%40example.com?event=test&id=123"
|
||||
curl https://your-domain.com/test%40example.com?event=test&id=123
|
||||
```
|
||||
|
||||
### JavaScript - Fetch API
|
||||
```javascript
|
||||
fetch('https://your-domain.com/' + encodeURIComponent('test@example.com'), {
|
||||
fetch('https://your-domain.com/test%40example.com', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ event: 'order.completed', order_id: 'ORD-789', total: 99.99 })
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
event: 'order.completed',
|
||||
order_id: 'ORD-789',
|
||||
total: 99.99
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Python - Requests Library
|
||||
```python
|
||||
import requests
|
||||
from urllib.parse import quote
|
||||
|
||||
response = requests.post(
|
||||
f'https://your-domain.com/{quote("test@example.com")}',
|
||||
'https://your-domain.com/test%40example.com',
|
||||
json={'event': 'payment.received', 'amount': 250.00},
|
||||
headers={'X-Custom-Header': 'MyValue'},
|
||||
headers={'X-Custom-Header': 'MyValue'}
|
||||
)
|
||||
print(response.json())
|
||||
```
|
||||
|
||||
### With GitHub Parser
|
||||
|
||||
Configure your GitHub webhook with:
|
||||
```
|
||||
https://your-domain.com/yourname%40company.com/github
|
||||
```
|
||||
|
||||
When events occur, you'll receive formatted emails like:
|
||||
|
||||
**Push Event:**
|
||||
```
|
||||
📤 GitHub push - yourname/your-repo
|
||||
|
||||
Repository: yourname/your-repo
|
||||
Branch: refs/heads/main
|
||||
Commits: 3
|
||||
Pusher: developerUsername
|
||||
|
||||
Commits:
|
||||
abc1234 John Doe
|
||||
Fix bug in authentication
|
||||
|
||||
def5678 Jane Smith
|
||||
Update dependencies
|
||||
```
|
||||
|
||||
**Pull Request:**
|
||||
```
|
||||
🔀 GitHub pull_request (opened) - yourname/your-repo
|
||||
|
||||
Number: #42
|
||||
Title: Add new authentication method
|
||||
State: open
|
||||
Branch: feature-auth → main
|
||||
```
|
||||
|
||||
### With Grafana Parser
|
||||
|
||||
Point a Grafana contact point or Alertmanager webhook receiver at:
|
||||
```
|
||||
https://your-domain.com/yourname%40company.com/grafana
|
||||
```
|
||||
|
||||
**Firing alert:**
|
||||
```
|
||||
🚨 Grafana Alert: firing - 1 alert
|
||||
|
||||
Status: 🔥 firing
|
||||
Receiver: email
|
||||
Alert Count: 1
|
||||
|
||||
Alert 1 - firing
|
||||
alertname: HighCPU
|
||||
instance: web-01
|
||||
severity: critical
|
||||
summary: CPU over 90% for 5m
|
||||
Started At: 2026-09-11T17:00:00Z
|
||||
```
|
||||
|
||||
### With Webex Interact Parser
|
||||
|
||||
Configure your Webex Interact API callback URL with:
|
||||
```
|
||||
https://your-domain.com/yourname%40company.com/wxinteract
|
||||
```
|
||||
|
||||
**Outbound SMS - Submitted:**
|
||||
```
|
||||
📤 Webex Interact: Outbound SMS - Submitted
|
||||
|
||||
Message ID: msg_123456789
|
||||
To: +61412345678
|
||||
From: +61387654321
|
||||
Campaign ID: camp_987654321
|
||||
Submitted At: 2026-01-22T16:45:00Z
|
||||
|
||||
Message Content:
|
||||
Hello! Your appointment is confirmed for tomorrow at 2 PM.
|
||||
print(response.text)
|
||||
```
|
||||
|
||||
## 📦 Installation
|
||||
|
||||
### Run the binary
|
||||
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
git clone https://github.com/andydixon/webhook.git
|
||||
cd webhook
|
||||
go build -o webhooks .
|
||||
LISTEN=127.0.0.1:8080 SMTP_ADDR=127.0.0.1:25 MAIL_FROM=no-reply@example.com ./webhooks
|
||||
```
|
||||
|
||||
Put a reverse proxy (nginx, Caddy) in front for TLS. The service reads `X-Real-IP` / `X-Forwarded-For` from a private-address proxy to report the real client IP.
|
||||
2. Upload the files to your web server (ensure PHP is installed and configured)
|
||||
|
||||
### Run the container
|
||||
3. Ensure the web server has permission to send emails (PHP `mail()` function)
|
||||
|
||||
```bash
|
||||
docker build -t webhooks.dixon.cx:latest .
|
||||
docker run --rm -p 127.0.0.1:29593:8080 webhooks.dixon.cx:latest
|
||||
```
|
||||
|
||||
The image is a static binary on `distroless`, runs as non-root, listens on `:8080`, and relays mail to `172.17.0.1:25` (the Docker host's SMTP server) by default. `deploy/webhooks.dixon.cx.service` is the systemd unit used in production.
|
||||
|
||||
### Configuration
|
||||
|
||||
| Variable | Default | Meaning |
|
||||
|----------|---------|---------|
|
||||
| `LISTEN` | `127.0.0.1:8080` | Address to listen on (`:8080` in the container) |
|
||||
| `SMTP_ADDR` | `127.0.0.1:25` | SMTP relay, no auth or TLS (`172.17.0.1:25` in the container) |
|
||||
| `MAIL_FROM` | `no-reply@webhook.me.uk` | Envelope and From address |
|
||||
| `PUBLIC_HOST` | `webhook.me.uk` | Host shown in email footers |
|
||||
|
||||
`/healthz` returns `ok`, and `webhooks -check` exits non-zero if a running instance is unhealthy (used by the image's `HEALTHCHECK`).
|
||||
4. Access the root URL to view the documentation page
|
||||
|
||||
## 🔧 Requirements
|
||||
|
||||
- Go 1.24 or newer to build (no third-party dependencies), or Docker
|
||||
- An SMTP server that accepts mail from the service's address
|
||||
- PHP 7.0 or higher
|
||||
- Web server (Apache, Nginx, etc.)
|
||||
- PHP `mail()` function enabled
|
||||
- Outbound SMTP/email capability
|
||||
|
||||
## 📧 What You Receive
|
||||
|
||||
Every email shares one design: a gradient header with the event title and a timestamp pill, then a white card of sections. Metadata is rendered as real HTML tables so it lays out correctly in Gmail, Outlook, and Apple Mail. Code and raw payloads sit in dark code blocks.
|
||||
|
||||
The standard (no parser) email contains:
|
||||
Each webhook email contains:
|
||||
|
||||
- **Request Timestamp**: Exact date and time when the webhook was received
|
||||
- **Request Information**: IP address, HTTP method, and Content-Type
|
||||
- **Request Headers**: All HTTP headers sent with the request
|
||||
- **Request Body**: Complete raw body content (JSON, XML, form data, etc.)
|
||||
- **Parsed Variables**: GET, POST, REQUEST, and FILES superglobals as pretty-printed JSON
|
||||
- **PHP Variables**: Parsed GET, POST, REQUEST, and FILES superglobals
|
||||
|
||||
## 🔒 Security Features
|
||||
|
||||
- **Email Validation**: Only valid email addresses are accepted
|
||||
- **XSS Protection**: All output is HTML-escaped; free-text values go through `esc`, which also preserves line breaks
|
||||
- **XSS Protection**: All output is sanitized using `htmlspecialchars()`
|
||||
- **No Data Storage**: Webhook data is forwarded immediately and not stored
|
||||
- **Error Logging**: Failed email attempts are logged for monitoring
|
||||
|
||||
@@ -372,45 +129,27 @@ The standard (no parser) email contains:
|
||||
## 🎯 Common Use Cases
|
||||
|
||||
- **Debugging**: See exactly what data third-party services are sending
|
||||
- **GitHub Notifications**: Get beautifully formatted emails for pushes, PRs, and issues
|
||||
- **Alerting**: Grafana and Prometheus alerts in your inbox without a whole notification stack
|
||||
- **Integration Testing**: Test webhook integrations before implementing full handlers
|
||||
- **Monitoring**: Monitor webhook activity and payload changes over time
|
||||
- **Documentation**: Capture real examples for API documentation
|
||||
- **Development**: Quickly test webhook flows during development
|
||||
- **Troubleshooting**: Diagnose issues with webhook payloads and headers
|
||||
- **Custom Parsers**: Add your own parsers for Stripe, GitLab, Slack, etc.
|
||||
|
||||
## 💡 Tips & Best Practices
|
||||
|
||||
- **Use Parsers**: Use `/github`, `/grafana`, `/json`, or `/wxinteract` for prettier emails
|
||||
- **Email Filtering**: Create email filters based on subject patterns ("📤 GitHub", "🚨 Grafana") to organize webhooks
|
||||
- **Email Filtering**: Create an email filter for the subject line "‼️ Webhook Request Received" to organize incoming webhooks
|
||||
- **Plus Addressing**: Use email plus addressing (e.g., `yourname+github%40gmail.com`) to track which services are sending webhooks
|
||||
- **Timestamp in Emails**: Check the timestamp in the header to verify webhook timing and debug delivery delays
|
||||
- **Standard Format**: Use the standard format (no parser) when you need complete raw data for debugging
|
||||
- **Create Parsers**: Build custom parsers for your favorite services - see [Parser Guide](PARSER_PROMPT.md)
|
||||
- **Timestamp in Emails**: Check the "Date Received" field to verify webhook timing and debug delivery delays
|
||||
- **Parse the Body**: The raw body section contains the exact payload - perfect for copying into your code for testing
|
||||
|
||||
## 📝 Error Handling
|
||||
|
||||
### Invalid Email Address
|
||||
If the email address in the URL is invalid or missing, you get a `400 Bad Request` with a JSON body:
|
||||
```json
|
||||
{
|
||||
"ok": false,
|
||||
"error": "invalid_email",
|
||||
"message": "Invalid email address provided in URL path.",
|
||||
"hint": "Encode @ as %40, e.g. /you%40example.com"
|
||||
}
|
||||
If the email address in the URL is invalid or missing:
|
||||
```
|
||||
HTTP 400 Bad Request
|
||||
Invalid email address provided in URL path.
|
||||
```
|
||||
|
||||
### Unknown Parser or Unparseable Payload
|
||||
The request still succeeds. The email uses the standard raw format and the response reports the parser name you asked for.
|
||||
|
||||
### Mail Delivery Failure
|
||||
If the SMTP relay rejects the message you get a `502` with `"error": "mail_failed"`, so the sending service will retry rather than believe the webhook was delivered.
|
||||
|
||||
### Body Too Large
|
||||
Bodies over 10 MB get a `413` with `"error": "body_too_large"`.
|
||||
|
||||
## 📄 License
|
||||
|
||||
@@ -432,30 +171,6 @@ Give a ⭐️ if this project helped you!
|
||||
|
||||
## 📜 Version History
|
||||
|
||||
- **3.0.0** - Go Rewrite
|
||||
- ♻️ The whole service is now a single Go binary with no dependencies; PHP, Apache, and `.htaccess` are gone
|
||||
- 🐳 Static `distroless` image, non-root, built-in health check
|
||||
- 📧 Mail goes over SMTP with a quoted-printable body and an RFC 2047 subject, so emoji subjects survive every relay
|
||||
- 🔁 A failed send returns `502 mail_failed` instead of a false `200`
|
||||
- 🧪 `go test ./...` covers routing, the JSON response, IP forwarding, and every parser
|
||||
- Email output and the JSON response are byte-for-byte compatible with 2.1.0, with JSON object keys kept in sender order
|
||||
|
||||
- **2.1.0** - JSON Response and Email Redesign
|
||||
- ✨ **NEW**: Structured JSON response for every request, including errors
|
||||
- ✨ **NEW**: Grafana / Prometheus Alertmanager parser (`/grafana`)
|
||||
- ✨ **NEW**: Generic JSON parser (`/json`) with path breadcrumbs, scalar bodies, and arrays of plain values
|
||||
- ✨ **NEW**: Redesigned landing page with a URL builder
|
||||
- 🎨 One shared email design (`emailShell()`) across every template, built on real tables
|
||||
- 🐛 Line breaks preserved in commit messages, SMS text, and JSON values
|
||||
- 🐛 GitHub event headers matched case-insensitively (fixes "Unknown" events over HTTP/2)
|
||||
|
||||
- **2.0.0** - Parser System Release
|
||||
- ✨ **NEW**: Custom parser support for formatted webhooks
|
||||
- ✨ **NEW**: GitHub webhook parser with full event support
|
||||
- ✨ **NEW**: Webex Interact SMS parser
|
||||
- ✨ **NEW**: Parser development guide (PARSER_PROMPT.md)
|
||||
- Backward compatible with existing webhook URLs
|
||||
|
||||
- **1.0.0** - Initial release
|
||||
- Basic webhook forwarding functionality
|
||||
- HTML email formatting
|
||||
@@ -464,4 +179,4 @@ Give a ⭐️ if this project helped you!
|
||||
|
||||
---
|
||||
|
||||
Built with Go and ADHD medication 💊
|
||||
Built with PHP and ADHD medication 💊
|
||||
|
||||
@@ -1,380 +0,0 @@
|
||||
# Webex Interact Webhook Parser Guide
|
||||
|
||||
## Overview
|
||||
|
||||
The Webex Interact parser (`/wxinteract`) formats SMS API webhook events from Webex Interact into clean, readable HTML emails. Each event type gets custom formatting with relevant emojis for easy identification.
|
||||
|
||||
## Configuration
|
||||
|
||||
### URL Format
|
||||
|
||||
```
|
||||
https://your-domain.com/{your-email}/wxinteract
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
```
|
||||
https://webhook.me.uk/sms-notifications%40mycompany.com/wxinteract
|
||||
```
|
||||
|
||||
## Supported Events
|
||||
|
||||
The parser automatically detects the event type based on the `data.status` field in the webhook payload.
|
||||
|
||||
### 📤 Outbound SMS - Submitted
|
||||
**Status:** `submitted`
|
||||
|
||||
Triggered when an SMS message is submitted to the carrier for delivery.
|
||||
|
||||
**Fields displayed:**
|
||||
- Message ID
|
||||
- To (recipient phone number)
|
||||
- From (sender phone number)
|
||||
- Campaign ID
|
||||
- Submitted At (timestamp)
|
||||
- Message Content (formatted in a clean message box)
|
||||
|
||||
**Example payload:**
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"status": "submitted",
|
||||
"message_id": "msg_123456789",
|
||||
"to": "+61412345678",
|
||||
"from": "+61387654321",
|
||||
"message": "Hello! Your appointment is confirmed for tomorrow at 2 PM.",
|
||||
"submitted_at": "2026-01-22T16:45:00Z",
|
||||
"campaign_id": "camp_987654321"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ✅ Outbound SMS - Delivered
|
||||
**Status:** `delivered`
|
||||
|
||||
Triggered when an SMS message is successfully delivered to the recipient.
|
||||
|
||||
**Fields displayed:**
|
||||
- Message ID
|
||||
- To (recipient phone number)
|
||||
- From (sender phone number)
|
||||
- Campaign ID
|
||||
- Delivered At (timestamp)
|
||||
|
||||
**Example payload:**
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"status": "delivered",
|
||||
"message_id": "msg_123456789",
|
||||
"to": "+61412345678",
|
||||
"from": "+61387654321",
|
||||
"delivered_at": "2026-01-22T16:46:15Z",
|
||||
"campaign_id": "camp_987654321"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ❌ Outbound SMS - Failed
|
||||
**Status:** `failed`
|
||||
|
||||
Triggered when an SMS message fails to deliver.
|
||||
|
||||
**Fields displayed:**
|
||||
- Message ID
|
||||
- To (recipient phone number)
|
||||
- From (sender phone number)
|
||||
- Campaign ID
|
||||
- Failed At (timestamp)
|
||||
- Error Code (highlighted in error box)
|
||||
- Error Message (highlighted in error box)
|
||||
|
||||
**Example payload:**
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"status": "failed",
|
||||
"message_id": "msg_987654321",
|
||||
"to": "+61499999999",
|
||||
"from": "+61387654321",
|
||||
"failed_at": "2026-01-22T16:47:00Z",
|
||||
"error_code": "ERR_INVALID_NUMBER",
|
||||
"error_message": "The destination number is invalid or not reachable",
|
||||
"campaign_id": "camp_987654321"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🔗 Shortlink Clicked
|
||||
**Status:** `shortlink_clicked`
|
||||
|
||||
Triggered when a recipient clicks a tracked shortlink in an SMS message.
|
||||
|
||||
**Fields displayed:**
|
||||
- Shortlink (clickable)
|
||||
- Original URL (clickable)
|
||||
- Phone Number (recipient who clicked)
|
||||
- Message ID
|
||||
- Campaign ID
|
||||
- Clicked At (timestamp)
|
||||
- IP Address (of the click)
|
||||
- User Agent (browser/device information)
|
||||
|
||||
**Example payload:**
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"status": "shortlink_clicked",
|
||||
"shortlink": "https://wxint.co/abc123",
|
||||
"original_url": "https://example.com/special-offer",
|
||||
"clicked_at": "2026-01-22T17:30:45Z",
|
||||
"phone_number": "+61412345678",
|
||||
"message_id": "msg_123456789",
|
||||
"campaign_id": "camp_987654321",
|
||||
"user_agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15",
|
||||
"ip_address": "203.0.113.45"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 📥 Inbound SMS Received
|
||||
**Status:** `received`
|
||||
|
||||
Triggered when an inbound SMS is received from a recipient.
|
||||
|
||||
**Fields displayed:**
|
||||
- Message ID
|
||||
- From (sender phone number)
|
||||
- To (your phone number)
|
||||
- Keyword (detected keyword)
|
||||
- Received At (timestamp)
|
||||
- Message Content (formatted in a clean message box)
|
||||
|
||||
**Example payload:**
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"status": "received",
|
||||
"message_id": "msg_inbound_001",
|
||||
"from": "+61412345678",
|
||||
"to": "+61387654321",
|
||||
"message": "YES I would like to receive updates",
|
||||
"received_at": "2026-01-22T18:00:00Z",
|
||||
"keyword": "YES"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🚫 SMS Opt Out Received
|
||||
**Status:** `opt_out`
|
||||
|
||||
Triggered when a recipient opts out of receiving SMS messages (typically by replying "STOP").
|
||||
|
||||
**Fields displayed:**
|
||||
- Phone Number (who opted out)
|
||||
- From Number (your SMS number)
|
||||
- Keyword (e.g., "STOP")
|
||||
- Message ID
|
||||
- Opt Out At (timestamp)
|
||||
|
||||
**Example payload:**
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"status": "opt_out",
|
||||
"phone_number": "+61412345678",
|
||||
"opt_out_at": "2026-01-22T18:15:00Z",
|
||||
"keyword": "STOP",
|
||||
"message_id": "msg_optout_001",
|
||||
"from": "+61387654321"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 👤 Contacts Callback
|
||||
**Status:** `contact_created` or `contact_updated`
|
||||
|
||||
Triggered when a contact is created or updated in your Webex Interact account.
|
||||
|
||||
**Fields displayed:**
|
||||
- Contact ID
|
||||
- Phone Number
|
||||
- First Name
|
||||
- Last Name
|
||||
- Email
|
||||
- Status
|
||||
- Created At (timestamp)
|
||||
- Updated At (timestamp)
|
||||
- Custom Fields (if present, displayed in a separate section)
|
||||
|
||||
**Example payload:**
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"status": "contact_created",
|
||||
"contact_id": "contact_abc123",
|
||||
"phone_number": "+61412345678",
|
||||
"first_name": "John",
|
||||
"last_name": "Smith",
|
||||
"email": "john.smith@example.com",
|
||||
"created_at": "2026-01-22T19:00:00Z",
|
||||
"updated_at": "2026-01-22T19:00:00Z",
|
||||
"custom_fields": {
|
||||
"company": "Acme Corporation",
|
||||
"department": "Sales",
|
||||
"customer_id": "CUST_12345"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Testing
|
||||
|
||||
### Using cURL
|
||||
|
||||
Test individual event types using the sample payloads:
|
||||
|
||||
```bash
|
||||
# Test Outbound SMS Submitted
|
||||
curl -X POST https://your-domain.com/test%40example.com/wxinteract \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"data": {"status": "submitted", "message_id": "msg_123", "to": "+61412345678", "from": "+61387654321", "message": "Test message", "submitted_at": "2026-01-22T16:45:00Z", "campaign_id": "camp_001"}}'
|
||||
|
||||
# Test SMS Opt Out
|
||||
curl -X POST https://your-domain.com/test%40example.com/wxinteract \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"data": {"status": "opt_out", "phone_number": "+61412345678", "opt_out_at": "2026-01-22T18:15:00Z", "keyword": "STOP", "message_id": "msg_005", "from": "+61387654321"}}'
|
||||
```
|
||||
|
||||
### Using Test Samples
|
||||
|
||||
A complete set of test samples for all event types is available in `wxinteract_test_samples.json`.
|
||||
|
||||
```bash
|
||||
# Test with submitted event
|
||||
cat wxinteract_test_samples.json | jq '.outbound_sms_submitted' | \
|
||||
curl -X POST https://your-domain.com/test%40example.com/wxinteract \
|
||||
-H "Content-Type: application/json" \
|
||||
-d @-
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Configuring in Webex Interact
|
||||
|
||||
### Step 1: Log in to Webex Interact
|
||||
|
||||
Go to your Webex Interact dashboard at https://interact.webex.com/
|
||||
|
||||
### Step 2: Navigate to API Settings
|
||||
|
||||
1. Click on **Settings** or **API** in the navigation menu
|
||||
2. Look for **Webhooks** or **API Callbacks** section
|
||||
|
||||
### Step 3: Configure Callback URL
|
||||
|
||||
1. Enter your webhook URL: `https://your-domain.com/{your-email}/wxinteract`
|
||||
2. Select the events you want to receive:
|
||||
- ☑️ Outbound SMS - Submitted
|
||||
- ☑️ Outbound SMS - Delivered
|
||||
- ☑️ Outbound SMS - Failed
|
||||
- ☑️ Shortlink Clicked
|
||||
- ☑️ Inbound SMS Received
|
||||
- ☑️ SMS Opt Out Received
|
||||
- ☑️ Contacts Callback
|
||||
3. Save your configuration
|
||||
|
||||
### Step 4: Test the Integration
|
||||
|
||||
1. Send a test SMS from Webex Interact
|
||||
2. Check your email inbox for the formatted webhook notification
|
||||
3. Verify the email contains the correct information
|
||||
|
||||
---
|
||||
|
||||
## Email Organization Tips
|
||||
|
||||
### Create Email Filters
|
||||
|
||||
Set up filters based on the subject line patterns:
|
||||
|
||||
- **All Webex Interact webhooks:** Subject contains "Webex Interact"
|
||||
- **Failed messages only:** Subject contains "❌ Webex Interact: Outbound SMS - Failed"
|
||||
- **Opt-outs only:** Subject contains "🚫 Webex Interact: SMS Opt Out"
|
||||
- **Click tracking:** Subject contains "🔗 Webex Interact: Shortlink Clicked"
|
||||
|
||||
### Use Plus Addressing
|
||||
|
||||
Track different campaigns or environments:
|
||||
|
||||
- Production: `sms-prod%40mycompany.com`
|
||||
- Staging: `sms-staging%40mycompany.com`
|
||||
- Campaign A: `sms+campaignA%40mycompany.com`
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Parser Not Working
|
||||
|
||||
If you're receiving raw webhook data instead of formatted emails:
|
||||
|
||||
1. **Check URL:** Ensure `/wxinteract` is at the end of the URL
|
||||
2. **Check payload structure:** Parser expects `{"data": {"status": "...", ...}}`
|
||||
3. **Check the container logs:** `docker logs webhooks.dixon.cx` shows mail failures and parser errors
|
||||
|
||||
### Missing Fields
|
||||
|
||||
If some fields are showing as "N/A":
|
||||
|
||||
- The webhook payload may not include those fields for that event type
|
||||
- Check the Webex Interact documentation for the specific event
|
||||
- Use the raw webhook format (without `/wxinteract`) to see the complete payload
|
||||
|
||||
### Wrong Event Type
|
||||
|
||||
If the event is being parsed as a generic event:
|
||||
|
||||
- Check that `data.status` matches one of the supported values
|
||||
- Supported values: `submitted`, `delivered`, `failed`, `shortlink_clicked`, `received`, `opt_out`, `contact_created`, `contact_updated`
|
||||
|
||||
---
|
||||
|
||||
## API Documentation References
|
||||
|
||||
Official Webex Interact webhook documentation:
|
||||
|
||||
- [Outbound SMS - Submitted](https://docs.webexinteract.com/reference/sms-api-request-accepted)
|
||||
- [Outbound SMS - Delivered](https://docs.webexinteract.com/reference/outbound-sms-delivered)
|
||||
- [Outbound SMS - Failed](https://docs.webexinteract.com/reference/outbound-sms-failed)
|
||||
- [Shortlink Clicked](https://docs.webexinteract.com/reference/shortlink-clicked)
|
||||
- [Inbound SMS Events](https://docs.webexinteract.com/reference/inbound-sms-events)
|
||||
- [SMS Opt Out Received](https://docs.webexinteract.com/reference/sms-opt-out-received)
|
||||
- [Contacts Callback](https://docs.webexinteract.com/reference/contacts-callback)
|
||||
|
||||
---
|
||||
|
||||
## Support
|
||||
|
||||
For issues with:
|
||||
- **This parser:** Open an issue on the GitHub repository
|
||||
- **Webex Interact API:** Contact Webex Interact support
|
||||
|
||||
---
|
||||
|
||||
Built with ❤️ for better webhook debugging
|
||||
@@ -1,16 +0,0 @@
|
||||
[Unit]
|
||||
Description=webhooks.dixon.cx (docker container)
|
||||
After=docker.service network-online.target
|
||||
Requires=docker.service
|
||||
Wants=network-online.target
|
||||
|
||||
[Service]
|
||||
Restart=always
|
||||
RestartSec=5
|
||||
TimeoutStartSec=0
|
||||
ExecStartPre=-/usr/bin/docker rm -f webhooks.dixon.cx
|
||||
ExecStart=/usr/bin/docker run --rm --memory 256m --cpus 1.0 --pids-limit 128 --name webhooks.dixon.cx -p 127.0.0.1:29593:8080 webhooks.dixon.cx:latest
|
||||
ExecStop=/usr/bin/docker stop -t 30 webhooks.dixon.cx
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
@@ -0,0 +1,491 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Webhook Email Forwarder - Documentation</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 40px 0;
|
||||
}
|
||||
.doc-container {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
padding: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 60px 40px;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.code-block {
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid #667eea;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
font-family: 'Courier New', monospace;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.feature-card {
|
||||
border: none;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
transition: transform 0.2s;
|
||||
height: 100%;
|
||||
}
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.badge-custom {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.5em 0.8em;
|
||||
}
|
||||
h2 {
|
||||
color: #667eea;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h3 {
|
||||
color: #764ba2;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.alert-info {
|
||||
border-left: 4px solid #0dcaf0;
|
||||
}
|
||||
.alert-warning {
|
||||
border-left: 4px solid #ffc107;
|
||||
}
|
||||
.alert-success {
|
||||
border-left: 4px solid #198754;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Hero Section -->
|
||||
<div class="hero">
|
||||
<h1 class="display-4"><i class="bi bi-webhook"></i> Webhook Email Forwarder</h1>
|
||||
<p class="lead">A simple, elegant solution for debugging webhooks by forwarding them directly to your email</p>
|
||||
<p class="mb-0">Version 1.0 | Made with ❤️ by Andy Dixon</p>
|
||||
</div>
|
||||
|
||||
<!-- Overview Section -->
|
||||
<div class="doc-container">
|
||||
<h2><i class="bi bi-info-circle"></i> Overview</h2>
|
||||
<p class="lead">This webhook service captures incoming HTTP requests and forwards complete request details (headers, body, metadata) to your specified email address.</p>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card feature-card">
|
||||
<div class="card-body text-center">
|
||||
<i class="bi bi-envelope-check text-primary" style="font-size: 3rem;"></i>
|
||||
<h5 class="card-title mt-3">Email Delivery</h5>
|
||||
<p class="card-text">Receive webhook data directly in your inbox</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card feature-card">
|
||||
<div class="card-body text-center">
|
||||
<i class="bi bi-shield-check text-success" style="font-size: 3rem;"></i>
|
||||
<h5 class="card-title mt-3">Secure</h5>
|
||||
<p class="card-text">Email validation and XSS protection built-in</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card feature-card">
|
||||
<div class="card-body text-center">
|
||||
<i class="bi bi-lightning-charge text-warning" style="font-size: 3rem;"></i>
|
||||
<h5 class="card-title mt-3">Instant</h5>
|
||||
<p class="card-text">Real-time webhook processing and forwarding</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
<div class="doc-container">
|
||||
<h2><i class="bi bi-gear"></i> How It Works</h2>
|
||||
<ol class="lead">
|
||||
<li>You configure a third-party service to send webhooks to this URL with your email encoded in the path</li>
|
||||
<li>When a webhook request arrives, the service captures all request data</li>
|
||||
<li>The complete request details are formatted into a readable HTML email</li>
|
||||
<li>The email is sent to your specified address</li>
|
||||
<li>A confirmation response is returned to the webhook sender</li>
|
||||
</ol>
|
||||
|
||||
<div class="alert alert-info mt-4">
|
||||
<i class="bi bi-lightbulb"></i> <strong>Perfect for:</strong> Debugging webhooks, testing integrations, monitoring API callbacks, and understanding third-party service payloads.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Usage Section -->
|
||||
<div class="doc-container">
|
||||
<h2><i class="bi bi-code-square"></i> Usage</h2>
|
||||
|
||||
<h3>Basic URL Format</h3>
|
||||
<p>The URL format is simple - just append your URL-encoded email address to the domain:</p>
|
||||
<div class="code-block mb-4">
|
||||
https://<?php echo $_SERVER['HTTP_HOST']; ?>/<strong>{email-address}</strong>
|
||||
</div>
|
||||
|
||||
<h3>URL Encoding Your Email</h3>
|
||||
<p>The <code>@</code> symbol must be URL-encoded as <code>%40</code>:</p>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header bg-light">
|
||||
<strong>Original Email</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<code>john@example.com</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header bg-light">
|
||||
<strong>Webhook URL</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<code><?php echo $_SERVER['HTTP_HOST']; ?>/john%40example.com</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-4">Example Requests</h3>
|
||||
|
||||
<h4>cURL - POST Request with JSON</h4>
|
||||
<div class="code-block">
|
||||
curl -X POST https://<?php echo $_SERVER['HTTP_HOST']; ?>/test%40example.com \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"event": "user.created", "user_id": 12345}'
|
||||
</div>
|
||||
|
||||
<h4 class="mt-3">cURL - GET Request with Parameters</h4>
|
||||
<div class="code-block">
|
||||
curl https://<?php echo $_SERVER['HTTP_HOST']; ?>/test%40example.com?event=test&id=123
|
||||
</div>
|
||||
|
||||
<h4 class="mt-3">JavaScript - Fetch API</h4>
|
||||
<div class="code-block">
|
||||
fetch('https://<?php echo $_SERVER['HTTP_HOST']; ?>/test%40example.com', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
event: 'order.completed',
|
||||
order_id: 'ORD-789',
|
||||
total: 99.99
|
||||
})
|
||||
});
|
||||
</div>
|
||||
|
||||
<h4 class="mt-3">Python - Requests Library</h4>
|
||||
<div class="code-block">
|
||||
import requests
|
||||
|
||||
response = requests.post(
|
||||
'https://<?php echo $_SERVER['HTTP_HOST']; ?>/test%40example.com',
|
||||
json={'event': 'payment.received', 'amount': 250.00},
|
||||
headers={'X-Custom-Header': 'MyValue'}
|
||||
)
|
||||
print(response.text)
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning mt-4">
|
||||
<i class="bi bi-exclamation-triangle"></i> <strong>Important:</strong> Make sure to URL-encode your email address. Most programming languages and tools have built-in functions for this (e.g., <code>encodeURIComponent()</code> in JavaScript, <code>urllib.parse.quote()</code> in Python).
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Response Section -->
|
||||
<div class="doc-container">
|
||||
<h2><i class="bi bi-arrow-return-left"></i> What to Expect</h2>
|
||||
|
||||
<h3>Immediate HTTP Response</h3>
|
||||
<p>When your webhook is successfully received, you'll get an immediate response:</p>
|
||||
<div class="card">
|
||||
<div class="card-header bg-success text-white">
|
||||
<strong>HTTP 200 OK</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="code-block">
|
||||
Webhook received and forwarded to: test@example.com
|
||||
|
||||
Request data:
|
||||
Array
|
||||
(
|
||||
[event] => test
|
||||
[id] => 123
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-4">Email Contents</h3>
|
||||
<p>Within moments, you'll receive a styled HTML email containing:</p>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-clock"></i> Request Timestamp</h5>
|
||||
<p class="card-text">Exact date and time when the webhook was received</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-info-square"></i> Request Information</h5>
|
||||
<p class="card-text">IP address, HTTP method (GET/POST/etc), and Content-Type</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-list-ul"></i> Request Headers</h5>
|
||||
<p class="card-text">All HTTP headers sent with the request</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-file-earmark-text"></i> Request Body</h5>
|
||||
<p class="card-text">Complete raw body content (JSON, XML, form data, etc.)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-code-slash"></i> PHP Variables</h5>
|
||||
<p class="card-text">Parsed GET, POST, REQUEST, and FILES superglobals for easy access</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success mt-4">
|
||||
<i class="bi bi-check-circle"></i> <strong>Subject Line:</strong> Emails arrive with the subject <strong>"‼️ Webhook Request Received - [timestamp]"</strong> for easy filtering and identification.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Handling Section -->
|
||||
<div class="doc-container">
|
||||
<h2><i class="bi bi-exclamation-octagon"></i> Error Handling</h2>
|
||||
|
||||
<h3>Invalid Email Address</h3>
|
||||
<p>If the email address in the URL is invalid or missing, you'll receive:</p>
|
||||
<div class="card">
|
||||
<div class="card-header bg-danger text-white">
|
||||
<strong>HTTP 400 Bad Request</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="code-block">
|
||||
Invalid email address provided in URL path.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mt-4">
|
||||
<i class="bi bi-shield-check"></i> <strong>Validation:</strong> The service validates email addresses using PHP's built-in <code>FILTER_VALIDATE_EMAIL</code> filter to ensure proper formatting.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security Section -->
|
||||
<div class="doc-container">
|
||||
<h2><i class="bi bi-shield-lock"></i> Security Features</h2>
|
||||
<ul class="lead">
|
||||
<li><strong>Email Validation:</strong> Only valid email addresses are accepted</li>
|
||||
<li><strong>XSS Protection:</strong> All output is sanitized using <code>htmlspecialchars()</code></li>
|
||||
<li><strong>No Data Storage:</strong> Webhook data is forwarded immediately and not stored on the server</li>
|
||||
<li><strong>Error Logging:</strong> Failed email attempts are logged for monitoring</li>
|
||||
</ul>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
<i class="bi bi-exclamation-triangle"></i> <strong>Privacy Note:</strong> Anyone with your webhook URL can send data to your email address. Only use this service for testing and debugging purposes. Do not use for sensitive production data without additional authentication.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Supported Features Section -->
|
||||
<div class="doc-container">
|
||||
<h2><i class="bi bi-check2-square"></i> Supported Features</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5><i class="bi bi-check-circle text-success"></i> HTTP Methods</h5>
|
||||
<ul>
|
||||
<li>GET</li>
|
||||
<li>POST</li>
|
||||
<li>PUT</li>
|
||||
<li>PATCH</li>
|
||||
<li>DELETE</li>
|
||||
<li>Any custom method</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h5><i class="bi bi-check-circle text-success"></i> Content Types</h5>
|
||||
<ul>
|
||||
<li>application/json</li>
|
||||
<li>application/x-www-form-urlencoded</li>
|
||||
<li>multipart/form-data</li>
|
||||
<li>text/plain</li>
|
||||
<li>text/xml</li>
|
||||
<li>Any custom content type</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Use Cases Section -->
|
||||
<div class="doc-container">
|
||||
<h2><i class="bi bi-star"></i> Common Use Cases</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card feature-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-bug"></i> Debugging</h5>
|
||||
<p class="card-text">See exactly what data third-party services are sending to your webhooks</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card feature-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-plugin"></i> Integration Testing</h5>
|
||||
<p class="card-text">Test webhook integrations before implementing full handlers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card feature-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-eye"></i> Monitoring</h5>
|
||||
<p class="card-text">Monitor webhook activity and payload changes over time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card feature-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-book"></i> Documentation</h5>
|
||||
<p class="card-text">Capture real examples for API documentation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card feature-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-diagram-3"></i> Development</h5>
|
||||
<p class="card-text">Quickly test webhook flows during development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card feature-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><i class="bi bi-search"></i> Troubleshooting</h5>
|
||||
<p class="card-text">Diagnose issues with webhook payloads and headers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tips Section -->
|
||||
<div class="doc-container">
|
||||
<h2><i class="bi bi-lightbulb"></i> Tips & Best Practices</h2>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<h5><i class="bi bi-envelope-at"></i> Email Filtering</h5>
|
||||
<p class="mb-0">Create an email filter for the subject line "‼️ Webhook Request Received" to organize incoming webhooks in your inbox.</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<h5><i class="bi bi-plus-slash-minus"></i> Use Plus Addressing</h5>
|
||||
<p class="mb-0">Use email plus addressing (e.g., <code>yourname+github%40gmail.com</code>) to track which services are sending webhooks.</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<h5><i class="bi bi-clock-history"></i> Timestamp in Emails</h5>
|
||||
<p class="mb-0">Check the "Date Received" field in emails to verify webhook timing and debug delivery delays.</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<h5><i class="bi bi-code"></i> Parse the Body</h5>
|
||||
<p class="mb-0">The raw body section contains the exact payload - perfect for copying into your code for testing.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Start Section -->
|
||||
<div class="doc-container">
|
||||
<h2><i class="bi bi-rocket-takeoff"></i> Quick Start</h2>
|
||||
<p class="lead">Get started in 3 simple steps:</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card text-center feature-card border-primary">
|
||||
<div class="card-body">
|
||||
<div class="display-4 text-primary">1</div>
|
||||
<h5 class="card-title mt-3">Encode Your Email</h5>
|
||||
<p class="card-text">Replace <code>@</code> with <code>%40</code> in your email address</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card text-center feature-card border-success">
|
||||
<div class="card-body">
|
||||
<div class="display-4 text-success">2</div>
|
||||
<h5 class="card-title mt-3">Configure Webhook</h5>
|
||||
<p class="card-text">Use <code><?php echo $_SERVER['HTTP_HOST']; ?>/{your-email}</code> as the webhook URL</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card text-center feature-card border-warning">
|
||||
<div class="card-body">
|
||||
<div class="display-4 text-warning">3</div>
|
||||
<h5 class="card-title mt-3">Check Your Inbox</h5>
|
||||
<p class="card-text">Receive detailed webhook data instantly in your email</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<h5>Try it now!</h5>
|
||||
<div class="code-block text-start d-inline-block">
|
||||
curl -X POST https://<?php echo $_SERVER['HTTP_HOST']; ?>/YOUR-EMAIL-HERE \
|
||||
-d '{"test": "Hello World!"}'
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="text-center text-white mt-5">
|
||||
<p class="mb-1"><i class="bi bi-code-slash"></i> Built with PHP and ADHD medication</p>
|
||||
<p><small>© 2025-2026 Andy Dixon | <a href="https://<?php echo $_SERVER['HTTP_HOST']; ?>/" class="text-white"><?php echo $_SERVER['HTTP_HOST']; ?></a></small></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,300 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-GB">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Webhook → Email: forward any webhook to your inbox | {{.Canonical}}</title>
|
||||
<meta name="description" content="Point any webhook at a URL with your email in it. Get the whole request in your inbox. That's it. That's the product.">
|
||||
<link rel="canonical" href="https://{{.Canonical}}/">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="author" content="Andy Dixon">
|
||||
<meta name="theme-color" content="#0047ab">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="webhook→email">
|
||||
<meta property="og:title" content="Webhooks. Straight to your inbox.">
|
||||
<meta property="og:description" content="Point any webhook at a URL with your email in it. Get the whole request in your inbox. No signup, no dashboard.">
|
||||
<meta property="og:url" content="https://{{.Canonical}}/">
|
||||
<meta property="og:image" content="https://{{.Canonical}}/og.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:image:alt" content="Webhooks. Straight to your inbox. https://{{.Canonical}}/you%40example.com">
|
||||
<meta property="og:locale" content="en_GB">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Webhooks. Straight to your inbox.">
|
||||
<meta name="twitter:description" content="Point any webhook at a URL with your email in it. Get the whole request in your inbox. No signup, no dashboard.">
|
||||
<meta name="twitter:image" content="https://{{.Canonical}}/og.png">
|
||||
<script type="application/ld+json">
|
||||
{"@context":"https://schema.org","@type":"WebApplication","name":"webhook→email","url":"https://{{.Canonical}}/","description":"Forward any webhook to your inbox as a formatted email. Parsers for GitHub, Grafana, JSON and Webex Interact.","applicationCategory":"DeveloperApplication","operatingSystem":"Any","isAccessibleForFree":true,"offers":{"@type":"Offer","price":"0","priceCurrency":"GBP"},"author":{"@type":"Person","name":"Andy Dixon","url":"https://dixon.cx/"}}
|
||||
</script>
|
||||
<style>
|
||||
:root{
|
||||
--bg:#ffffff;--panel:#f6f8fc;--line:#e3e7ef;
|
||||
--text:#0a0a0a;--muted:#4a4f5c;--dim:#7a8090;
|
||||
--blue:#0047ab;--blue-dark:#003380;--blue-soft:#eef3fb;
|
||||
--mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
|
||||
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
html{scroll-behavior:smooth}
|
||||
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
|
||||
a{color:var(--blue)}
|
||||
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
|
||||
::selection{background:var(--blue);color:#fff}
|
||||
|
||||
/* nav */
|
||||
nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;font-size:14px;border-bottom:1px solid var(--line)}
|
||||
nav .brand{font-family:var(--mono);font-weight:700;letter-spacing:-.02em}
|
||||
nav .brand span{color:var(--blue)}
|
||||
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
|
||||
nav a{text-decoration:none;color:var(--muted)}nav a:hover{color:var(--blue)}
|
||||
@media(max-width:600px){nav ul{display:none}}
|
||||
|
||||
/* hero */
|
||||
.hero{padding:64px 0 48px}
|
||||
.eyebrow{font-family:var(--mono);font-size:13px;color:var(--blue);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
|
||||
h1{font-size:clamp(2.4rem,6.5vw,4.6rem);line-height:1;letter-spacing:-.04em;margin:0 0 22px;font-weight:800}
|
||||
h1 em{font-style:normal;color:var(--blue)}
|
||||
.hero p{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--muted);max-width:640px;margin:0 0 30px}
|
||||
.hero p b{color:var(--text);font-weight:600}
|
||||
|
||||
/* url builder */
|
||||
.builder{border:1px solid var(--line);border-radius:12px;padding:20px}
|
||||
.builder label{display:block;font-size:12px;color:var(--dim);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
|
||||
.builder input{width:100%;font:inherit;font-size:1.1rem;padding:12px 14px;border-radius:8px;background:#fff;border:1px solid #c9cfdb;color:var(--text);outline:none}
|
||||
.builder input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,71,171,.15)}
|
||||
.url{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
||||
.url code{flex:1;min-width:0;font-family:var(--mono);font-size:.95rem;word-break:break-all;padding:12px 14px;border-radius:8px;background:var(--panel);border:1px solid var(--line)}
|
||||
.url code b{color:var(--blue);font-weight:600}
|
||||
button.copy{font:inherit;font-size:.9rem;font-weight:600;padding:12px 18px;border-radius:8px;border:0;cursor:pointer;background:var(--blue);color:#fff;white-space:nowrap}
|
||||
button.copy:hover{background:var(--blue-dark)}
|
||||
button.copy:active{transform:scale(.97)}
|
||||
.hint{font-size:.85rem;color:var(--dim);margin:12px 0 0}
|
||||
|
||||
/* sections */
|
||||
section{padding:56px 0;border-top:1px solid var(--line)}
|
||||
h2{font-size:clamp(1.6rem,4vw,2.2rem);letter-spacing:-.03em;margin:0 0 8px;line-height:1.15}
|
||||
.sub{color:var(--muted);margin:0 0 28px;max-width:640px}
|
||||
h3{font-size:1.1rem;margin:28px 0 10px;letter-spacing:-.01em}
|
||||
.tangent{color:var(--dim);font-size:.92rem;font-style:italic}
|
||||
p code,li code{font-family:var(--mono);font-size:.88em;background:var(--panel);border:1px solid var(--line);padding:2px 6px;border-radius:5px;color:var(--blue-dark)}
|
||||
|
||||
pre{margin:0;background:#0a0a0a;border-radius:10px;padding:16px 18px;font-family:var(--mono);font-size:.9rem;line-height:1.55;overflow-x:auto;color:#e8e8e8;position:relative}
|
||||
pre::before{content:attr(data-lang);position:absolute;top:8px;right:12px;font-size:11px;color:#8a8a8a;letter-spacing:.1em;text-transform:uppercase}
|
||||
pre .h{color:#8a8a8a}pre .s{color:#8fb8ff}pre .k{color:#ffffff;font-weight:600}
|
||||
.stack{display:grid;gap:14px}
|
||||
|
||||
/* steps */
|
||||
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;counter-reset:s}
|
||||
.step{border:1px solid var(--line);border-radius:12px;padding:22px;counter-increment:s}
|
||||
.step::before{content:"0" counter(s);font-family:var(--mono);font-size:2rem;font-weight:800;line-height:1;color:var(--blue);display:block;margin-bottom:12px}
|
||||
.step b{display:block;font-size:1.05rem;margin-bottom:4px}
|
||||
.step span{color:var(--muted);font-size:.95rem}
|
||||
|
||||
/* parsers */
|
||||
.parsers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
|
||||
.parser{border:1px solid var(--line);border-radius:12px;padding:20px;transition:border-color .15s}
|
||||
.parser:hover{border-color:var(--blue)}
|
||||
.parser .ico{font-size:1.6rem;margin-bottom:8px}
|
||||
.parser code{display:inline-block;font-family:var(--mono);font-size:.85rem;font-weight:700;color:var(--blue);margin-bottom:8px}
|
||||
.parser p{margin:0;color:var(--muted);font-size:.95rem}
|
||||
|
||||
/* inbox list */
|
||||
.inbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;list-style:none;padding:0;margin:0}
|
||||
.inbox li{padding:14px 16px;background:var(--panel);border-radius:10px;font-size:.95rem}
|
||||
.inbox li b{display:block;color:var(--text)}
|
||||
.inbox li span{color:var(--muted)}
|
||||
|
||||
/* callouts */
|
||||
.note{border-left:3px solid var(--blue);padding:14px 18px;background:var(--blue-soft);border-radius:0 10px 10px 0;margin:22px 0}
|
||||
.note.warn{border-color:var(--text);background:var(--panel)}
|
||||
.note b{color:var(--text)}
|
||||
.note p{margin:0;color:var(--muted)}
|
||||
|
||||
/* chips */
|
||||
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
|
||||
.chip{font-family:var(--mono);font-size:.8rem;padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
|
||||
|
||||
footer{padding:40px 0 60px;border-top:1px solid var(--line);color:var(--dim);font-size:.9rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
|
||||
footer a{color:var(--muted)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
|
||||
<nav>
|
||||
<div class="brand"><span>webhook</span>→email</div>
|
||||
<ul>
|
||||
<li><a href="#start">Start</a></li>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#parsers">Parsers</a></li>
|
||||
<li><a href="#inbox">Inbox</a></li>
|
||||
<li><a href="#faq">Caveats</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="hero">
|
||||
<div class="eyebrow">// no signup. no dashboard. no, seriously.</div>
|
||||
<h1>Webhooks.<br>Straight to <em>your inbox.</em></h1>
|
||||
<p>Put your email in the URL. Point a webhook at it. Every header, every byte of body, every superglobal shows up as an email. <b>Done. Go do the next thing.</b></p>
|
||||
|
||||
<div class="builder">
|
||||
<label for="em">Type your email → get your URL</label>
|
||||
<input id="em" type="email" placeholder="you@example.com" autocomplete="email" spellcheck="false">
|
||||
<div class="url">
|
||||
<code>https://{{.Host}}/<b id="out">you%40example.com</b></code>
|
||||
<button class="copy" id="cp">Copy</button>
|
||||
</div>
|
||||
<p class="hint">Yes the <code>@</code> becomes <code>%40</code>. Yes that's the whole trick. Add <code>/github</code>, <code>/json</code>, etc. on the end for the fancy parsers — more on that below, if you scroll that far.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="start">
|
||||
<h2>Three steps. Two, really.</h2>
|
||||
<p class="sub">The third one is just "wait for an email", which you were going to do anyway.</p>
|
||||
<div class="steps">
|
||||
<div class="step"><b>Encode your email</b><span><code>@</code> → <code>%40</code>. The box above already did it for you. Ok moving on.</span></div>
|
||||
<div class="step"><b>Paste the URL into whatever</b><span>Stripe, GitHub, Grafana, that cron job, a curl you're about to forget you wrote.</span></div>
|
||||
<div class="step"><b>Check your inbox</b><span>Full request, nicely formatted. Subject starts with ‼️ so it's filterable. You're welcome.</span></div>
|
||||
</div>
|
||||
|
||||
<h3>The fastest possible test</h3>
|
||||
<pre data-lang="bash">curl -X POST https://{{.Host}}/<span class="s" id="ex1">you%40example.com</span> \
|
||||
-d '{"test": "hello, is this thing on"}'</pre>
|
||||
<p class="tangent">(the email will arrive before you've alt-tabbed back. probably. depends on your mail server. anyway.)</p>
|
||||
</section>
|
||||
|
||||
<section id="examples">
|
||||
<h2>Examples, because reading is hard</h2>
|
||||
<p class="sub">Any method, any content type. GET, POST, PUT, PATCH, DELETE, something you made up. JSON, form data, multipart, XML, plain text, a string of emoji. It all gets forwarded.</p>
|
||||
<div class="stack">
|
||||
<pre data-lang="bash"><span class="h"># JSON</span>
|
||||
curl -X POST https://{{.Host}}/<span class="s ex">you%40example.com</span> \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"event": "user.created", "user_id": 12345}'
|
||||
|
||||
<span class="h"># GET with query string (yes, this works too)</span>
|
||||
curl "https://{{.Host}}/<span class="s ex">you%40example.com</span>?event=test&id=123"</pre>
|
||||
|
||||
<pre data-lang="javascript"><span class="k">fetch</span>(<span class="s">'https://{{.Host}}/'</span> + <span class="k">encodeURIComponent</span>(<span class="s">'you@example.com'</span>), {
|
||||
method: <span class="s">'POST'</span>,
|
||||
headers: { <span class="s">'Content-Type'</span>: <span class="s">'application/json'</span> },
|
||||
body: JSON.stringify({ event: <span class="s">'order.completed'</span>, order_id: <span class="s">'ORD-789'</span>, total: 99.99 })
|
||||
});</pre>
|
||||
|
||||
<pre data-lang="python"><span class="k">import</span> requests
|
||||
<span class="k">from</span> urllib.parse <span class="k">import</span> quote
|
||||
|
||||
requests.post(
|
||||
<span class="s">f'https://{{.Host}}/{quote("you@example.com")}'</span>,
|
||||
json={<span class="s">'event'</span>: <span class="s">'payment.received'</span>, <span class="s">'amount'</span>: 250.00},
|
||||
headers={<span class="s">'X-Custom-Header'</span>: <span class="s">'MyValue'</span>},
|
||||
)</pre>
|
||||
</div>
|
||||
<div class="note">
|
||||
<p><b>Pro tip you'll ignore and then come back for:</b> use plus addressing. <code>you+stripe%40example.com</code>, <code>you+github%40example.com</code>. Now your inbox filters do the sorting so you don't have to.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="parsers">
|
||||
<h2>Parsers. Ooh, shiny.</h2>
|
||||
<p class="sub">Add one word to the end of the URL and the email stops being a wall of raw JSON and starts being something you can actually read at 3am. Parser doesn't understand the payload? It falls back to the raw format. Nothing gets lost.</p>
|
||||
<div class="parsers">
|
||||
<div class="parser"><div class="ico">🐙</div><code>/github</code><p>Push, pull request, issue and release events get their own layout with commits, authors, branches and links. Everything else still renders, just less fancy. Subjects like <em>📤 GitHub push - you/repo</em>.</p></div>
|
||||
<div class="parser"><div class="ico">📈</div><code>/grafana</code><p>Grafana and Prometheus Alertmanager alerts. Firing, resolved, labels, annotations. Finally know <em>which</em> thing is on fire.</p></div>
|
||||
<div class="parser"><div class="ico">🧩</div><code>/json</code><p>Any JSON at all, rendered as tables. Nested objects get split out into their own tables with path-based titles so you can find <code>data.items[3].sku</code> without squinting.</p></div>
|
||||
<div class="parser"><div class="ico">💬</div><code>/wxinteract</code><p>Webex Interact SMS events. Inbound messages, delivery receipts, the lot, with the event type in the subject line.</p></div>
|
||||
</div>
|
||||
|
||||
<h3>Setting up GitHub, since that's the one everyone asks about</h3>
|
||||
<ol>
|
||||
<li>Repo → Settings → Webhooks → Add webhook</li>
|
||||
<li>Payload URL: <code>https://{{.Host}}/<span class="ex">you%40example.com</span>/github</code></li>
|
||||
<li>Content type: <code>application/json</code></li>
|
||||
<li>Pick events (or "Send me everything", live a little)</li>
|
||||
<li>Save. Push something. Refresh inbox. Refresh again. There it is.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section id="inbox">
|
||||
<h2>What actually lands in your inbox</h2>
|
||||
<p class="sub">One HTML email per request. Gmail-safe styling. All of the following, every time, whether you asked for it or not:</p>
|
||||
<ul class="inbox">
|
||||
<li><b>Timestamp</b><span>when it arrived, to the second</span></li>
|
||||
<li><b>Source IP + method</b><span>who sent it and how</span></li>
|
||||
<li><b>Content-Type</b><span>what they claimed it was</span></li>
|
||||
<li><b>Every header</b><span>auth, signatures, user agents, the weird custom ones</span></li>
|
||||
<li><b>Raw body</b><span>byte-for-byte, ready to paste into a test</span></li>
|
||||
<li><b>Parsed superglobals</b><span>$_GET, $_POST, $_REQUEST, $_FILES</span></li>
|
||||
</ul>
|
||||
<h3>And the sender gets</h3>
|
||||
<pre data-lang="http 200 · application/json">{
|
||||
<span class="k">"ok"</span>: true,
|
||||
<span class="k">"message"</span>: <span class="s">"Webhook received and forwarded to you@example.com"</span>,
|
||||
<span class="k">"forwarded_to"</span>: <span class="s">"you@example.com"</span>,
|
||||
<span class="k">"parser"</span>: <span class="s">"default"</span>,
|
||||
<span class="k">"subject"</span>: <span class="s">"‼️ Webhook Request Received - 2026-09-11 17:15:42"</span>,
|
||||
<span class="k">"received_at"</span>: <span class="s">"2026-09-11T17:15:42+00:00"</span>,
|
||||
<span class="k">"request"</span>: { <span class="k">"method"</span>: <span class="s">"POST"</span>, <span class="k">"content_type"</span>: <span class="s">"application/json"</span>, <span class="k">"ip"</span>: <span class="s">"203.0.113.7"</span>, <span class="k">"headers"</span>: 9, <span class="k">"body_bytes"</span>: 40 },
|
||||
<span class="k">"data"</span>: {
|
||||
<span class="k">"query"</span>: { <span class="k">"src"</span>: <span class="s">"curl"</span> },
|
||||
<span class="k">"form"</span>: {},
|
||||
<span class="k">"json"</span>: { <span class="k">"event"</span>: <span class="s">"user.created"</span>, <span class="k">"user_id"</span>: 12345 },
|
||||
<span class="k">"files"</span>: []
|
||||
}
|
||||
}</pre>
|
||||
<p class="tangent">JSON bodies get decoded and echoed back under <code>data.json</code>, so you can eyeball what the server actually understood. Form fields land in <code>form</code>, query string in <code>query</code>. No print_r in sight.</p>
|
||||
<p class="tangent">Any 200 is enough for most services to mark the delivery as "succeeded" and stop retrying. Which is the point.</p>
|
||||
</section>
|
||||
|
||||
<section id="faq">
|
||||
<h2>Caveats, small print, that sort of thing</h2>
|
||||
<div class="note warn">
|
||||
<p><b>Anyone with the URL can email you.</b> There's no auth. There's no secret. It's your email address in a URL. Use it for debugging and testing. Do not point production payment data at it. Don't make me put a bigger warning here.</p>
|
||||
</div>
|
||||
<h3>Stuff that's true</h3>
|
||||
<ul>
|
||||
<li><b>Nothing is stored.</b> Request comes in, email goes out, request is forgotten. No logs of your payloads, no database, no "insights".</li>
|
||||
<li><b>Output is escaped.</b> Everything is run through <code>htmlspecialchars()</code> before it hits the email, so a malicious payload renders as text, not as a thing.</li>
|
||||
<li><b>Bad email → HTTP 400, as JSON.</b> <code>{"ok": false, "error": "invalid_email", ...}</code> with a hint about <code>%40</code>. Validated with PHP's <code>FILTER_VALIDATE_EMAIL</code>. Boring, correct.</li>
|
||||
<li><b>Failed sends get logged.</b> On the server side, for the person running it. Not for you. Sorry.</li>
|
||||
</ul>
|
||||
<h3>Good for</h3>
|
||||
<div class="chips">
|
||||
<span class="chip">debugging a webhook you didn't write</span>
|
||||
<span class="chip">seeing what Stripe actually sends</span>
|
||||
<span class="chip">capturing real payloads for docs</span>
|
||||
<span class="chip">testing before the handler exists</span>
|
||||
<span class="chip">"is it even firing?"</span>
|
||||
<span class="chip">alerts in your inbox without a whole thing</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div>Built with Go and ADHD medication. Not necessarily in that order.</div>
|
||||
<div>© 2025–2026 Andy Dixon · <a href="https://dixon.cx/">dixon.cx</a></div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
var em=document.getElementById('em'),out=document.getElementById('out'),cp=document.getElementById('cp');
|
||||
var ex=document.querySelectorAll('.ex, #ex1');
|
||||
function enc(v){return encodeURIComponent(v.trim()||'you@example.com');}
|
||||
em.addEventListener('input',function(){
|
||||
var e=enc(em.value);out.textContent=e;
|
||||
ex.forEach(function(n){n.textContent=e;});
|
||||
});
|
||||
cp.addEventListener('click',function(){
|
||||
var url=out.parentNode.textContent.replace(/\s+/g,'');
|
||||
var done=function(){cp.textContent='Copied ✓';setTimeout(function(){cp.textContent='Copy';},1400);};
|
||||
if(navigator.clipboard){navigator.clipboard.writeText(url).then(done);}
|
||||
else{var r=document.createRange();r.selectNodeContents(out.parentNode);getSelection().removeAllRanges();getSelection().addRange(r);document.execCommand('copy');done();}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 529 B |
Binary file not shown.
|
Before Width: | Height: | Size: 215 B |
Binary file not shown.
|
Before Width: | Height: | Size: 518 B |
Binary file not shown.
|
Before Width: | Height: | Size: 304 B |
Binary file not shown.
|
Before Width: | Height: | Size: 235 B |
Binary file not shown.
|
Before Width: | Height: | Size: 211 B |
Binary file not shown.
|
Before Width: | Height: | Size: 617 B |
Binary file not shown.
|
Before Width: | Height: | Size: 163 B |
Binary file not shown.
|
Before Width: | Height: | Size: 275 B |
Binary file not shown.
|
Before Width: | Height: | Size: 586 B |
Binary file not shown.
|
Before Width: | Height: | Size: 465 B |
Binary file not shown.
|
Before Width: | Height: | Size: 595 B |
Binary file not shown.
|
Before Width: | Height: | Size: 427 B |
Binary file not shown.
|
Before Width: | Height: | Size: 233 B |
Binary file not shown.
|
Before Width: | Height: | Size: 429 B |
Binary file not shown.
|
Before Width: | Height: | Size: 551 B |
Binary file not shown.
|
Before Width: | Height: | Size: 171 B |
Binary file not shown.
|
Before Width: | Height: | Size: 608 B |
Binary file not shown.
|
Before Width: | Height: | Size: 625 B |
Binary file not shown.
|
Before Width: | Height: | Size: 246 B |
Binary file not shown.
|
Before Width: | Height: | Size: 519 B |
Binary file not shown.
|
Before Width: | Height: | Size: 537 B |
Binary file not shown.
|
Before Width: | Height: | Size: 588 B |
Binary file not shown.
|
Before Width: | Height: | Size: 534 B |
Binary file not shown.
|
Before Width: | Height: | Size: 461 B |
Binary file not shown.
|
Before Width: | Height: | Size: 632 B |
Binary file not shown.
|
Before Width: | Height: | Size: 488 B |
Binary file not shown.
|
Before Width: | Height: | Size: 250 B |
Binary file not shown.
|
Before Width: | Height: | Size: 450 B |
Binary file not shown.
|
Before Width: | Height: | Size: 404 B |
Binary file not shown.
|
Before Width: | Height: | Size: 167 B |
Binary file not shown.
|
Before Width: | Height: | Size: 568 B |
Binary file not shown.
|
Before Width: | Height: | Size: 592 B |
Binary file not shown.
|
Before Width: | Height: | Size: 620 B |
Binary file not shown.
|
Before Width: | Height: | Size: 211 B |
Binary file not shown.
|
Before Width: | Height: | Size: 169 B |
Binary file not shown.
|
Before Width: | Height: | Size: 590 B |
Binary file not shown.
|
Before Width: | Height: | Size: 187 B |
Binary file not shown.
|
Before Width: | Height: | Size: 164 B |
Binary file not shown.
|
Before Width: | Height: | Size: 677 B |
Binary file not shown.
|
Before Width: | Height: | Size: 108 B |
Binary file not shown.
|
Before Width: | Height: | Size: 209 B |
Binary file not shown.
|
Before Width: | Height: | Size: 187 B |
Binary file not shown.
|
Before Width: | Height: | Size: 405 B |
Binary file not shown.
|
Before Width: | Height: | Size: 403 B |
Binary file not shown.
|
Before Width: | Height: | Size: 232 B |
Binary file not shown.
|
Before Width: | Height: | Size: 637 B |
Binary file not shown.
|
Before Width: | Height: | Size: 222 B |
Binary file not shown.
|
Before Width: | Height: | Size: 178 B |
Binary file not shown.
|
Before Width: | Height: | Size: 642 B |
Binary file not shown.
|
Before Width: | Height: | Size: 476 B |
Binary file not shown.
|
Before Width: | Height: | Size: 234 B |
Binary file not shown.
|
Before Width: | Height: | Size: 148 B |
Binary file not shown.
|
Before Width: | Height: | Size: 480 B |
Binary file not shown.
|
Before Width: | Height: | Size: 234 B |
Binary file not shown.
|
Before Width: | Height: | Size: 607 B |
Binary file not shown.
|
Before Width: | Height: | Size: 231 B |
Binary file not shown.
|
Before Width: | Height: | Size: 653 B |
Binary file not shown.
|
Before Width: | Height: | Size: 233 B |
Binary file not shown.
|
Before Width: | Height: | Size: 375 B |
Binary file not shown.
|
Before Width: | Height: | Size: 231 B |
Binary file not shown.
|
Before Width: | Height: | Size: 599 B |
Binary file not shown.
|
Before Width: | Height: | Size: 245 B |
Binary file not shown.
|
Before Width: | Height: | Size: 623 B |
Binary file not shown.
|
Before Width: | Height: | Size: 285 B |
Binary file not shown.
|
Before Width: | Height: | Size: 146 B |
Binary file not shown.
|
Before Width: | Height: | Size: 343 B |
Binary file not shown.
|
Before Width: | Height: | Size: 558 B |
Binary file not shown.
|
Before Width: | Height: | Size: 600 B |
Binary file not shown.
|
Before Width: | Height: | Size: 494 B |
Binary file not shown.
|
Before Width: | Height: | Size: 233 B |
Binary file not shown.
|
Before Width: | Height: | Size: 333 B |
Binary file not shown.
|
Before Width: | Height: | Size: 88 B |
Binary file not shown.
|
Before Width: | Height: | Size: 238 B |
Binary file not shown.
|
Before Width: | Height: | Size: 221 B |
Binary file not shown.
|
Before Width: | Height: | Size: 260 B |
Binary file not shown.
|
Before Width: | Height: | Size: 237 B |
Binary file not shown.
|
Before Width: | Height: | Size: 531 B |
Binary file not shown.
|
Before Width: | Height: | Size: 223 B |
Binary file not shown.
|
Before Width: | Height: | Size: 616 B |
Binary file not shown.
|
Before Width: | Height: | Size: 643 B |
Binary file not shown.
|
Before Width: | Height: | Size: 283 B |
Binary file not shown.
|
Before Width: | Height: | Size: 370 B |
Binary file not shown.
|
Before Width: | Height: | Size: 605 B |
Binary file not shown.
|
Before Width: | Height: | Size: 623 B |
Binary file not shown.
|
Before Width: | Height: | Size: 403 B |
Binary file not shown.
|
Before Width: | Height: | Size: 624 B |
Binary file not shown.
|
Before Width: | Height: | Size: 248 B |
Binary file not shown.
|
Before Width: | Height: | Size: 554 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user