{"id":5552,"date":"2026-07-27T01:19:56","date_gmt":"2026-07-26T19:19:56","guid":{"rendered":"http:\/\/localhost:8080\/webhooks\/"},"modified":"2026-07-27T01:19:56","modified_gmt":"2026-07-26T19:19:56","slug":"webhooks","status":"publish","type":"page","link":"https:\/\/whatsping.com\/bn\/webhooks\/","title":{"rendered":"\u0993\u09af\u09bc\u09c7\u09ac\u09b9\u09c1\u0995"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5552\" class=\"elementor elementor-5552\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f1aca9b e-con-full e-flex e-con e-parent\" data-id=\"f1aca9b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c138a3 elementor-widget elementor-widget-html\" data-id=\"7c138a3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n  :root {\n    --violet: #7c3aed; --violet-deep: #5b21b6; --violet-pale: #f3ecfe; --violet-brd: #ddd0fa;\n    --grad-nav: linear-gradient(100deg, #43277f 0%, #5d35a8 100%);\n    --grad-band: linear-gradient(120deg, #6a45cf 0%, #8560d8 100%);\n    --orange: #f97316; --orange-deep: #ea580c; --grad-orange: linear-gradient(135deg, #ff8a3d 0%, #f36c16 100%);\n    --green: #16a34a; --blue: #2563eb; --amber: #d97706; --rose: #e11d48;\n    --paper: #ffffff; --paper-2: #f6f4fc; --surface-2: #f2edfc; --card: #ffffff;\n    --line: #e9e3f6; --line-2: #d9d0ef;\n    --code-bg: #1c1633; --code-bg2: #16112b; --code-line: #2f2850;\n    --heading: #1e1b2e; --text: #4a4463; --muted: #6b7280; --muted-2: #9aa1b2;\n    --radius: 14px; --maxw: 1180px;\n    --sans: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n    --display: \"Space Grotesk\", \"Poppins\", \"Inter\", system-ui, sans-serif;\n    --mono: ui-monospace, \"SF Mono\", \"JetBrains Mono\", \"Menlo\", monospace;\n  }\n  @media (prefers-color-scheme: dark) {\n    :root {\n      --violet: #a78bfa; --violet-deep: #8b5cf6; --violet-pale: #241a3e; --violet-brd: #3d3163;\n      --orange: #fb8a3c; --orange-deep: #f97316; --green: #34d399; --blue: #60a5fa; --amber: #fbbf24; --rose: #fb7185;\n      --paper: #14112a; --paper-2: #1b1738; --surface-2: #201a3c; --card: #221c40; --line: #322a54; --line-2: #3e3563;\n      --code-bg: #161129; --code-bg2: #100c20; --code-line: #2a2348;\n      --heading: #f3f0fb; --text: #d8d2ec; --muted: #a79fc4; --muted-2: #7d7699;\n    }\n  }\n  :root[data-theme=\"dark\"] {\n    --violet: #a78bfa; --violet-deep: #8b5cf6; --violet-pale: #241a3e; --violet-brd: #3d3163;\n    --orange: #fb8a3c; --orange-deep: #f97316; --green: #34d399; --blue: #60a5fa; --amber: #fbbf24; --rose: #fb7185;\n    --paper: #14112a; --paper-2: #1b1738; --surface-2: #201a3c; --card: #221c40; --line: #322a54; --line-2: #3e3563;\n    --code-bg: #161129; --code-bg2: #100c20; --code-line: #2a2348;\n    --heading: #f3f0fb; --text: #d8d2ec; --muted: #a79fc4; --muted-2: #7d7699;\n  }\n  :root[data-theme=\"light\"] {\n    --violet: #7c3aed; --violet-deep: #5b21b6; --violet-pale: #f3ecfe; --violet-brd: #ddd0fa;\n    --orange: #f97316; --orange-deep: #ea580c; --green: #16a34a; --blue: #2563eb; --amber: #d97706; --rose: #e11d48;\n    --paper: #ffffff; --paper-2: #f6f4fc; --surface-2: #f2edfc; --card: #ffffff; --line: #e9e3f6; --line-2: #d9d0ef;\n    --code-bg: #1c1633; --code-bg2: #16112b; --code-line: #2f2850;\n    --heading: #1e1b2e; --text: #4a4463; --muted: #6b7280; --muted-2: #9aa1b2;\n  }\n\n  * { box-sizing: border-box; }\n  body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }\n  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }\n  h1,h2,h3,h4 { font-family: var(--display); text-wrap: balance; margin: 0; letter-spacing: -0.02em; line-height: 1.12; color: var(--heading); }\n  a { color: inherit; text-decoration: none; }\n  code, pre { font-family: var(--mono); }\n  .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet); }\n  .ic { font-family: var(--mono); font-size: 12px; color: var(--violet); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }\n\n  .note { background: var(--grad-nav); color: #fff; text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; padding: 8px 16px; text-transform: uppercase; }\n\n  .nav { position: sticky; top: 0; z-index: 40; background: var(--grad-nav); }\n  .nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }\n  .logo-img { height: 28px; width: auto; display: block; }\n  .nav-links { display: flex; gap: 22px; margin-left: 6px; }\n  .nav-links a { font-size: 14px; color: #d7cff0; font-weight: 500; }\n  .nav-links a:hover, .nav-links a.active { color: #fff; }\n  .nav-cta { margin-left: auto; display: flex; gap: 12px; align-items: center; }\n  .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: transform .12s, background .12s; }\n  .btn-orange { background: var(--grad-orange); color: #fff; box-shadow: 0 8px 20px -8px rgba(249,115,22,.7); }\n  .btn-orange:hover { transform: translateY(-1px); }\n  .btn-violet { background: var(--violet); color: #fff; }\n  .btn-violet:hover { background: var(--violet-deep); transform: translateY(-1px); }\n  .btn-outline { border-color: var(--line-2); color: var(--heading); background: var(--card); }\n  .btn-outline:hover { border-color: var(--violet); color: var(--violet); }\n  .btn-ghost-light { color: #fff; border-color: rgba(255,255,255,.35); }\n  .btn-ghost-light:hover { background: rgba(255,255,255,.1); }\n  .theme-btn { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 9px; width: 38px; height: 38px; color: #fff; font-size: 14px; cursor: pointer; }\n\n  .subnav { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); position: sticky; top: 64px; z-index: 30; }\n  .subnav-in { display: flex; align-items: center; gap: 8px; height: 52px; overflow-x: auto; }\n  .subnav .tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--violet); background: var(--violet-pale); border: 1px solid var(--violet-brd); padding: 5px 11px; border-radius: 8px; margin-right: 10px; white-space: nowrap; }\n  .subnav a { font-size: 14px; color: var(--muted); font-weight: 500; padding: 6px 12px; border-radius: 8px; white-space: nowrap; }\n  .subnav a:hover { color: var(--heading); background: var(--surface-2); }\n\n  section { padding: 60px 0; }\n  .sec-head { max-width: 680px; margin-bottom: 30px; }\n  .sec-head h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin: 12px 0 12px; }\n  .sec-head p { font-size: 16.5px; color: var(--muted); margin: 0; }\n\n  .hero { background: radial-gradient(120% 90% at 90% 0%, var(--violet-pale) 0%, var(--paper) 55%); }\n  .hero-in { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 44px; align-items: center; padding: 60px 24px 56px; }\n  .pill-tag { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); background: var(--violet-pale); border: 1px solid var(--violet-brd); padding: 5px 12px; border-radius: 999px; }\n  .hero h1 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 700; margin: 18px 0 16px; letter-spacing: -0.03em; }\n  .hero h1 em { font-style: normal; color: var(--violet); }\n  .hero p.lede { font-size: 17px; color: var(--muted); margin: 0 0 24px; max-width: 44ch; }\n  .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }\n\n  .flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }\n  .fnode { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 100px; }\n  .fnode .fi { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; color: #fff; font-size: 21px; box-shadow: 0 12px 26px -12px rgba(124,58,237,.5); }\n  .fnode img { width: 54px; height: 54px; object-fit: contain; }\n  .fnode small { font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.35; }\n  .farrow { color: var(--violet); font-size: 20px; display: flex; flex-direction: column; align-items: center; font-family: var(--mono); }\n  .farrow .lbl { font-size: 9px; letter-spacing: .05em; color: var(--muted-2); }\n  .flowcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px; box-shadow: 0 30px 60px -42px rgba(124,58,237,.55); }\n\n  .codepanel { background: var(--code-bg); border: 1px solid var(--code-line); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px -30px rgba(76,44,148,.5); }\n  .cphead { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--code-bg2); border-bottom: 1px solid var(--code-line); }\n  .cphead .dot { width: 10px; height: 10px; border-radius: 50%; background: #4a4368; }\n  .cphead .ttl { font-family: var(--mono); font-size: 12px; color: #9a92bf; margin-left: 6px; }\n  .cphead .mm { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; color: #7fe0a8; background: rgba(127,224,168,.14); }\n  .tabs { display: flex; gap: 4px; padding: 9px 12px 0; background: var(--code-bg2); border-bottom: 1px solid var(--code-line); overflow-x: auto; }\n  .tab { font-family: var(--mono); font-size: 12.5px; color: #9a92bf; padding: 8px 14px; border-radius: 8px 8px 0 0; cursor: pointer; border: 1px solid transparent; border-bottom: none; white-space: nowrap; }\n  .tab.active { color: #fff; background: var(--code-bg); border-color: var(--code-line); }\n  .code { margin: 0; padding: 16px 18px; font-size: 12.6px; line-height: 1.7; color: #cfc9ea; white-space: pre; overflow-x: auto; }\n  .code[hidden] { display: none; }\n  .code .k { color: #c4b3ff; } .code .s { color: #ffb877; } .code .c { color: #6f6796; } .code .n { color: #7fe0a8; } .code .b { color: #7ea8ff; }\n\n  .trio { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }\n  .trio3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }\n  .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }\n  .card h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }\n  .card .sub { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }\n  .kv { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }\n  .kv .row { display: grid; grid-template-columns: 205px 1fr; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }\n  .kv .row:last-child { border-bottom: none; }\n  .kv .row .k { color: var(--heading); font-weight: 600; }\n  .kv .row .v { color: var(--muted); font-family: var(--mono); font-size: 12.5px; word-break: break-word; }\n\n  .steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }\n  .steps li { display: flex; gap: 12px; align-items: flex-start; }\n  .steps .num { width: 24px; height: 24px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; font-family: var(--mono); }\n  .steps b { color: var(--heading); font-size: 14.5px; font-weight: 600; }\n  .steps p { font-size: 13.5px; color: var(--muted); margin: 2px 0 0; }\n  .subtle { font-size: 13px; color: var(--muted); margin: 14px 0 0; }\n\n  \/* create-webhook mock form *\/\n  .form-row { margin-bottom: 14px; }\n  .form-row label { display: block; font-size: 12.5px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }\n  .form-row .inp { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: 13px; color: var(--text); font-family: var(--mono); }\n  .evtpick { display: flex; flex-wrap: wrap; gap: 7px; }\n  .evtpick .e { font-family: var(--mono); font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); background: var(--card); }\n  .evtpick .e.on { color: #fff; background: var(--violet); border-color: var(--violet); }\n  .secretbox { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--code-bg); color: #ffb877; font-family: var(--mono); font-size: 12.5px; border-radius: 9px; padding: 10px 12px; }\n  .secretbox .cp { color: #9a92bf; }\n\n  \/* headers table *\/\n  .htab { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }\n  .htab th, .htab td { text-align: left; padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid var(--line); vertical-align: top; }\n  .htab th { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }\n  .htab td:first-child { font-family: var(--mono); font-size: 12.5px; color: var(--violet); font-weight: 600; white-space: nowrap; }\n  .htab td { color: var(--muted); }\n  .htab tr:last-child td { border-bottom: none; }\n\n  \/* events overview *\/\n  .evgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }\n  .evcol h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }\n  .evrow { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--card); }\n  .evrow .en { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--heading); }\n  .evrow .ed { font-size: 12.5px; color: var(--muted); margin-left: auto; }\n  .evrow .rsv { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); padding: 2px 7px; border-radius: 5px; margin-left: auto; }\n\n  \/* payload catalog *\/\n  .cat { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }\n  .catlist { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; position: sticky; top: 130px; }\n  .catlist .grp { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); padding: 12px 10px 6px; }\n  .catlist button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; border-radius: 9px; padding: 9px 10px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; font-family: var(--mono); }\n  .catlist button:hover { background: var(--surface-2); }\n  .catlist button.active { background: var(--violet-pale); color: var(--violet); font-weight: 600; }\n  .catpanel { display: none; }\n  .catpanel.active { display: block; }\n  .catpanel .lead { font-size: 14.5px; color: var(--muted); margin: 0 0 14px; }\n  .catpanel .lead b { color: var(--heading); }\n\n  \/* logs table *\/\n  .logs { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 13px; }\n  .logs th, .logs td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--line); }\n  .logs th { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }\n  .logs td { color: var(--text); font-family: var(--mono); font-size: 12.5px; }\n  .logs tr:last-child td { border-bottom: none; }\n  .st { font-weight: 700; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; }\n  .st.ok { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }\n  .st.err { color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, transparent); }\n\n  .final-band { background: var(--grad-band); border-radius: 22px; padding: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden; }\n  .final-band::after { content:\"\"; position:absolute; inset:0; background: radial-gradient(50% 120% at 90% 10%, rgba(255,255,255,.14), transparent 60%); pointer-events:none; }\n  .final-band h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); position: relative; max-width: 24ch; }\n  .final-band p { color: #e6ddf8; margin: 8px 0 0; position: relative; }\n  .final-band .fcta { display: flex; gap: 12px; position: relative; flex-wrap: wrap; }\n\n  footer { background: linear-gradient(180deg, #2a1a4f 0%, #1e1338 100%); color: #cfc6e6; padding: 50px 0 28px; margin-top: 20px; }\n  .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }\n  .foot-brand .logo-img { height: 28px; margin-bottom: 12px; }\n  .foot-brand p { font-size: 13px; color: #a89fc4; max-width: 26ch; }\n  .foot-col h5 { font-family: var(--display); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 2px 0 12px; }\n  .foot-col a { display: block; font-size: 13.5px; color: #b3aacb; margin-bottom: 8px; }\n  .foot-col a:hover { color: #fff; }\n  .foot-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 30px; padding-top: 16px; font-size: 12.5px; color: #8b83a6; }\n\n  @media (max-width: 940px) {\n    .hero-in, .trio, .trio3, .cat, .evgrid, .foot-grid { grid-template-columns: 1fr; }\n    .catlist { position: static; }\n    .kv .row { grid-template-columns: 1fr; gap: 3px; }\n    .nav-links { display: none; }\n    .htab, .logs { display: block; overflow-x: auto; }\n  }\n  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }\n  :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }\n\n  \/* ============ MOBILE RESPONSIVENESS ============ *\/\n  html, body { max-width: 100%; overflow-x: hidden; }\n  img, pre, table, iframe, video { max-width: 100%; }\n\n  @media (max-width: 820px) {\n    .wrap { padding-left: 18px; padding-right: 18px; }\n    section { padding: 54px 0; }\n    .sec-head { margin-bottom: 30px; }\n    \/* Nav fits on phones *\/\n    .nav-in { gap: 12px; height: 60px; }\n    .nav-cta { gap: 8px; }\n    .btn { padding: 9px 14px; font-size: 13.5px; }\n    .nav-cta .btn-ghost-light, .nav-cta .btn-ghost { display: none; }\n    .logo-img { height: 24px; }\n    .logo { font-size: 17px; }\n    .theme-btn { width: 36px; height: 36px; }\n    \/* Data tables scroll horizontally instead of overflowing *\/\n    .htab, .logs, .limits { display: block; overflow-x: auto; white-space: nowrap; }\n  }\n\n  @media (max-width: 620px) {\n    .hero-in { padding: 40px 18px 48px !important; gap: 30px; }\n    .hero h1 { font-size: 33px; }\n    .hero p.lede { font-size: 15.5px; }\n    .hero-cta { width: 100%; }\n    .hero-cta .btn { flex: 1 1 150px; justify-content: center; }\n    \/* Homepage hero: focus on the live chat, drop the contact list *\/\n    .panel .mock-grid { grid-template-columns: 1fr; }\n    .panel .mock-list { display: none; }\n    \/* Sections tighten *\/\n    .statband { padding: 28px 20px; grid-template-columns: 1fr 1fr; }\n    .why-ic { width: 66px; height: 66px; font-size: 26px; }\n    .dive { gap: 30px; }\n    .dive-visual { padding: 16px; }\n    .plan { padding: 26px 22px; }\n    .card { padding: 20px; }\n    \/* Bands + CTAs stack full width *\/\n    .final-band, .pricewrap { padding: 30px 22px; }\n    .final-band .btn, .final-band .fcta { width: 100%; }\n    .final-band .fcta { flex-direction: column; }\n    .final-band .fcta .btn { width: 100%; }\n    \/* Developer\/webhook panels *\/\n    .cat { gap: 16px; }\n    .catlist { position: static; }\n    .flow { gap: 6px; }\n    .fnode { min-width: 78px; }\n    .fnode .fi, .fnode img { width: 46px; height: 46px; }\n    \/* Footer *\/\n    .foot-grid { gap: 22px 24px; }\n  }\n\n  @media (max-width: 430px) {\n    .hero h1 { font-size: 28px; }\n    .grid, .integ, .chgrid, .why, .statband, .evgrid { grid-template-columns: 1fr !important; }\n    .hero-proof { gap: 14px; }\n    .foot-grid { grid-template-columns: 1fr 1fr; }\n    .foot-brand { grid-column: 1 \/ -1; }\n  }\n\n\n  \/* ---- mobile hamburger nav ---- *\/\n  .hamb { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 9px; cursor: pointer; padding: 0 10px; }\n  .hamb span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .22s, opacity .22s; }\n  .nav.open .hamb span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\n  .nav.open .hamb span:nth-child(2) { opacity: 0; }\n  .nav.open .hamb span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\n  .mobmenu { display: none; }\n  @media (max-width: 820px) {\n    .nav-links { display: none; }\n    .nav-cta .btn { display: none; }\n    .hamb { display: flex; }\n    .mobmenu { position: absolute; top: 100%; left: 0; right: 0; background: var(--grad-nav); border-top: 1px solid rgba(255,255,255,.14); padding: 12px 18px 18px; flex-direction: column; gap: 8px; box-shadow: 0 24px 44px -20px rgba(0,0,0,.55); max-height: calc(100vh - 60px); overflow-y: auto; }\n    .nav.open .mobmenu { display: flex; }\n    .mobmenu .link { color: #e7dffb; font-weight: 500; font-size: 15px; padding: 11px 6px; border-bottom: 1px solid rgba(255,255,255,.09); }\n    .mobmenu .link:active { color: #fff; }\n    .mobmenu .btn { width: 100%; justify-content: center; margin-top: 4px; display: inline-flex; }\n  }\n\n\n  \/* ===== constant header\/footer ===== *\/\n  .nav{position:sticky;top:0;z-index:40;background:var(--grad-nav);}\n  .nav-in{display:flex;align-items:center;gap:26px;height:64px;}\n  .logo-img{height:29px;width:auto;display:block;}\n  .nav-links{display:flex;gap:22px;margin-left:8px;}\n  .nav-links a{font-size:14.5px;color:#d7cff0;font-weight:500;}\n  .nav-links a:hover,.nav-links a.active{color:#fff;}\n  .nav-cta{margin-left:auto;display:flex;gap:12px;align-items:center;}\n  .hamb{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:9px;cursor:pointer;padding:0 10px;}\n  .hamb span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .22s,opacity .22s;}\n  .nav.open .hamb span:nth-child(1){transform:translateY(7px) rotate(45deg);}\n  .nav.open .hamb span:nth-child(2){opacity:0;}\n  .nav.open .hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}\n  .mobmenu{display:none;}\n  footer{background:linear-gradient(180deg,#2a1a4f 0%,#1e1338 100%);color:#cfc6e6;padding:54px 0 30px;margin-top:24px;}\n  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px;}\n  .foot-brand .logo-img{height:30px;margin-bottom:14px;}\n  .foot-brand p{font-size:13.5px;color:#a89fc4;max-width:26ch;margin:0 0 16px;}\n  .foot-social{display:flex;gap:10px;}\n  .foot-social a{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;}\n  .foot-social a img{width:34px;height:34px;object-fit:contain;}\n  .foot-social a:hover{transform:translateY(-2px);}\n  .foot-col h5{font-family:var(--display);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin:4px 0 14px;}\n  .foot-col a{display:block;font-size:13.5px;color:#b3aacb;margin-bottom:9px;}\n  .foot-col a:hover{color:#fff;}\n  .foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:18px;font-size:12.5px;color:#8b83a6;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}\n  .foot-bottom a{color:#8b83a6;} .foot-bottom a:hover{color:#fff;}\n  .subnav{top:64px;}\n  @media(max-width:820px){\n    .nav-in{gap:12px;height:60px;}\n    .nav-links{display:none;}\n    .nav-cta{gap:8px;}\n    .nav-cta .btn{display:none;}\n    .hamb{display:flex;}\n    .logo-img{height:24px;}\n    .mobmenu{position:absolute;top:100%;left:0;right:0;background:var(--grad-nav);border-top:1px solid rgba(255,255,255,.14);padding:12px 18px 18px;flex-direction:column;gap:8px;box-shadow:0 24px 44px -20px rgba(0,0,0,.55);max-height:calc(100vh - 60px);overflow-y:auto;}\n    .nav.open .mobmenu{display:flex;}\n    .mobmenu .link{color:#e7dffb;font-weight:500;font-size:15px;padding:11px 6px;border-bottom:1px solid rgba(255,255,255,.09);}\n    .mobmenu .btn{width:100%;justify-content:center;margin-top:4px;display:inline-flex;}\n    .foot-grid{grid-template-columns:1fr 1fr;}\n  }\n  @media(max-width:520px){.foot-grid{grid-template-columns:1fr 1fr;}.foot-brand{grid-column:1\/-1;}}\n\n<\/style>\n<header class=\"nav\">\r\n  <div class=\"wrap nav-in\">\r\n    <a href=\"\/\" aria-label=\"WhatsPing home\"><img decoding=\"async\" class=\"logo-img\" src=\"\/whatsping-site\/assets\/img\/logo-white.png\" alt=\"WhatsPing\"><\/a>\r\n    <nav class=\"nav-links\">\r\n      <a href=\"\/features\/\">Features<\/a>\r\n      <a href=\"\/pricing\/\">Pricing<\/a>\r\n      <a href=\"\/integrations\/\">Integrations<\/a>\r\n      <a href=\"\/api\/\" class=\"active\">Developers<\/a>\r\n      <a href=\"\/blog\/\">Blog<\/a>\r\n    <\/nav>\r\n    <div class=\"nav-cta\">\r\n      <button class=\"theme-btn\" id=\"themeBtn\" aria-label=\"Toggle theme\">\u25d0<\/button>\r\n      <a class=\"btn btn-ghost-light\" href=\"https:\/\/app.whatsping.com\/login\">Log in<\/a>\r\n      <a class=\"btn btn-orange\" href=\"https:\/\/app.whatsping.com\/register\">Get Started Free<\/a>\r\n      <button class=\"hamb\" id=\"hambBtn\" aria-label=\"Open menu\" aria-expanded=\"false\"><span><\/span><span><\/span><span><\/span><\/button>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"mobmenu\" id=\"mobMenu\">\r\n      <a href=\"\/features\/\" class=\"link\">Features<\/a>\r\n      <a href=\"\/pricing\/\" class=\"link\">Pricing<\/a>\r\n      <a href=\"\/integrations\/\" class=\"link\">Integrations<\/a>\r\n      <a href=\"\/api\/\" class=\"link\">Developers<\/a>\r\n      <a href=\"\/blog\/\" class=\"link\">Blog<\/a>\r\n      <a class=\"btn btn-ghost-light\" href=\"https:\/\/app.whatsping.com\/login\">Log in<\/a>\r\n      <a class=\"btn btn-orange\" href=\"https:\/\/app.whatsping.com\/register\">Get Started Free<\/a>\r\n  <\/div>\r\n<\/header>\r\n\r\n<div class=\"subnav\">\r\n  <div class=\"wrap subnav-in\">\r\n    <span class=\"tag\">\u21e2 Webhooks<\/span>\r\n    <a href=\"#manage\">Create &amp; manage<\/a>\r\n    <a href=\"#delivery\">Delivery &amp; headers<\/a>\r\n    <a href=\"#security\">Signature<\/a>\r\n    <a href=\"#events\">Events<\/a>\r\n    <a href=\"#payloads\">Payload catalog<\/a>\r\n    <a href=\"#logs\">Delivery logs<\/a>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- HERO -->\r\n<section class=\"hero\" style=\"padding:0;\">\r\n  <div class=\"wrap hero-in\">\r\n    <div>\r\n      <span class=\"pill-tag\">Developer Platform<\/span>\r\n      <h1>Outbound <em>Webhooks<\/em><\/h1>\r\n      <p class=\"lede\">Push real-time events from WhatsPing to your own systems. Register a URL, pick the events you care about, and WhatsPing POSTs a signed JSON payload the moment something happens \u2014 new messages, delivery updates, campaign progress and account changes.<\/p>\r\n      <div class=\"hero-cta\">\r\n        <a class=\"btn btn-violet\" href=\"#manage\">Create a webhook<\/a>\r\n        <a class=\"btn btn-outline\" href=\"#payloads\">Browse payloads<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"flowcard\">\r\n      <div class=\"flow\">\r\n        <div class=\"fnode\"><div class=\"fi\" style=\"background:var(--grad-band)\">\u26a1<\/div><small>Event happens<br>in WhatsPing<\/small><\/div>\r\n        <span class=\"farrow\"><span class=\"lbl\">POST<\/span>\u2192<\/span>\r\n        <div class=\"fnode\"><div class=\"fi\" style=\"background:var(--grad-orange)\">\u21e2<\/div><small>Signed JSON<br>over HTTPS<\/small><\/div>\r\n        <span class=\"farrow\"><span class=\"lbl\">200 OK<\/span>\u2192<\/span>\r\n        <div class=\"fnode\"><div class=\"fi\" style=\"background:linear-gradient(135deg,#334155,#0f172a)\">\ud83d\udda5\ufe0f<\/div><small>Your server<br>&amp; systems<\/small><\/div>\r\n      <\/div>\r\n      <p class=\"subtle\" style=\"text-align:center\">Delivered on a queue with automatic retries \u2014 every attempt is logged so you can see exactly what was sent.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- MANAGE -->\r\n<section id=\"manage\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\"><span class=\"eyebrow\">Developer tools<\/span><h2>Create &amp; manage webhooks<\/h2><p>From <b>Developer \u2192 Webhooks<\/b> in your dashboard. Create as many endpoints as you like \u2014 each has its own URL, event subscriptions and signing secret.<\/p><\/div>\r\n    <div class=\"trio\">\r\n      <div class=\"card\">\r\n        <h3>Create Webhook<\/h3>\r\n        <p class=\"sub\">What you configure per endpoint.<\/p>\r\n        <div class=\"form-row\"><label>Webhook name<\/label><div class=\"inp\">Order updates<\/div><\/div>\r\n        <div class=\"form-row\"><label>Endpoint URL<\/label><div class=\"inp\">https:\/\/myapp.com\/webhooks\/whatsping<\/div><\/div>\r\n        <div class=\"form-row\"><label>Events<\/label>\r\n          <div class=\"evtpick\">\r\n            <span class=\"e on\">message_received<\/span><span class=\"e on\">message_status_updated<\/span><span class=\"e\">message_sent<\/span><span class=\"e on\">campaign_completed<\/span><span class=\"e\">account_status_updated<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"form-row\" style=\"margin-bottom:0\"><label>Signing secret <span style=\"color:var(--muted);font-weight:400\">(generated)<\/span><\/label>\r\n          <div class=\"secretbox\"><span>whsec_\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022<\/span><span class=\"cp\" title=\"Illustrative\">\u29c9<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card\">\r\n        <h3>Management actions<\/h3>\r\n        <p class=\"sub\">Available under <span class=\"ic\">\/developer\/webhooks<\/span>.<\/p>\r\n        <div class=\"kv\">\r\n          <div class=\"row\"><div class=\"k\">Create webhook<\/div><div class=\"v\">POST \/developer\/webhooks<\/div><\/div>\r\n          <div class=\"row\"><div class=\"k\">Activate \/ pause<\/div><div class=\"v\">POST \/developer\/webhooks\/{id}\/toggle<\/div><\/div>\r\n          <div class=\"row\"><div class=\"k\">Send test event<\/div><div class=\"v\">POST \/developer\/webhooks\/{id}\/test<\/div><\/div>\r\n          <div class=\"row\"><div class=\"k\">Delete webhook<\/div><div class=\"v\">DELETE \/developer\/webhooks\/{id}<\/div><\/div>\r\n          <div class=\"row\"><div class=\"k\">View delivery logs<\/div><div class=\"v\">GET \/developer\/webhooks\/{id}\/logs<\/div><\/div>\r\n        <\/div>\r\n        <p class=\"subtle\">A webhook stores a <span class=\"ic\">name<\/span>, <span class=\"ic\">url<\/span>, subscribed <span class=\"ic\">events<\/span>, an <span class=\"ic\">active<\/span> flag and its <span class=\"ic\">secret<\/span>. Toggle a webhook off any time to pause delivery without deleting it.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- DELIVERY -->\r\n<section id=\"delivery\" style=\"background:var(--paper-2);\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\"><span class=\"eyebrow\">Mechanics<\/span><h2>Delivery &amp; headers<\/h2><p>Every event is sent as an HTTP <b>POST<\/b> with a consistent JSON envelope and three headers. Respond with any <span class=\"ic\">2xx<\/span> to acknowledge.<\/p><\/div>\r\n    <div class=\"trio\">\r\n      <div class=\"codepanel\">\r\n        <div class=\"cphead\"><span class=\"dot\"><\/span><span class=\"ttl\">WhatsPing \u2192 your endpoint<\/span><span class=\"mm\">POST<\/span><\/div>\r\n<pre class=\"code\"><span class=\"c\"># Common envelope for every event<\/span>\r\n<span class=\"k\">POST<\/span> https:\/\/myapp.com\/webhooks\/whatsping\r\n<span class=\"b\">X-Webhook-Event<\/span>:     message_received\r\n<span class=\"b\">X-Webhook-Signature<\/span>: 9f86d0818829... (HMAC-SHA256)\r\n<span class=\"b\">Content-Type<\/span>:        application\/json\r\n\r\n{\r\n  <span class=\"b\">\"event\"<\/span>: <span class=\"s\">\"message_received\"<\/span>,\r\n  <span class=\"b\">\"timestamp\"<\/span>: <span class=\"s\">\"2026-07-26T12:00:00+00:00\"<\/span>,\r\n  <span class=\"b\">\"data\"<\/span>: { <span class=\"c\">\/* event-specific \u2014 see catalog *\/<\/span> }\r\n}<\/pre>\r\n      <\/div>\r\n      <div>\r\n        <table class=\"htab\" style=\"margin-bottom:18px\">\r\n          <thead><tr><th>Header<\/th><th>Description<\/th><\/tr><\/thead>\r\n          <tbody>\r\n            <tr><td>X-Webhook-Event<\/td><td>The event name (e.g. <code style=\"font-family:var(--mono);font-size:12px\">message_sent<\/code>) \u2014 lets you route without parsing the body.<\/td><\/tr>\r\n            <tr><td>X-Webhook-Signature<\/td><td>HMAC-SHA256 of the raw JSON body, signed with your webhook secret.<\/td><\/tr>\r\n            <tr><td>Content-Type<\/td><td>Always <code style=\"font-family:var(--mono);font-size:12px\">application\/json<\/code>.<\/td><\/tr>\r\n          <\/tbody>\r\n        <\/table>\r\n        <div class=\"card\" style=\"padding:18px\">\r\n          <h3 style=\"font-size:15px;margin-bottom:10px\">Retries &amp; timeouts<\/h3>\r\n          <div class=\"kv\">\r\n            <div class=\"row\"><div class=\"k\">Attempts<\/div><div class=\"v\">up to 3<\/div><\/div>\r\n            <div class=\"row\"><div class=\"k\">Backoff between retries<\/div><div class=\"v\">10s \u2192 30s \u2192 60s<\/div><\/div>\r\n            <div class=\"row\"><div class=\"k\">Request timeout<\/div><div class=\"v\">10 seconds<\/div><\/div>\r\n            <div class=\"row\"><div class=\"k\">Retried on<\/div><div class=\"v\">5xx responses &amp; connection errors<\/div><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- SECURITY -->\r\n<section id=\"security\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\"><span class=\"eyebrow\">Trust<\/span><h2>Verify the signature<\/h2><p>Every request is signed so you can be sure it came from WhatsPing. Recompute the HMAC-SHA256 of the raw request body using your webhook's secret and compare it to the <span class=\"ic\">X-Webhook-Signature<\/span> header.<\/p><\/div>\r\n    <div class=\"codepanel\" style=\"max-width:760px\">\r\n      <div class=\"tabs\" role=\"tablist\">\r\n        <button class=\"tab active\" data-lang=\"php\">PHP<\/button>\r\n        <button class=\"tab\" data-lang=\"node\">Node.js<\/button>\r\n        <button class=\"tab\" data-lang=\"python\">Python<\/button>\r\n      <\/div>\r\n<pre class=\"code\" data-lang=\"php\"><span class=\"c\">\/\/ Laravel controller receiving the webhook<\/span>\r\n<span class=\"p\">$payload<\/span>   = <span class=\"p\">$request<\/span>-&gt;getContent();          <span class=\"c\">\/\/ raw body<\/span>\r\n<span class=\"p\">$expected<\/span>  = hash_hmac(<span class=\"s\">'sha256'<\/span>, <span class=\"p\">$payload<\/span>, <span class=\"p\">$webhookSecret<\/span>);\r\n<span class=\"p\">$received<\/span>  = <span class=\"p\">$request<\/span>-&gt;header(<span class=\"s\">'X-Webhook-Signature'<\/span>);\r\n\r\n<span class=\"k\">if<\/span> (! hash_equals(<span class=\"p\">$expected<\/span>, <span class=\"p\">$received<\/span>)) {\r\n    <span class=\"k\">abort<\/span>(<span class=\"n\">403<\/span>, <span class=\"s\">'Invalid signature'<\/span>);\r\n}\r\n<span class=\"c\">\/\/ \u2713 trusted \u2014 process $request-&gt;input('event') \/ 'data'<\/span><\/pre>\r\n<pre class=\"code\" data-lang=\"node\" hidden=\"\"><span class=\"k\">const<\/span> crypto = <span class=\"k\">require<\/span>(<span class=\"s\">'crypto'<\/span>);\r\n\r\n<span class=\"c\">\/\/ express: use express.raw() so body is the exact bytes<\/span>\r\n<span class=\"k\">const<\/span> expected = crypto\r\n  .createHmac(<span class=\"s\">'sha256'<\/span>, webhookSecret)\r\n  .update(req.body)                 <span class=\"c\">\/\/ raw Buffer<\/span>\r\n  .digest(<span class=\"s\">'hex'<\/span>);\r\n\r\n<span class=\"k\">if<\/span> (expected !== req.headers[<span class=\"s\">'x-webhook-signature'<\/span>]) {\r\n  <span class=\"k\">return<\/span> res.status(<span class=\"n\">403<\/span>).send(<span class=\"s\">'Invalid signature'<\/span>);\r\n}\r\n<span class=\"c\">\/\/ \u2713 trusted<\/span><\/pre>\r\n<pre class=\"code\" data-lang=\"python\" hidden=\"\"><span class=\"k\">import<\/span> hmac, hashlib\r\n\r\nexpected = hmac.new(\r\n    webhook_secret.encode(),\r\n    request.data,                     <span class=\"c\"># raw body bytes<\/span>\r\n    hashlib.sha256\r\n).hexdigest()\r\n\r\n<span class=\"k\">if<\/span> <span class=\"k\">not<\/span> hmac.compare_digest(expected, request.headers[<span class=\"s\">'X-Webhook-Signature'<\/span>]):\r\n    abort(<span class=\"n\">403<\/span>)\r\n<span class=\"c\"># \u2713 trusted<\/span><\/pre>\r\n    <\/div>\r\n    <p class=\"subtle\" style=\"max-width:760px\">The signature covers the entire envelope \u2014 <span class=\"ic\">event<\/span>, <span class=\"ic\">timestamp<\/span> and <span class=\"ic\">data<\/span> \u2014 so any tampering invalidates it. Keep your secret server-side only.<\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- EVENTS -->\r\n<section id=\"events\" style=\"background:var(--paper-2);\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\"><span class=\"eyebrow\">Catalog<\/span><h2>Available events<\/h2><p>Subscribe a webhook to any of these. Events marked <b>reserved<\/b> can be selected now and will start delivering once emitting is enabled.<\/p><\/div>\r\n    <div class=\"evgrid\">\r\n      <div class=\"evcol\">\r\n        <h4>Messages<\/h4>\r\n        <div class=\"evrow\"><span class=\"en\">message_received<\/span><span class=\"ed\">Inbound message from a contact<\/span><\/div>\r\n        <div class=\"evrow\"><span class=\"en\">message_sent<\/span><span class=\"ed\">Outbound message accepted<\/span><\/div>\r\n        <div class=\"evrow\"><span class=\"en\">message_failed<\/span><span class=\"ed\">Message could not be sent<\/span><\/div>\r\n        <div class=\"evrow\"><span class=\"en\">message_status_updated<\/span><span class=\"ed\">sent \u00b7 delivered \u00b7 read \u00b7 failed<\/span><\/div>\r\n        <h4 style=\"margin-top:20px\">Campaigns<\/h4>\r\n        <div class=\"evrow\"><span class=\"en\">campaign_started<\/span><span class=\"ed\">Campaign began sending<\/span><\/div>\r\n        <div class=\"evrow\"><span class=\"en\">campaign_completed<\/span><span class=\"ed\">Campaign finished<\/span><\/div>\r\n      <\/div>\r\n      <div class=\"evcol\">\r\n        <h4>Account<\/h4>\r\n        <div class=\"evrow\"><span class=\"en\">account_status_updated<\/span><span class=\"ed\">WABA review \/ status change<\/span><\/div>\r\n        <div class=\"evrow\"><span class=\"en\">phone_number_name_updated<\/span><span class=\"ed\">Display-name decision<\/span><\/div>\r\n        <h4 style=\"margin-top:20px\">Reserved <span style=\"text-transform:none;letter-spacing:0;color:var(--muted-2)\">\u2014 selectable, not yet emitted<\/span><\/h4>\r\n        <div class=\"evrow\"><span class=\"en\">contact_created<\/span><span class=\"rsv\">Reserved<\/span><\/div>\r\n        <div class=\"evrow\"><span class=\"en\">contact_updated<\/span><span class=\"rsv\">Reserved<\/span><\/div>\r\n        <div class=\"evrow\"><span class=\"en\">template_approved<\/span><span class=\"rsv\">Reserved<\/span><\/div>\r\n        <div class=\"evrow\"><span class=\"en\">template_rejected<\/span><span class=\"rsv\">Reserved<\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- PAYLOADS -->\r\n<section id=\"payloads\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\"><span class=\"eyebrow\">Reference<\/span><h2>Payload catalog<\/h2><p>The <span class=\"ic\">data<\/span> object inside the envelope, for each event that fires. Every payload also includes the top-level <span class=\"ic\">event<\/span> and <span class=\"ic\">timestamp<\/span>.<\/p><\/div>\r\n    <div class=\"cat\">\r\n      <div class=\"catlist\">\r\n        <div class=\"grp\">Messages<\/div>\r\n        <button class=\"active\" data-cat=\"received\">message_received<\/button>\r\n        <button data-cat=\"sent\">message_sent<\/button>\r\n        <button data-cat=\"failed\">message_failed<\/button>\r\n        <button data-cat=\"status\">message_status_updated<\/button>\r\n        <div class=\"grp\">Campaigns<\/div>\r\n        <button data-cat=\"cstart\">campaign_started<\/button>\r\n        <button data-cat=\"cdone\">campaign_completed<\/button>\r\n        <div class=\"grp\">Account<\/div>\r\n        <button data-cat=\"acct\">account_status_updated<\/button>\r\n        <button data-cat=\"phone\">phone_number_name_updated<\/button>\r\n      <\/div>\r\n      <div>\r\n        <div class=\"catpanel active\" data-cat=\"received\">\r\n          <p class=\"lead\">Fires when a <b>contact sends you a message<\/b>. The <span class=\"ic\">message_type<\/span> mirrors the WhatsApp type (text, image, document, interactive\u2026).<\/p>\r\n          <div class=\"codepanel\"><div class=\"cphead\"><span class=\"dot\"><\/span><span class=\"ttl\">event: message_received<\/span><span class=\"mm\">POST<\/span><\/div>\r\n<pre class=\"code\">{\r\n  <span class=\"b\">\"event\"<\/span>: <span class=\"s\">\"message_received\"<\/span>,\r\n  <span class=\"b\">\"timestamp\"<\/span>: <span class=\"s\">\"2026-07-26T12:00:00+00:00\"<\/span>,\r\n  <span class=\"b\">\"data\"<\/span>: {\r\n    <span class=\"b\">\"message_id\"<\/span>:    <span class=\"n\">184203<\/span>,\r\n    <span class=\"b\">\"message_wamid\"<\/span>: <span class=\"s\">\"wamid.HBgM...\"<\/span>,\r\n    <span class=\"b\">\"contact_id\"<\/span>:    <span class=\"n\">5821<\/span>,\r\n    <span class=\"b\">\"contact_name\"<\/span>:  <span class=\"s\">\"Sara Ahmed\"<\/span>,\r\n    <span class=\"b\">\"phone\"<\/span>:         <span class=\"s\">\"8801712345678\"<\/span>,\r\n    <span class=\"b\">\"message\"<\/span>:       <span class=\"s\">\"Hi! Is the offer still on?\"<\/span>,\r\n    <span class=\"b\">\"message_type\"<\/span>:  <span class=\"s\">\"text\"<\/span>,\r\n    <span class=\"b\">\"company_id\"<\/span>:    <span class=\"n\">979<\/span>\r\n  }\r\n}<\/pre><\/div>\r\n        <\/div>\r\n        <div class=\"catpanel\" data-cat=\"sent\">\r\n          <p class=\"lead\">Fires when an <b>outbound message is accepted<\/b> by WhatsApp (via the API, a reply or a campaign).<\/p>\r\n          <div class=\"codepanel\"><div class=\"cphead\"><span class=\"dot\"><\/span><span class=\"ttl\">event: message_sent<\/span><span class=\"mm\">POST<\/span><\/div>\r\n<pre class=\"code\">{\r\n  <span class=\"b\">\"event\"<\/span>: <span class=\"s\">\"message_sent\"<\/span>,\r\n  <span class=\"b\">\"timestamp\"<\/span>: <span class=\"s\">\"2026-07-26T12:00:05+00:00\"<\/span>,\r\n  <span class=\"b\">\"data\"<\/span>: {\r\n    <span class=\"b\">\"message_id\"<\/span>:    <span class=\"n\">184204<\/span>,\r\n    <span class=\"b\">\"message_wamid\"<\/span>: <span class=\"s\">\"wamid.HBgM...\"<\/span>,\r\n    <span class=\"b\">\"contact_id\"<\/span>:    <span class=\"n\">5821<\/span>,\r\n    <span class=\"b\">\"phone\"<\/span>:         <span class=\"s\">\"8801712345678\"<\/span>,\r\n    <span class=\"b\">\"company_id\"<\/span>:    <span class=\"n\">979<\/span>\r\n  }\r\n}<\/pre><\/div>\r\n        <\/div>\r\n        <div class=\"catpanel\" data-cat=\"failed\">\r\n          <p class=\"lead\">Fires when a message <b>fails to send<\/b> \u2014 includes the error reported by WhatsApp.<\/p>\r\n          <div class=\"codepanel\"><div class=\"cphead\"><span class=\"dot\"><\/span><span class=\"ttl\">event: message_failed<\/span><span class=\"mm\">POST<\/span><\/div>\r\n<pre class=\"code\">{\r\n  <span class=\"b\">\"event\"<\/span>: <span class=\"s\">\"message_failed\"<\/span>,\r\n  <span class=\"b\">\"timestamp\"<\/span>: <span class=\"s\">\"2026-07-26T12:00:06+00:00\"<\/span>,\r\n  <span class=\"b\">\"data\"<\/span>: {\r\n    <span class=\"b\">\"message_id\"<\/span>: <span class=\"n\">184205<\/span>,\r\n    <span class=\"b\">\"contact_id\"<\/span>: <span class=\"n\">5821<\/span>,\r\n    <span class=\"b\">\"phone\"<\/span>:      <span class=\"s\">\"8801712345678\"<\/span>,\r\n    <span class=\"b\">\"error\"<\/span>:      <span class=\"s\">\"More than 24 hours since the last reply\"<\/span>,\r\n    <span class=\"b\">\"company_id\"<\/span>: <span class=\"n\">979<\/span>\r\n  }\r\n}<\/pre><\/div>\r\n        <\/div>\r\n        <div class=\"catpanel\" data-cat=\"status\">\r\n          <p class=\"lead\">Fires as a message moves through delivery states: <span class=\"ic\">sent \u2192 delivered \u2192 read<\/span>, or <span class=\"ic\">failed<\/span>.<\/p>\r\n          <div class=\"codepanel\"><div class=\"cphead\"><span class=\"dot\"><\/span><span class=\"ttl\">event: message_status_updated<\/span><span class=\"mm\">POST<\/span><\/div>\r\n<pre class=\"code\">{\r\n  <span class=\"b\">\"event\"<\/span>: <span class=\"s\">\"message_status_updated\"<\/span>,\r\n  <span class=\"b\">\"timestamp\"<\/span>: <span class=\"s\">\"2026-07-26T12:00:10+00:00\"<\/span>,\r\n  <span class=\"b\">\"data\"<\/span>: {\r\n    <span class=\"b\">\"message_id\"<\/span>:    <span class=\"n\">184204<\/span>,\r\n    <span class=\"b\">\"message_wamid\"<\/span>: <span class=\"s\">\"wamid.HBgM...\"<\/span>,\r\n    <span class=\"b\">\"status\"<\/span>:        <span class=\"s\">\"delivered\"<\/span>,   <span class=\"c\">\/\/ sent | delivered | read | failed<\/span>\r\n    <span class=\"b\">\"error\"<\/span>:         <span class=\"k\">null<\/span>,\r\n    <span class=\"b\">\"contact_id\"<\/span>:    <span class=\"n\">5821<\/span>,\r\n    <span class=\"b\">\"company_id\"<\/span>:    <span class=\"n\">979<\/span>\r\n  }\r\n}<\/pre><\/div>\r\n        <\/div>\r\n        <div class=\"catpanel\" data-cat=\"cstart\">\r\n          <p class=\"lead\">Fires when a <b>campaign begins sending<\/b>.<\/p>\r\n          <div class=\"codepanel\"><div class=\"cphead\"><span class=\"dot\"><\/span><span class=\"ttl\">event: campaign_started<\/span><span class=\"mm\">POST<\/span><\/div>\r\n<pre class=\"code\">{\r\n  <span class=\"b\">\"event\"<\/span>: <span class=\"s\">\"campaign_started\"<\/span>,\r\n  <span class=\"b\">\"timestamp\"<\/span>: <span class=\"s\">\"2026-07-26T09:00:00+00:00\"<\/span>,\r\n  <span class=\"b\">\"data\"<\/span>: {\r\n    <span class=\"b\">\"id\"<\/span>:             <span class=\"n\">4821<\/span>,\r\n    <span class=\"b\">\"name\"<\/span>:           <span class=\"s\">\"Ramadan promo\"<\/span>,\r\n    <span class=\"b\">\"total_contacts\"<\/span>: <span class=\"n\">1250<\/span>,\r\n    <span class=\"b\">\"created_at\"<\/span>:     <span class=\"s\">\"2026-07-26T09:00:00+00:00\"<\/span>\r\n  }\r\n}<\/pre><\/div>\r\n        <\/div>\r\n        <div class=\"catpanel\" data-cat=\"cdone\">\r\n          <p class=\"lead\">Fires when a <b>campaign finishes<\/b> sending to all contacts.<\/p>\r\n          <div class=\"codepanel\"><div class=\"cphead\"><span class=\"dot\"><\/span><span class=\"ttl\">event: campaign_completed<\/span><span class=\"mm\">POST<\/span><\/div>\r\n<pre class=\"code\">{\r\n  <span class=\"b\">\"event\"<\/span>: <span class=\"s\">\"campaign_completed\"<\/span>,\r\n  <span class=\"b\">\"timestamp\"<\/span>: <span class=\"s\">\"2026-07-26T09:14:00+00:00\"<\/span>,\r\n  <span class=\"b\">\"data\"<\/span>: {\r\n    <span class=\"b\">\"id\"<\/span>:             <span class=\"n\">4821<\/span>,\r\n    <span class=\"b\">\"name\"<\/span>:           <span class=\"s\">\"Ramadan promo\"<\/span>,\r\n    <span class=\"b\">\"total_contacts\"<\/span>: <span class=\"n\">1250<\/span>,\r\n    <span class=\"b\">\"completed_at\"<\/span>:   <span class=\"s\">\"2026-07-26T09:14:00+00:00\"<\/span>\r\n  }\r\n}<\/pre><\/div>\r\n        <\/div>\r\n        <div class=\"catpanel\" data-cat=\"acct\">\r\n          <p class=\"lead\">Fires when your <b>WhatsApp Business account status<\/b> changes (e.g. a review decision).<\/p>\r\n          <div class=\"codepanel\"><div class=\"cphead\"><span class=\"dot\"><\/span><span class=\"ttl\">event: account_status_updated<\/span><span class=\"mm\">POST<\/span><\/div>\r\n<pre class=\"code\">{\r\n  <span class=\"b\">\"event\"<\/span>: <span class=\"s\">\"account_status_updated\"<\/span>,\r\n  <span class=\"b\">\"timestamp\"<\/span>: <span class=\"s\">\"2026-07-26T08:00:00+00:00\"<\/span>,\r\n  <span class=\"b\">\"data\"<\/span>: {\r\n    <span class=\"b\">\"decision\"<\/span>:       <span class=\"s\">\"APPROVED\"<\/span>,\r\n    <span class=\"b\">\"account_status\"<\/span>: <span class=\"s\">\"active\"<\/span>,\r\n    <span class=\"b\">\"company_id\"<\/span>:     <span class=\"n\">979<\/span>\r\n  }\r\n}<\/pre><\/div>\r\n        <\/div>\r\n        <div class=\"catpanel\" data-cat=\"phone\">\r\n          <p class=\"lead\">Fires on a <b>display-name decision<\/b> for your phone number, with the rejection reason if declined.<\/p>\r\n          <div class=\"codepanel\"><div class=\"cphead\"><span class=\"dot\"><\/span><span class=\"ttl\">event: phone_number_name_updated<\/span><span class=\"mm\">POST<\/span><\/div>\r\n<pre class=\"code\">{\r\n  <span class=\"b\">\"event\"<\/span>: <span class=\"s\">\"phone_number_name_updated\"<\/span>,\r\n  <span class=\"b\">\"timestamp\"<\/span>: <span class=\"s\">\"2026-07-26T08:05:00+00:00\"<\/span>,\r\n  <span class=\"b\">\"data\"<\/span>: {\r\n    <span class=\"b\">\"decision\"<\/span>:         <span class=\"s\">\"APPROVED\"<\/span>,\r\n    <span class=\"b\">\"phone_number\"<\/span>:     <span class=\"s\">\"8801712345678\"<\/span>,\r\n    <span class=\"b\">\"requested_name\"<\/span>:   <span class=\"s\">\"WhatsPing Store\"<\/span>,\r\n    <span class=\"b\">\"rejection_reason\"<\/span>: <span class=\"k\">null<\/span>,\r\n    <span class=\"b\">\"company_id\"<\/span>:       <span class=\"n\">979<\/span>\r\n  }\r\n}<\/pre><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- LOGS -->\r\n<section id=\"logs\" style=\"background:var(--paper-2);\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sec-head\"><span class=\"eyebrow\">Observability<\/span><h2>Delivery logs<\/h2><p>Every delivery attempt is recorded \u2014 the event, the payload sent, the response status and body, and any error \u2014 so you can debug and replay with confidence.<\/p><\/div>\r\n    <div style=\"overflow-x:auto\">\r\n    <table class=\"logs\">\r\n      <thead><tr><th>Time<\/th><th>Event<\/th><th>Status<\/th><th>Response<\/th><th>Attempt<\/th><\/tr><\/thead>\r\n      <tbody>\r\n        <tr><td>12:00:10<\/td><td>message_status_updated<\/td><td><span class=\"st ok\">200<\/span><\/td><td>{ \"ok\": true }<\/td><td>1 \/ 3<\/td><\/tr>\r\n        <tr><td>12:00:05<\/td><td>message_sent<\/td><td><span class=\"st ok\">200<\/span><\/td><td>{ \"ok\": true }<\/td><td>1 \/ 3<\/td><\/tr>\r\n        <tr><td>12:00:00<\/td><td>message_received<\/td><td><span class=\"st ok\">200<\/span><\/td><td>OK<\/td><td>1 \/ 3<\/td><\/tr>\r\n        <tr><td>09:14:00<\/td><td>campaign_completed<\/td><td><span class=\"st err\">503<\/span><\/td><td>Service Unavailable<\/td><td>retrying \u00b7 2 \/ 3<\/td><\/tr>\r\n      <\/tbody>\r\n    <\/table>\r\n    <\/div>\r\n    <p class=\"subtle\">Each log row stores <span class=\"ic\">event<\/span>, <span class=\"ic\">payload<\/span>, <span class=\"ic\">response_status<\/span>, <span class=\"ic\">response_body<\/span> and <span class=\"ic\">error<\/span>. A 5xx or timeout is retried automatically with backoff.<\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- FINAL -->\r\n<section style=\"padding-top:0\">\r\n  <div class=\"wrap\">\r\n    <div class=\"final-band\">\r\n      <div>\r\n        <h2>Wire WhatsPing into your stack<\/h2>\r\n        <p>Create a webhook, verify the signature, and start reacting to events in real time.<\/p>\r\n      <\/div>\r\n      <div class=\"fcta\">\r\n        <a class=\"btn btn-orange\" href=\"https:\/\/app.whatsping.com\/register\">\ud83d\udd11 Get Your API Key<\/a>\r\n        <a class=\"btn btn-ghost-light\" href=\"#manage\">Create a Webhook<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n  <div class=\"wrap\">\r\n    <div class=\"foot-grid\">\r\n      <div class=\"foot-brand\">\r\n        <a href=\"\/\"><img decoding=\"async\" class=\"logo-img\" src=\"\/whatsping-site\/assets\/img\/logo-white.png\" alt=\"WhatsPing\"><\/a>\r\n        <p>One platform for WhatsApp marketing, sales &amp; support.<\/p>\r\n        <div class=\"foot-social\"><a href=\"#\" aria-label=\"Facebook\"><img decoding=\"async\" src=\"\/whatsping-site\/assets\/img\/icons\/facebook.png\" alt=\"Facebook\"><\/a><a href=\"#\" aria-label=\"Instagram\"><img decoding=\"async\" src=\"\/whatsping-site\/assets\/img\/icons\/instagram.png\" alt=\"Instagram\"><\/a><a href=\"#\" aria-label=\"LinkedIn\"><img decoding=\"async\" src=\"\/whatsping-site\/assets\/img\/icons\/linkedin.png\" alt=\"LinkedIn\"><\/a><a href=\"#\" aria-label=\"YouTube\"><img decoding=\"async\" src=\"\/whatsping-site\/assets\/img\/icons\/youtube.png\" alt=\"YouTube\"><\/a><\/div>\r\n      <\/div>\r\n      <div class=\"foot-col\"><h5>Product<\/h5><a href=\"\/features\/\">Features<\/a><a href=\"\/pricing\/\">Pricing<\/a><a href=\"\/integrations\/\">Integrations<\/a><a href=\"\/blog\/\">Blog<\/a><\/div>\r\n      <div class=\"foot-col\"><h5>Company<\/h5><a href=\"\/about-us\/\">About Us<\/a><a href=\"\/careers\/\">Careers<\/a><a href=\"\/partners\/\">Partners<\/a><a href=\"\/contact\/\">Contact<\/a><\/div>\r\n      <div class=\"foot-col\"><h5>Developers<\/h5><a href=\"\/api\/\">API Docs<\/a><a href=\"\/webhooks\/\">Webhooks<\/a><a href=\"#\">Status<\/a><a href=\"#\">Changelog<\/a><\/div>\r\n      <div class=\"foot-col\"><h5>Resources<\/h5><a href=\"#\">Help Center<\/a><a href=\"#\">Templates<\/a><a href=\"#\">Case Studies<\/a><a href=\"\/privacy-policy\/\">Privacy<\/a><\/div>\r\n    <\/div>\r\n    <div class=\"foot-bottom\"><span>\u00a9 2026 WhatsPing<\/span><span><a href=\"\/privacy-policy\/\">Privacy<\/a> \u00b7 <a href=\"\/terms-of-service\/\">Terms<\/a><\/span><\/div>\r\n  <\/div>\r\n<\/footer>\n<script>\n  (function () {\n    var root = document.documentElement;\n    document.getElementById('themeBtn').addEventListener('click', function () {\n      var cur = root.getAttribute('data-theme') || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');\n      root.setAttribute('data-theme', cur === 'dark' ? 'light' : 'dark');\n    });\n    document.querySelectorAll('.tab').forEach(function (t) {\n      t.addEventListener('click', function () {\n        var lang = t.dataset.lang;\n        document.querySelectorAll('.tab').forEach(x => x.classList.toggle('active', x === t));\n        document.querySelectorAll('.code[data-lang]').forEach(c => c.hidden = (c.dataset.lang !== lang));\n      });\n    });\n    document.querySelectorAll('.catlist button').forEach(function (b) {\n      b.addEventListener('click', function () {\n        var c = b.dataset.cat;\n        document.querySelectorAll('.catlist button').forEach(x => x.classList.toggle('active', x === b));\n        document.querySelectorAll('.catpanel').forEach(p => p.classList.toggle('active', p.dataset.cat === c));\n      });\n    });\n\n    \/\/ ---- mobile hamburger menu ----\n    var hamb = document.getElementById('hambBtn');\n    var navEl = document.querySelector('.nav');\n    if (hamb && navEl) {\n      hamb.addEventListener('click', function () {\n        var open = navEl.classList.toggle('open');\n        hamb.setAttribute('aria-expanded', open ? 'true' : 'false');\n      });\n      navEl.querySelectorAll('.mobmenu a').forEach(function (a) {\n        a.addEventListener('click', function () {\n          navEl.classList.remove('open');\n          hamb.setAttribute('aria-expanded', 'false');\n        });\n      });\n    }\n\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-5552","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/whatsping.com\/bn\/wp-json\/wp\/v2\/pages\/5552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/whatsping.com\/bn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/whatsping.com\/bn\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/whatsping.com\/bn\/wp-json\/wp\/v2\/comments?post=5552"}],"version-history":[{"count":0,"href":"https:\/\/whatsping.com\/bn\/wp-json\/wp\/v2\/pages\/5552\/revisions"}],"wp:attachment":[{"href":"https:\/\/whatsping.com\/bn\/wp-json\/wp\/v2\/media?parent=5552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}