88 Embeddable Widgets

Production-grade observability, architecture and DevOps widgets as Web Components. Drop one script tag into any HTML page, WordPress site, React app or Flutter WebView.

88Widgets
9Categories
4Platforms
0Dependencies
index.html 
<!-- 1. Add the script -->
<script src="https://cdn.syngetiq.com/widgets/v1/syngetiq-widgets.js"></script>

<!-- 2. Use any of the 88 widgets -->
<sq-requests-counter theme="dark" refresh="3000"></sq-requests-counter>
<sq-deployment-badge service="api-gateway"></sq-deployment-badge>
<sq-security-score endpoint="/api/security/score"></sq-security-score>
<script src="https://cdn.syngetiq.com/widgets/v1/syngetiq-widgets.js"></script>
<sq-requests-counter theme="dark" refresh="3000"></sq-requests-counter>
// In your React component:
declare namespace JSX {
  interface IntrinsicElements { 'sq-requests-counter': Record<string, unknown> }
}
export function Dashboard() {
  return <><sq-requests-counter theme="dark" refresh="3000" /></>
}
// vite.config.ts — tell Vue to skip sq-* elements:
vue({ template: { compilerOptions: { isCustomElement: tag => tag.startsWith('sq-') } } })
// Then in your template:
<sq-requests-counter theme="dark" />
// Install the plugin or add to functions.php:
function syngetiq_enqueue() {
  wp_enqueue_script('syngetiq-widgets', 'https://cdn.syngetiq.com/widgets/v1/syngetiq-widgets.js');
}
add_action('wp_enqueue_scripts', 'syngetiq_enqueue');
// Then in any template or post:
[syngetiq_widget id="requests-counter" theme="dark"]
// pubspec.yaml
dependencies:
  webview_flutter: ^4.0.0

// dart
WebViewController()
  ..loadHtmlString('''
    <script src="https://cdn.syngetiq.com/widgets/v1/syngetiq-widgets.js"></script>
    <sq-requests-counter theme="dark"></sq-requests-counter>
  ''');
GET /api/v1/widgets              → list all 88 widgets
GET /api/v1/widgets/:id          → widget metadata + live data
GET /api/v1/widgets/:id/embed    → HTML embed snippet
WS  /api/v1/widgets/:id/stream  → live data stream

Example:
curl https://api.syngetiq.com/v1/widgets/requests-counter
📊 KPI & Metrics 12 widgets
<sq-requests-counter>
<sq-error-rate>
<sq-latency-p99>
<sq-uptime-badge>
<sq-throughput-chart>
<sq-active-users>
<sq-cost-meter>
<sq-revenue-ticker>
<sq-conversion-funnel>
<sq-apdex-score>
<sq-response-time>
<sq-queue-depth>
🚀DevOps & Infrastructure12 widgets
<sq-deployment-badge>
<sq-build-status>
<sq-kubernetes-status>
<sq-pod-count>
<sq-cpu-gauge>
<sq-memory-gauge>
<sq-disk-gauge>
<sq-network-io>
<sq-container-health>
<sq-pipeline-progress>
<sq-rollout-tracker>
<sq-infrastructure-cost>
🔭Observability10 widgets
<sq-log-stream>
<sq-trace-waterfall>
<sq-alert-count>
<sq-error-log>
<sq-span-chart>
<sq-sli-gauge>
<sq-slo-status>
<sq-error-budget>
<sq-mttr-card>
<sq-incident-count>
🔒Security10 widgets
<sq-security-score>
<sq-cve-count>
<sq-compliance-badge>
<sq-threat-level>
<sq-secret-scan>
<sq-dependency-risk>
<sq-auth-events>
<sq-firewall-events>
<sq-pentest-score>
<sq-gdpr-status>
🏛Architecture10 widgets
<sq-service-graph>
<sq-adr-count>
<sq-tech-debt-score>
<sq-arch-fitness>
<sq-api-health>
<sq-schema-version>
<sq-dependency-count>
<sq-cyclomatic-complexity>
<sq-service-coupling>
<sq-event-flow>
👥Team & Agile10 widgets
<sq-sprint-progress>
<sq-velocity-chart>
<sq-burndown-chart>
<sq-pr-count>
<sq-review-time>
<sq-team-capacity>
<sq-bug-count>
<sq-story-points>
<sq-blocked-items>
<sq-cycle-time>
📈Analytics & Business10 widgets
<sq-page-views>
<sq-dau-mau>
<sq-feature-adoption>
<sq-retention-rate>
<sq-session-duration>
<sq-bounce-rate>
<sq-funnel-drop>
<sq-cohort-analysis>
<sq-ab-results>
<sq-nps-score>
🤖AI & Machine Learning8 widgets
<sq-model-accuracy>
<sq-inference-latency>
<sq-drift-detector>
<sq-training-progress>
<sq-feature-importance>
<sq-prediction-volume>
<sq-ai-cost>
<sq-hallucination-rate>
💰Finance & Cost6 widgets
<sq-monthly-spend>
<sq-cost-trend>
<sq-budget-usage>
<sq-savings-opportunities>
<sq-roi-calculator>
<sq-chargeback>