Webhook Integration

Webhooks allow you to send form submission data to external services and custom endpoints. This guide explains how to set up and use webhooks with Qivra Form Builder.

What are Webhooks?

Webhooks are automated messages sent from one app to another when something happens. With Qivra Form Builder, webhooks send data when:

• A form is submitted
• A specific condition is met

Why Use Webhooks?

Use Case	Description
Custom Integration	Connect to any service with an API
Data Sync	Send submissions to external databases
Automation	Trigger workflows in other tools
Custom Processing	Process data with your own code

Setting Up Webhooks

Step 1: Access Settings

1. Go to Qivra Form Builder
2. Click Settings in sidebar
3. Go to Integrations > Webhooks

Step 2: Add Webhook

1. Click Add Webhook
2. Enter your endpoint URL
3. Select trigger events
4. Configure settings
5. Click Save

Step 3: Test Webhook

1. Click Send Test
2. Verify receipt at your endpoint
3. Check payload format

Webhook Configuration

Endpoint URL

Your endpoint should:

• Accept POST requests
• Be publicly accessible
• Use HTTPS (recommended)
• Return 200 status on success

Trigger Events

Event	Description
Form Submitted	When any form is submitted
Specific Form	Only selected forms
Conditional	Based on form values

Secret Key

For security, include a secret:

1. Enter a secret key
2. Verify in your endpoint
3. Prevents unauthorized requests

Webhook Payload

Format

Webhooks send JSON data:

{
  "event": "form_submitted",
  "timestamp": "2024-01-15T10:30:00Z",
  "form": {
    "id": "abc123",
    "name": "Contact Form"
  },
  "submission": {
    "id": "sub456",
    "data": {
      "name": "John Doe",
      "email": "john@example.com",
      "message": "Hello!"
    },
    "metadata": {
      "ip_address": "192.168.1.1",
      "user_agent": "Mozilla/5.0...",
      "page_url": "https://store.com/contact"
    }
  },
  "shop": {
    "id": "shop123",
    "domain": "store.myshopify.com"
  }
}

Data Included

Field	Description
Event	Type of event
Timestamp	When it occurred
Form	Form details
Submission	All field values
Metadata	IP, user agent, URL
Shop	Store information

Per-Form Webhooks

Form-Specific Endpoints

Send different forms to different places:

1. Open form in Form Builder
2. Go to Settings > Integrations
3. Add webhook URL
4. Save form

Conditional Webhooks

Send only when conditions met:

IF "Order Value" > 1000
THEN trigger webhook to sales team

Common Integrations

Zapier

Connect to 5000+ apps:

1. Create Zapier webhook trigger
2. Copy webhook URL
3. Add to Qivra
4. Build automation in Zapier

Make (Integromat)

Visual automation builder:

1. Create scenario with webhook
2. Copy webhook URL
3. Add to Qivra
4. Design workflow

Google Sheets

Log submissions automatically:

1. Use Zapier or Make
2. Webhook triggers add row
3. All submissions logged

Custom API

Your own application:

1. Create endpoint
2. Parse JSON payload
3. Process as needed

Securing Webhooks

Verify Signature

Check requests are from Qivra:

const crypto = require('crypto');

function verifySignature(payload, signature, secret) {
  const expectedSignature = crypto
    .createHmac('sha256', secret)
    .update(JSON.stringify(payload))
    .digest('hex');

  return signature === expectedSignature;
}

Best Practices

Practice	Why
Use HTTPS	Encrypt data in transit
Verify signature	Confirm sender identity
Validate data	Check payload structure
Rate limit	Prevent abuse
Log requests	Debug issues

Handling Webhooks

Response Requirements

Your endpoint should:

Action	Details
Return 200	Acknowledge receipt
Respond quickly	Within 5 seconds
Process async	Don’t block response

Example Endpoint

Node.js example:

app.post('/webhook/qivra', (req, res) => {
  // Verify signature
  const signature = req.headers['x-qivra-signature'];
  if (!verifySignature(req.body, signature, SECRET)) {
    return res.status(401).send('Invalid signature');
  }

  // Acknowledge immediately
  res.status(200).send('OK');

  // Process asynchronously
  processSubmission(req.body);
});

Retry Behavior

Failed Deliveries

If webhook fails:

Attempt	Timing
1st	Immediately
2nd	1 minute
3rd	5 minutes
4th	15 minutes
5th	1 hour

Status Codes

Code	Meaning
2xx	Success, don’t retry
4xx	Client error, don’t retry
5xx	Server error, retry

Debugging Webhooks

Check Delivery

1. Go to webhook settings
2. View delivery history
3. See status and response

Common Issues

Issue	Solution
Timeout	Respond faster, process async
404 error	Check URL is correct
401 error	Verify authentication
SSL error	Check certificate

Testing Tools

Use these to test:

• RequestBin - Capture webhooks
• ngrok - Expose local server
• Postman - Send test requests

Video Tutorial

Play

Related Docs

• Slack Notifications
• Email Notification Settings
• View Form Submissions