"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[1730],{4405:(e,n,t)=>{t.d(n,{A:()=>s});t(6540);var o=t(9136),r=t(4848);function i(e){let{children:n,fallback:t}=e;return(0,o.A)()?(0,r.jsx)(r.Fragment,{children:n?.()}):t??null}function s(e){let{children:n}=e;return(0,r.jsx)(i,{children:()=>{const e=function(){return"undefined"==typeof window?"":window.location.hostname}();if("function"==typeof n){const t=n(e);return(0,r.jsx)("div",{className:"markdown markdown--section",children:t})}return(0,r.jsx)("code",{children:e})}})}},5895:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>l,frontMatter:()=>a,metadata:()=>o,toc:()=>h});const o=JSON.parse('{"id":"webhook/formdata","title":"FormData","description":"Webhook pushes each user-submitted form information to your CRM or other app in real time in JSON format. In your webhook, you can save the information to your database, trigger an email or any other action.","source":"@site/developer/webhook/002.formdata.md","sourceDirName":"webhook","slug":"/webhook/formdata","permalink":"/guides/developer/webhook/formdata","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":101,"frontMatter":{"sidebar_position":101},"sidebar":"sidebar","previous":{"title":"Triggering IPs","permalink":"/guides/developer/webhook/trigger-ip"}}');var r=t(4848),i=t(8453),s=(t(4405),t(8175));const a={sidebar_position:101},c="FormData",d={},h=[{value:"Setting up a Webhook",id:"setting-up-a-webhook",level:2},{value:"Receiving Endpoint",id:"receiving-endpoint",level:2},{value:"X-Webhook-Signature",id:"x-webhook-signature",level:2},{value:"Listening for form submissions",id:"listening-for-form-submissions",level:2},{value:"Error retry",id:"error-retry",level:2}];function u(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"formdata",children:"FormData"})}),"\n",(0,r.jsx)(n.p,{children:"Webhook pushes each user-submitted form information to your CRM or other app in real time in JSON format. In your webhook, you can save the information to your database, trigger an email or any other action."}),"\n",(0,r.jsx)(n.h2,{id:"setting-up-a-webhook",children:"Setting up a Webhook"}),"\n",(0,r.jsx)(n.p,{children:"To set up a Webhook:"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsxs)(n.li,{children:["Log on to ",(0,r.jsx)(s.A,{})," and click setting."]}),"\n",(0,r.jsx)(n.li,{children:"Click the webhook menu"}),"\n",(0,r.jsx)(n.li,{children:"Input the webhook URL of the Endpoint you configured in the Webhook tab."}),"\n",(0,r.jsx)(n.li,{children:"click save."}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Once the webhook URL is entered, the webhook Sign Key is automatically generated. Copy and save it if you wish to use it to ensure the request is from ezsite.ai. Another way is to set our ",(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.a,{href:"trigger-ip",children:"Trigger IPs"})})," in your whitelist."]}),"\n",(0,r.jsx)(n.h2,{id:"receiving-endpoint",children:"Receiving Endpoint"}),"\n",(0,r.jsxs)(n.p,{children:["Gain confidence in the authenticity of your webhooks when you use a webhook signing key that mentioned above, a unique secret key shared between your application and ",(0,r.jsx)(s.A,{}),", to verify the events sent to your endpoints. The webhook signing key will produce the",(0,r.jsx)(n.code,{children:"X-Webhook-Signature"}),", which you can use to compare against an expected webhook signature, to verify events from ",(0,r.jsx)(s.A,{}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"x-webhook-signature",children:"X-Webhook-Signature"}),"\n",(0,r.jsxs)(n.p,{children:["When ",(0,r.jsx)(s.A,{})," sends your app a webhook, it will include the",(0,r.jsx)(n.code,{children:"X-Webhook-Signature"})," header in the following format:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"X-Webhook-Signature: t=1492774577,v1=5257a869e7ecebeda32affa62cdca3fa51cad7e77a0e56ff536d0ce8e108d8bd\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Compare the ",(0,r.jsx)(n.code,{children:"X-Webhook-Signature"}),", prefixed by ",(0,r.jsx)(n.code,{children:"v1="}),", to the expected signature. If they match, then you can trust that the event payload was issued by ",(0,r.jsx)(s.A,{})," and has not been tampered with."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-JavaScript",children:"const crypto = require('crypto');\n\n// Your application's webhook signing key\nconst webhookSigningKey = ({}).WEBHOOK_SIGNING_KEY;\n\n// Extract the timestamp and signature from the header\nconst newoaksSignature = req.get('X-Webhook-Signature');\nconst { t, signature } = newoaksSignature.split(',').reduce((acc, currentValue) => {\n    const [key, value] = currentValue.split('=');\n\n    if (key === 't') {\n    // UNIX timestamp\n    acc.t = value;\n    }\n\n    if (key === 'v1') {\n    acc.signature = value\n    }\n\n    return acc;\n}, {\n    t: '',\n    signature: ''\n});\n\nif (!t || !signature) throw new Error('Invalid Signature');\n\n// Create the signed payload by concatenating the timestamp (t), the character '.' and the request body's JSON payload.\nconst data = t + '.' + JSON.stringify(req.body);\n\nconst expectedSignature = crypto.createHmac('sha256', webhookSigningKey).update(data, 'utf8').digest('hex');\n\n// Determine the expected signature by computing an HMAC with the SHA256 hash function.\n\nif (expectedSignature !== signature) {\n    // Signature is invalid!\n    throw new Error('Invalid Signature');\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"listening-for-form-submissions",children:"Listening for form submissions"}),"\n",(0,r.jsx)(n.p,{children:"When an event occurs, it is notified to your configured webhook URL. Push any new formdata immediately,"}),"\n",(0,r.jsx)(n.p,{children:"Notification Details - HTTP POST Request"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Method"}),(0,r.jsx)(n.th,{children:"POST"})]})}),(0,r.jsx)(n.tbody,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Content-Type"}),(0,r.jsx)(n.td,{children:"application/json"})]})})]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"JSON Body"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-JSON",children:'{\n    // string - Project Name\n    "ProjectName": "Market survey questionnaire",\n    // long - UTC time zone timestamp\n    "Timestamp": 1741770951,\n    // string - Data source url\n    "Source": "https://ezsite.ai",\n    // string - Submitted form table name\n    "TableName": "contact_submissions",\n    // object - Submitted form content\n    "FormData": {...}\n}\n'})}),"\n",(0,r.jsx)(n.h2,{id:"error-retry",children:"Error retry"}),"\n",(0,r.jsxs)(n.p,{children:["Data response: ",(0,r.jsx)(n.code,{children:'{"status":"success"}'})," or ",(0,r.jsx)(n.code,{children:'{"status":"Success: test request received"}'})," (case-sensitive,the return value required for a successful callback), returning other values is considered a failure. After failure, retry within 1 minute and 3 minutes."]})]})}function l(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},8175:(e,n,t)=>{t.d(n,{A:()=>r});t(6540);var o=t(4848);function r(){return(0,o.jsx)("code",{children:"EZsite"})}},8453:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>a});var o=t(6540);const r={},i=o.createContext(r);function s(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]);