@zylosystems/zylo-floating-widget

A compact floating web component for customer-facing Zylo status and quick demo actions.

Features

• Small bottom-right floating widget with glass/blur background
• Top-left controls:
  • Red button: remove widget
  • Yellow button: minimize/expand widget
• Two visible action buttons:
  • Download Skills
  • Copy MCP Configuration
• Both action buttons open the demo request page:
  • https://tally.so/r/wgBlOO
• Small right-aligned footer status:
  • Powered by Zylosystems when status="green"
  • Not powered by Zylosystems when status="off"

Install

npm i @zylosystems/zylo-floating-widget

Next.js usage (recommended)

Use it in a Client Component:

"use client";

import { defineZyloFloatingWidget } from "@zylosystems/zylo-floating-widget";
import { useEffect } from "react";

export function ZyloFloatingStatusWidget({ online }: { online: boolean }) {
  useEffect(() => {
    defineZyloFloatingWidget();
  }, []);

  return <zylo-floating-widget status={online ? "green" : "off"} />;
}

defineZyloFloatingWidget() is recommended in Next.js client components to ensure safe custom-element registration.

Status Event (Mock Wiring)

You can update widget status from outside via a browser event:

"use client";

import { ZYLO_WIDGET_STATUS_EVENT, defineZyloFloatingWidget } from "@zylosystems/zylo-floating-widget";
import { useEffect } from "react";

export function ZyloWidgetMockEvents() {
  useEffect(() => {
    defineZyloFloatingWidget();

    let online = true;
    const id = setInterval(() => {
      window.dispatchEvent(
        new CustomEvent(ZYLO_WIDGET_STATUS_EVENT, {
          detail: { status: online ? "green" : "off" }
        })
      );
      online = !online;
    }, 2000);

    return () => clearInterval(id);
  }, []);

  return <zylo-floating-widget />;
}

Action Event Subscription

You can subscribe to action results (download-skills, copy-mcp-config, remove-widget):

"use client";

import { ZYLO_WIDGET_ACTION_EVENT, defineZyloFloatingWidget } from "@zylosystems/zylo-floating-widget";
import { useEffect } from "react";

export function ZyloWidgetActionListener() {
  useEffect(() => {
    defineZyloFloatingWidget();

    const onAction = (event: Event) => {
      const e = event as CustomEvent<{ action: string; success: boolean }>;
      console.log("widget action:", e.detail);
    };

    window.addEventListener(ZYLO_WIDGET_ACTION_EVENT, onAction);
    return () => window.removeEventListener(ZYLO_WIDGET_ACTION_EVENT, onAction);
  }, []);

  return <zylo-floating-widget status="green" />;
}

Attributes / API

• status="green" | "off": status indicator and footer text
• skills-url="https://...": reserved attribute (currently actions redirect to demo page)
• mcp-config="...": reserved attribute (currently actions redirect to demo page)
• window.dispatchEvent(new CustomEvent("zylo:status", { detail: { status } })): update status
• window.addEventListener("zylo:action", ...): subscribe to action events

Tag Name

• zylo-floating-widget