StackLive Overlay Test Page

This page contains StackLive experience markers for testing the overlay

🔄 Runtime Status

Loaded:✗ No
Initialized:✗ No

Checking for runtime...

Testing Instructions

  1. 1.If you haven't already, install the StackLive extension
  2. 2.Look for the StackLive orb in the bottom-right corner
  3. 3.The orb should be pulsing to indicate an experience is available
  4. 4.Click the orb to launch the demo experience
  5. 5.Check the Runtime Status card above to verify the runtime loaded correctly

🏷️ Marker Detection

This element has a data-stacklive-experience attribute.

Test: The overlay should detect this marker

📦 Payload Detection

This element has an encoded payload in data-stacklive-payload.

Test: The overlay should decode and extract the manifest

🔗 URL Detection

StackLive URLs should be detected in page content.

https://demo.stacklive.dev/app/example
Test: The overlay should detect StackLive URLs

📡 Beacon Detection

Global contract beacons on window object.

🔍 Console Output

Open your browser's developer console to see overlay debug messages:

  • [StackLive] Initializing Universal Overlay...
  • [StackLive] Overlay initialized
  • [StackLive] Found X experience(s)
  • [StackLive] Launching experience: ...

📄 Example Usage

Add these markers to any page to make it detectable:

Simple Marker:

<div data-stacklive-experience="your-experience-id">
  Your content here
</div>

Meta Tag:

<meta name="stacklive:experience" content="your-experience-id" />

Encoded Payload:

<div data-stacklive-payload="STACKLIVE:base64EncodedManifest">
  Your content here
</div>

JavaScript Beacon:

window.__STACKLIVE_CONTRACT__ = {
  experienceId: "your-experience-id",
  launchUrl: "https://stacklive.dev/app/...",
  requiredCapabilities: [],
  contextBindings: {}
};