@nextchainx/orion-ai-agent

v1.0.4

Published

12 days ago

Orion AI Agent — Enterprise-ready AI customer support, booking, and workflow automation widget. Drop-in React component and standalone CDN bundle.

0High
0Medium
0Low

syedumerfayyaz

orion orion-ai nextchainx ai-agent agentic-ai chatbot customer-support appointment-booking saas-widget react-widget automation crm-integration business-automation

Overview

Orion AI Agent is a production-ready conversational AI system purpose-built for service businesses. It operates as a digital receptionist, booking manager, lead capture engine, support desk, and CRM collector — all inside one embeddable interface.

Drop it into any website or web application using a React component or a single CDN script tag. Configuration is driven by your Orion dashboard and can be overridden locally via props or options.

To activate Orion on your site, you need a valid appId. Contact NextChainX or visit orion.nextchainx.io to get started.

Key Capabilities

| Capability | Description | |:-----------|:------------| | AI-Powered Conversations | Natural language understanding that handles queries, qualifies leads, and resolves tickets autonomously. | | Lead Capture | Built-in info collector gathers name, email, phone, and custom fields — before or during the conversation. | | Appointment Booking | Real-time scheduling integrated into the chat flow. Customers book without leaving the widget. | | CRM Data Collection | Automatically structures interaction data and syncs to your pipeline. | | Automated Follow-Ups | Post-conversation actions, reminders, and notifications triggered by AI. | | Multi-Display Modes | Floating bubble, left panel, right panel, or full modal — adapts to your layout. | | Full Theming | Colors, logos, dark/light modes, positioning, and sizing — all configurable. | | React + CDN | First-class React component and a zero-dependency CDN bundle with React included. |

Installation

NPM

npm install @nextchainx/orion-ai-agent

Yarn

yarn add @nextchainx/orion-ai-agent

pnpm

pnpm add @nextchainx/orion-ai-agent

Quick Start — React

Basic

import { ChatWidget } from "@nextchainx/orion-ai-agent";

export default function App() {
  return <ChatWidget appId="your-app-id" />;
}

With Branding & Overrides

Props passed locally always override dashboard/API configuration values.

import { ChatWidget } from "@nextchainx/orion-ai-agent";

export default function App() {
  return (
    <ChatWidget
      appId="your-app-id"
      title="Acme Support"
      subtitle="We typically reply in under a minute"
      theme="dark"
      primaryColor="#6C63FF"
      position="bottom-left"
      floatingText="Chat with us"
      showTimestamp={true}
      customerInfoCollector={true}
    />
  );
}

With Event Handlers

import { ChatWidget } from "@nextchainx/orion-ai-agent";

export default function App() {
  const handleMessage = (message) => {
    console.log("Assistant responded:", message);
  };

  return (
    <ChatWidget
      appId="your-app-id"
      onOpen={() => console.log("Widget opened")}
      onClose={() => console.log("Widget closed")}
      onMessage={handleMessage}
    />
  );
}

Panel Mode (Always Visible)

<ChatWidget appId="your-app-id" displayMode="panel-left" />

Modal Mode

<ChatWidget appId="your-app-id" displayMode="modal" />

Quick Start — CDN (Plain HTML)

No build tools, no framework. React and ReactDOM are bundled inside the CDN build.

1 — Add the Script

<script src="https://cdn.jsdelivr.net/npm/@nextchainx/[email protected]/dist/cdn.min.js"></script>

2 — Initialize

<script>
  OrionAgent.init({ appId: "your-app-id" });
</script>

3 — Full Page Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Website</title>
</head>
<body>

  <h1>Welcome to My Business</h1>

  <script src="https://cdn.jsdelivr.net/npm/@nextchainx/[email protected]/dist/cdn.min.js"></script>
  <script>
    OrionAgent.init({
      appId: "your-app-id",
      theme: "light",
      primaryColor: "#0066FF",
      position: "bottom-right",
      floatingText: "Need help?",
      customerInfoCollector: true,
    });
  </script>

</body>
</html>

CDN API Methods

| Method | Description | |:-------|:------------| | OrionAgent.init({ appId, ...options }) | Mount the widget with configuration | | OrionAgent.update({ ...options }) | Re-render with updated options | | OrionAgent.destroy() | Unmount and fully remove the widget |

Configuration Reference

Required

| Prop | Type | Description | |:-----|:-----|:------------| | appId | string | Required. Your unique Orion business/app identifier. Contact NextChainX or visit orion.nextchainx.io to obtain your appId. |

Branding & UI

| Prop | Type | Description | |:-----|:-----|:------------| | title | string | Header title displayed at the top of the widget | | subtitle | string | Secondary text shown beneath the title | | logo | string | URL to your brand logo image | | primaryColor | string | Main accent color (hex, rgb, hsl) | | theme | "light" | "dark" | Widget color scheme | | floatingBgColor | string | Background color of the floating trigger button | | textColor | string | Primary text color inside the widget | | floatingText | string | Label displayed next to the floating icon when the widget is closed |

Placement & Sizing

| Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | position | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-right" | Screen position of the widget | | buttonSize | number | 56 | Floating button diameter in pixels | | zIndex | number | 9999 | CSS z-index stacking order |

Input & Message UI

| Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | placeholder | string | "Type a message…" | Placeholder text in the input field | | showTimestamp | boolean | false | Display timestamps on each message |

Toggles & Behavior

| Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | showNotificationDot | boolean | true | Show a notification indicator before the widget is first opened | | customerInfoCollector | boolean | false | Enable the lead capture form that appears before chat begins | | displayMode | "floating" | "panel-left" | "panel-right" | "modal" | "floating" | Widget display mode (see Display Modes) |

Display Modes

Orion supports four distinct display modes to fit different page layouts and UX requirements.

| Mode | Behavior | |:-----|:---------| | floating | Corner-positioned chat window with wave border. Click the bubble to toggle open/close. | | panel-left | Full-height sidebar that slides in from the left edge of the viewport. | | panel-right | Full-height sidebar that slides in from the right edge of the viewport. | | modal | Centered overlay with blurred backdrop and wave border. |

Usage Examples

React:

// Floating (default)
<ChatWidget appId="your-app-id" displayMode="floating" />

// Left panel
<ChatWidget appId="your-app-id" displayMode="panel-left" />

// Right panel
<ChatWidget appId="your-app-id" displayMode="panel-right" />

// Modal
<ChatWidget appId="your-app-id" displayMode="modal" />

CDN:

// Initialize with a mode
OrionAgent.init({ appId: "your-app-id", displayMode: "panel-right" });

// Switch modes at runtime
OrionAgent.update({ displayMode: "modal" });

Lead Capture & Customer Info Collection

Enable customerInfoCollector to present a structured intake form before the conversation begins. This captures visitor information and feeds it directly into your pipeline.

<ChatWidget
  appId="your-app-id"
  customerInfoCollector={true}
/>

What it collects:

Name (required)
Email, Phone, and any additional custom fields configured in your Orion dashboard

How it works:

Visitor opens the widget and sees the info collection form.
After submitting, the AI conversation begins with full context about the visitor.
Collected data is automatically synced to your CRM and linked to the conversation transcript.

Ideal for:

Pre-qualifying leads before they engage with AI
Capturing contact information for sales follow-up
Routing conversations based on customer segment or intent
Building your pipeline passively around the clock

Appointment Booking

Orion handles real-time appointment scheduling directly within the chat flow. Customers can browse available slots, select a date and time, and confirm their booking — all without leaving the widget.

Booking configuration is managed through your Orion dashboard, including:

Available services and session durations
Business hours and availability windows
Confirmation messages and reminders
Calendar integrations (Google Calendar, Outlook, and more)

No additional code or props are required. Once booking is enabled in your dashboard, the AI agent handles scheduling as a natural part of the conversation.

Callbacks & Events

Use callbacks to integrate Orion with your application logic — analytics, state management, CRM triggers, or custom workflows.

| Prop | Type | Triggered When | |:-----|:-----|:---------------| | onOpen | () => void | The widget opens | | onClose | () => void | The widget closes | | onMessage | (message) => void | The assistant sends a final response message |

Example — Analytics Integration

<ChatWidget
  appId="your-app-id"
  onOpen={() => analytics.track("orion_widget_opened")}
  onClose={() => analytics.track("orion_widget_closed")}
  onMessage={(msg) => analytics.track("orion_message_received", { message: msg })}
/>

Use Cases

| Scenario | How Orion Handles It | |:---------|:---------------------| | Missed calls | AI answers instantly, 24/7 — no more voicemail backlogs | | Delayed WhatsApp replies | Immediate automated responses with full business context | | Manual scheduling | Real-time booking embedded directly in the chat widget | | Fragmented support channels | One widget replaces email, phone, forms, and live chat | | Lead qualification | Collects info, qualifies intent, and routes to your team | | Service inquiries | Delivers accurate answers from your configured knowledge base | | Post-interaction follow-ups | Automated reminders, confirmations, and re-engagement triggers | | CRM data entry | Structured conversation data flows into your pipeline automatically |

Getting Your App ID

appId is required to activate Orion AI Agent on your website. Without a valid appId, the widget will not initialize.

To obtain your appId, contact the NextChainX team or sign up through the Orion product page:

| Channel | Link | |:--------|:-----| | 🚀 Product Page | orion.nextchainx.io | | 🌐 Website | nextchainx.io | | ✉️ Email | [email protected] |

Requirements

React (NPM)

| Requirement | Version / Details | |:------------|:------------------| | React | >= 17 | | ReactDOM | >= 17 | | appId | Required — obtain from NextChainX | | Backend | Must be reachable at the configured base URL |

CDN

| Requirement | Details | |:------------|:--------| | appId | Required — obtain from NextChainX | | Dependencies | None — React and ReactDOM are bundled in the CDN build | | Backend | Must be reachable at the configured base URL |

Browser Support

| Browser | Support | |:--------|:--------| | Chrome | ✅ Latest 2 versions | | Firefox | ✅ Latest 2 versions | | Safari | ✅ Latest 2 versions | | Edge | ✅ Latest 2 versions | | Mobile Safari (iOS) | ✅ | | Chrome Mobile (Android) | ✅ | | Samsung Internet | ✅ |

FAQ

Support

Need help integrating or have questions about your deployment?

| Channel | Link | |:--------|:-----| | ✉️ Email | [email protected] | | 🚀 Product Page | orion.nextchainx.io | | 🌐 Website | nextchainx.io |

License

See LICENSE for full terms.