Broken Duck Media Logo Broken Duck

About Services Products Resources

Webhook Integration Panel

Admin → Gold
💰 $2000

Configure outbound webhooks to trigger third-party workflows.

Technology iconTechnology iconTechnology icon

Overview: Webhook Integration Panel

Purpose

The Webhook Integration Panel empowers system administrators to seamlessly configure outbound webhooks. This module enables real-time communication between your application and third-party services, automating tasks without manual intervention.

Benefits

Usage Scenarios

This module is designed to be intuitive, allowing admins to manage complex integrations efficiently without extensive coding.

Add Webhook

Configure Trigger Conditions

Test Webhook

Monitor Webhook Health

Webhook Overview

Security Settings

Retry Policy

Webhook Integration Panel Documentation

This document provides technical details and code examples for integrating the Webhook Integration Panel module into your application.

1. FastAPI Endpoint Example

Below is an example of a FastAPI endpoint that handles creating new webhooks:

from fastapi import APIRouter, Depends, HTTPException
from typing import Optional, Dict, Any
from pydantic import BaseModel

router = APIRouter()

class WebhookSettings(BaseModel):
    url: str
    method: str = "POST"
    headers: Optional[Dict[str, str]] = None
    body: Optional[str] = None  # JSON string
    is_active: bool = True
    query_params: Optional[Dict[str, str]] = None
    request_timeout: Optional[int] = None

@router.post("/api/webhooks")
async def create_webhook(webhook_data: WebhookSettings):
    try:
        # Here you would typically save the webhook data to your database or storage
        return {"message": "Webhook created successfully", "data": webhook_data}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

2. React UI Component Example

This React component demonstrates a form for adding webhooks:

import React, { useState } from 'react';

interface WebhookConfig {
    url: string;
    method: string;
    headers?: Record<string, string>;
    body?: string;
    isActive: boolean;
    queryParams?: Record<string, string>;
    timeout?: number;
}

const WebhookForm = () => {
    const [webhookConfig, setWebhookConfig] = useState<WebhookConfig>({
        url: '',
        method: 'POST',
        isActive: true
    });

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            // Implement the POST request to your FastAPI endpoint here
            const response = await fetch('/api/webhooks', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(webhookConfig)
            });
            if (!response.ok) {
                throw new Error('Failed to create webhook');
            }
            console.log('Webhook created successfully');
        } catch (error) {
            console.error('Error:', error);
        }
    };

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        setWebhookConfig({
            ...webhookConfig,
            [e.target.name]: e.target.value
        });
    };

    return (
        <form onSubmit={handleSubmit} className="space-y-4">
            <div>
                <label htmlFor="url">URL</label>
                <input
                    type="text"
                    id="url"
                    name="url"
                    value={webhookConfig.url}
                    onChange={handleChange}
                    className="w-full p-2 border rounded"
                    required
                />
            </div>

            <div>
                <label htmlFor="method">HTTP Method</label>
                <select
                    id="method"
                    name="method"
                    value={webhookConfig.method}
                    onChange={handleChange}
                    className="w-full p-2 border rounded"
                >
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                    <option value="PUT">PUT</option>
                    <option value="DELETE">DELETE</option>
                </select>
            </div>

            {webhookConfig.method !== 'GET' && (
                <>
                    <div>
                        <label htmlFor="headers">Headers (JSON)</label>
                        <textarea
                            id="headers"
                            name="headers"
                            value={webhookConfig.headers || ''}
                            onChange={handleChange}
                            className="w-full p-2 border rounded"
                        />
                    </div>

                    <div>
                        <label htmlFor="body">Body (JSON)</label>
                        <textarea
                            id="body"
                            name="body"
                            value={webhookConfig.body || ''}
                            onChange={handleChange}
                            className="w-full p-2 border rounded"
                        />
                    </div>
                </>
            )}

            <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">
                Save Webhook
            </button>
        </form>
    );
};

export default WebhookForm;

3. Pydantic Data Schema Example

Here’s the Pydantic model defining the webhook configuration:

from pydantic import BaseModel
from typing import Optional, Dict, Any, Union

class WebhookSettings(BaseModel):
    url: str
    method: str = "POST"
    headers: Optional[Dict[str, str]] = None
    body: Optional[Union[str, Dict[str, Any]]] = None  # JSON string or dict
    is_active: bool = True
    query_params: Optional[Dict[str, str]] = None
    request_timeout: Optional[int] = None

    class Config:
        json_schema_extra = {
            "example": {
                "url": "https://third-party-api.com/webhook",
                "method": "POST",
                "headers": {"Content-Type": "application/json"},
                "body": '{"key": "value"}',
                "isActive": True
            }
        }

4. Usage Notes

This documentation provides a foundational setup for integrating webhooks using FastAPI and React with appropriate data models.

Webhook Integration Panel Documentation

Overview

The Webhook Integration Panel allows developers to configure outbound webhooks, enabling third-party workflows to be triggered automatically in response to specific events within the system.

Use Cases

  1. User Action Notifications: Trigger a webhook after a specific user action, such as account creation or password reset, to notify an external service like Slack or email.
  2. Data Synchronization: Automate the synchronization of data between systems by sending updates via webhook upon changes in the source system.
  3. Error Handling Notifications: Send notifications to an external monitoring service when errors occur, enhancing incident management.

Integration Tips

Configuration Options

ParameterTypeDescription
Webhook URLStringThe endpoint URL where the webhook will be sent.
HTTP MethodEnumThe HTTP method to use (e.g., GET, POST, PUT).
HeadersDictionaryCustom headers to include with the request (e.g., API keys or authentication tokens).
Payload FormatEnumThe format of the payload sent with the request (e.g., JSON, form-urlencoded).
Enable WebhookBooleanEnables or disables the webhook configuration.
Max Retry AttemptsIntegerMaximum number of retry attempts for failed requests.
Timeout (seconds)IntegerThe maximum time in seconds to wait for a response before timing out.
SSL VerificationBooleanWhether to verify SSL certificates during the request.

This documentation provides a comprehensive guide to configuring and integrating webhooks using the Webhook Integration Panel, ensuring reliable and secure third-party workflows.