zidget

A customizable embeddable widget for React applications.

Installation

npm install zidget
# or
yarn add zidget
# or
pnpm add zidget

Usage

Basic Usage

import React from 'react';
import { WidgetContainer } from 'zidget';
import 'zidget/dist/style.css'; // Import styles

function App() {
  return (
    <WidgetContainer 
      clientKey="your-client-key" 
      orbId="your-orb-id" 
    />
  );
}

export default App;

Widget Components

The package exports several components that you can use to build your own custom widget:

• WidgetContainer: The main container component that provides context
• Widget: The widget component that renders either a ZBox or the widget content
• ZBox: A component with dynamic island UI and audio visualization
• DynamicIsland: A component for creating dynamic UI elements
• OrbVisualizer: A component for visualizing audio

Context and Hooks

The package also exports context and hooks that you can use to manage state:

import { WidgetContext, useStore } from 'zidget';

function CustomWidget() {
  const { isOpen, setIsOpen, clientKey, orbId } = React.useContext(WidgetContext);
  const { setRealtime, setOrb } = useStore();
  
  // Your custom widget implementation
}

Styling

The package includes default styles, but you can customize them by overriding the CSS variables or classes.

API Reference

WidgetContainer

The main container component for the widget.

Props

• clientKey (string, required): The client key for authentication
• orbId (string, required): The orb ID for configuration

Widget

The widget component that renders either a ZBox or the widget content.

ZBox

A component with dynamic island UI and audio visualization.

DynamicIsland

A component for creating dynamic UI elements.

Props

• id (string, required): The ID for the dynamic island
• children (ReactNode): The content to render inside the dynamic island

OrbVisualizer

A component for visualizing audio.

Props

• state (AgentState): The state to animate the orb for
• trackRef (TrackReferenceOrPlaceholder): Audio track reference
• options (OrbVisualizerOptions): Options for the orb visualizer
• colors (string[]): Colors for the gradient orb

License

MIT