Nebula

Health Check & Integration Guide

All systems operational

Widget Status

Loading...

CDN Status

Loading...

Last Updated

Loading...

Version

v0.1.5

🌐 CDN Performance Metrics

Overall Availability

--%

Avg Response Time

--ms

Cache Hit Rate

--%

Last Check

Never

Endpoint Status

Widget JS checking...
Widget CSS checking...
Analytics API checking...
Health Check checking...

📊 Performance Metrics

MOCK DATA
Load Success Rate
98.5%
↑ 2.3%
Avg. Time to Render
342ms
↓ 15ms
Widget Load Success Rate REAL DATA
Time to Render Distribution REAL DATA
Wallet Connect Success
87.2%
↓ 1.5%
Interaction Errors
23
↓ 8
Wallet Connection Success/Failure Rate MIXED DATA
Interaction Failures by Type REAL DATA
Total Widget Loads
12.5K
↑ 18%
Avg. RPC Latency
89ms
↓ 12ms
User Volume Over Time NO DATA
RPC/API Latency (p50/p95) NO DATA
CDN Performance & Availability NO DATA

🧪 Live Widget Test

📋 Integration Instructions

Basic HTML Embed

  1. Copy the embed code below
  2. Paste it into your HTML where you want the widget to appear
  3. The widget automatically adjusts its height - no JavaScript needed!
<div style="width: 100%;">
  <nebula-app></nebula-app>
</div>

<link rel="stylesheet" href="https://widget.starsystemlabs.com/widget-css/app.css">
<script>window.isNebulaWebComponent = true;</script>
<script src="https://widget.starsystemlabs.com/widget-js/chunk-vendors.js"></script>
<script src="https://widget.starsystemlabs.com/widget-js/app.js"></script>

iFrame Embed (Maximum Isolation)

  1. Use this method for maximum security and isolation
  2. Add the iframe code where you want the widget
  3. Add the resize handler script (required for iframe method)
  4. Note: iFrame still needs JavaScript for cross-window height communication
<iframe 
  id="nebula-widget-iframe" 
  src="https://widget.starsystemlabs.com"
  style="width: 100%; border: none; transition: height 0.3s ease;"
  height="600"
  sandbox="allow-scripts allow-same-origin allow-popups allow-forms">
</iframe>

<script>
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://widget.starsystemlabs.com') return;
  
  if (event.data.type === 'nebula-widget-resize') {
    const iframe = document.getElementById('nebula-widget-iframe');
    iframe.style.height = event.data.height + 'px';
  }
});
</script>
<script>
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://widget.starsystemlabs.com') return;
  
  if (event.data.type === 'nebula-widget-resize' && event.source) {
    const iframes = document.querySelectorAll('iframe[src*="widget.starsystemlabs.com"]');
    iframes.forEach(iframe => {
      if (iframe.contentWindow === event.source) {
        iframe.style.height = event.data.height + 'px';
      }
    });
  }
});
</script>

Webflow Integration

  1. Go to your Webflow project settings
  2. Navigate to the "Custom Code" section
  3. Paste the code below in the "Head Code" section
  4. Add an HTML Embed element where you want the widget
  5. Paste the widget embed code in the HTML Embed element
  6. Widget automatically adjusts height - no additional JavaScript needed!
<link rel="stylesheet" href="https://widget.starsystemlabs.com/widget-css/app.css">
<script>window.isNebulaWebComponent = true;</script>
<script src="https://widget.starsystemlabs.com/widget-js/chunk-vendors.js"></script>
<script src="https://widget.starsystemlabs.com/widget-js/app.js"></script>
<div style="width: 100%;">
  <nebula-app></nebula-app>
</div>

WordPress Integration

  1. Go to your WordPress admin dashboard
  2. Navigate to Appearance → Theme Editor
  3. Edit your theme's header.php file
  4. Add the header code before the closing </head> tag
  5. Use a Custom HTML block to add the widget code
  6. Widget automatically adjusts height - no additional JavaScript needed!
/* Add to Custom HTML Block */
<div style="width: 100%;">
  <nebula-app></nebula-app>
</div>

React/Vue Integration

  1. Add the script tags to your index.html
  2. Declare the custom element in your component
  3. Use the nebula-app tag - it auto-sizes!
  4. No height management needed - CSS handles everything
/* Add to public/index.html in <head> */
<link rel="stylesheet" href="https://widget.starsystemlabs.com/widget-css/app.css">
<script>window.isNebulaWebComponent = true;</script>
<script src="https://widget.starsystemlabs.com/widget-js/chunk-vendors.js"></script>
<script src="https://widget.starsystemlabs.com/widget-js/app.js"></script>
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'nebula-app': any;
    }
  }
}

function NebulaWidget() {
  return (
    <div style={{ width: '100%' }}>
      <nebula-app></nebula-app>
    </div>
  );
}
<template>
  <div style="width: 100%;">
    <nebula-app></nebula-app>
  </div>
</template>

<script>
export default {
  name: 'NebulaWidget'
};
</script>

Nebula Health Check | Star System Labs

For support, visit our GitHub