@ainnov8/convai-widget-embed
v1.0.1
Published
Ainnov8 embeddable web component widget for AI agent interactions
Maintainers
wit-softwareReadme
@ainnov8/convai-widget-embed
Embeddable web component widget for Ainnov8 AI agent interactions.
Installation
Via npm (for bundlers)
npm install @ainnov8/convai-widget-embedVia CDN (for script tag)
<script src="https://unpkg.com/@ainnov8/convai-widget-embed@latest/dist/umd/ainnov8-widget.js"></script>Usage
HTML (Script Tag)
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@ainnov8/convai-widget-embed@latest/dist/umd/ainnov8-widget.js"></script>
</head>
<body>
<!-- Declarative usage -->
<ainnov8-widget agent-id="your-agent-id"></ainnov8-widget>
<!-- Or programmatic usage -->
<script>
const widget = Ainnov8.create("your-agent-id", document.body);
</script>
</body>
</html>ES Modules
import Ainnov8 from "@ainnov8/convai-widget-embed";
// Create widget programmatically
const widget = Ainnov8.create("your-agent-id", document.getElementById("container"));
// Or use the custom element directly
const element = document.createElement("ainnov8-widget");
element.setAttribute("agent-id", "your-agent-id");
document.body.appendChild(element);React
import "@ainnov8/convai-widget-embed";
function App() {
return (
<div>
<ainnov8-widget agent-id="your-agent-id" />
</div>
);
}For TypeScript, add type declarations:
// global.d.ts or in your component file
declare namespace JSX {
interface IntrinsicElements {
"ainnov8-widget": React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement> & {
"agent-id"?: string;
},
HTMLElement
>;
}
}API
HTML Attributes
| Attribute | Type | Description |
| ---------- | -------- | ---------------------------------------------------- |
| agent-id | string | Required. The unique identifier for the AI agent |
JavaScript API
// Create a widget
const widget = Ainnov8.create(agentId, container?, config?);
// Get all widget instances
const widgets = Ainnov8.getInstances();
// Destroy a widget
Ainnov8.destroy(widget);
// Configure a widget instance
widget.configure({
onReady: () => console.log('Widget ready!'),
onError: (error) => console.error('Widget error:', error),
});
// Access properties
console.log(widget.agentId);
widget.agentId = 'new-agent-id';Configuration Options
interface WidgetConfig {
agentId: string;
onReady?: () => void;
onError?: (error: Error) => void;
}Browser Support
- Chrome 80+
- Firefox 75+
- Safari 13.1+
- Edge 80+
The widget uses Shadow DOM for style encapsulation, which requires modern browser support.
License
MIT