@bhupendra1011/convo-ai-widget-embed
v0.1.0
Published
Embeddable conversational AI widget for AppBuilder
Downloads
15
Maintainers
Readme
@bhupendra1011/convo-ai-widget-embed
Embeddable conversational AI widget for AppBuilder. Add conversational AI agents to any website with a simple HTML snippet.
Installation
CDN (Quick Start)
<script src="https://unpkg.com/@bhupendra1011/convo-ai-widget-embed@latest"></script>
<appbuilder-agent agent-id="YOUR_AGENT_ID"></appbuilder-agent>npm
npm install @bhupendra1011/convo-ai-widget-embedimport '@bhupendra1011/convo-ai-widget-embed';Usage
Basic Embedding
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<!-- Add the widget -->
<appbuilder-agent agent-id="3b3947bb-ee5e-4c06-baed-70dc3e82b7b1"></appbuilder-agent>
<!-- Load the SDK -->
<script src="https://unpkg.com/@bhupendra1011/convo-ai-widget-embed@latest"></script>
</body>
</html>Attributes
| Attribute | Type | Required | Description |
|-----------|------|----------|-------------|
| agent-id | string | Yes | Unique agent identifier (UUID) |
Features
- ✅ Framework-agnostic Web Component
- ✅ Zero runtime dependencies
- ✅ Lightweight bundle
- ✅ Shadow DOM encapsulation
- ✅ TypeScript with strict mode
Browser Support
- Chrome 54+
- Firefox 63+
- Safari 10.1+
- Edge 79+
Development
Prerequisites
- Node.js >= 18.0.0
- pnpm >= 8.0.0
Setup
# Install dependencies
pnpm install
# Start dev server
pnpm dev
# Build for production
pnpm build
# Type check
pnpm check-types
# Lint
pnpm lintProject Structure
packages/convo-ai-widget-embed/
├── src/
│ ├── index.ts # Entry point
│ └── widget.ts # Custom element implementation
├── dist/ # Build output
│ ├── convo-ai-widget.js
│ └── index.d.ts
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.mdLicense
MIT
Support
- Issues: GitHub Issues
- Documentation: Full Documentation
