Embed the SOC Dashboard

Welcome to the VPN Sentinel Developer Guide. Our platform is designed as a headless, multi-tenant security architecture. You can embed our live SOC dashboard directly into your own website using our Web Widget.

1. The Embeddable iFrame Widget

To integrate the dashboard into your company's web portal, copy and paste the following HTML snippet. Replace YOUR_API_KEY with the Tenant ID provided to you during registration.

<!-- VPN Sentinel Dashboard Widget -->
<iframe
    src="https://vpn-sentinel.com/dashboard?tenant=YOUR_API_KEY"
    width="100%"
    height="800px"
    style="border: none; border-radius: 12px;"
></iframe>

2. Dynamic White-Labeling (Custom Colors)

Don't want the default theme? You can dynamically theme the dashboard to match your company's brand colors by passing a primary hex code parameter in the URL (omit the # symbol).

<!-- Example: Theming the dashboard with Orange (#FF5733) -->
<iframe
    src="https://vpn-sentinel.com/dashboard?tenant=YOUR_API_KEY&primary=FF5733"
    width="100%"
    height="800px"
    style="border: none;"
></iframe>

CSS Variable Overrides

The URL parameter automatically hooks into our CSS root variables, injecting your primary color into the map markers, chart datasets, and card accents.

Data Isolation

Because you are passing your unique Tenant API Key, the backend guarantees that the dashboard will only visualize your company's traffic logs.

REST API Integration

If you prefer to build your own dashboard or integrate our ML engine directly into your firewalls, you can bypass the UI widget and use our headless REST API.

Traffic Ingestion Endpoint

POST /api/ingest?tenant=YOUR_API_KEY

Send your network flow statistics here. Our ML model will instantly classify the packet signature.

{
    "duration": 15.2,
    "fwd_pkt_len_mean": 850.0,
    "bwd_pkt_len_mean": 950.0,
    "flow_iat_mean": 0.08,
    "flow_iat_std": 0.04,
    "packets_per_sec": 400.0,
    "client_ip": "192.168.1.50"
}

Response Format

{
    "is_vpn": true,
    "vpn_protocol": "WireGuard",
    "confidence": 0.985,
    "explanation": "Protocol identified as WireGuard due to higher value of 'fwd_pkt_len_mean'."
}