@horneross/embeds

Official embed widgets for Horneross AI agents - chatbox and form integrations.

Installation

npm install @horneross/embeds

or with pnpm:

pnpm add @horneross/embeds

Usage

Chatbox Widget

Add the chatbox widget to your website:

<!-- Add this script tag to your HTML -->
<script src="https://unpkg.com/@horneross/embeds@latest/dist/chatbox/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@horneross/embeds@latest/dist/chatbox/index.css">

<script>
  // Initialize the chatbox
  window.hornerossEmbeds.initChatbox({
    agentId: 'your-agent-id',
    apiUrl: 'https://your-api-url.com',
    // Optional configuration
    theme: 'light', // or 'dark'
    position: 'bottom-right', // or 'bottom-left'
  });
</script>

Form Widget

Embed a form on your website:

<!-- Add this script tag to your HTML -->
<script src="https://unpkg.com/@horneross/embeds@latest/dist/form/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@horneross/embeds@latest/dist/form/index.css">

<script>
  // Initialize the form
  window.hornerossEmbeds.initForm({
    formId: 'your-form-id',
    containerId: 'form-container',
    apiUrl: 'https://your-api-url.com',
  });
</script>

CDN Usage

You can use the package directly from unpkg CDN without installation:

<!-- Chatbox -->
<script src="https://unpkg.com/@horneross/[email protected]/dist/chatbox/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@horneross/[email protected]/dist/chatbox/index.css">

<!-- Form -->
<script src="https://unpkg.com/@horneross/[email protected]/dist/form/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@horneross/[email protected]/dist/form/index.css">

Configuration Options

Chatbox Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | agentId | string | required | Your Horneross agent ID | | apiUrl | string | required | API endpoint URL | | theme | 'light' \| 'dark' | 'light' | Widget theme | | position | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Widget position | | primaryColor | string | '#0066FF' | Primary brand color | | welcomeMessage | string | - | Custom welcome message |

Form Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | formId | string | required | Your form ID | | containerId | string | required | DOM element ID to mount the form | | apiUrl | string | required | API endpoint URL | | onSubmit | function | - | Callback after successful submission |

Examples

Custom Styled Chatbox

window.hornerossEmbeds.initChatbox({
  agentId: 'agent-123',
  apiUrl: 'https://api.horneross.com',
  theme: 'dark',
  position: 'bottom-left',
  primaryColor: '#FF6B6B',
  welcomeMessage: 'Hi! How can I help you today?',
});

Form with Callback

window.hornerossEmbeds.initForm({
  formId: 'form-456',
  containerId: 'my-form-container',
  apiUrl: 'https://api.horneross.com',
  onSubmit: (data) => {
    console.log('Form submitted:', data);
    alert('Thank you for your submission!');
  },
});

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Package Size

• Chatbox: ~1.5 MB (JS) + 141 KB (CSS)
• Form: ~856 KB (JS) + 141 KB (CSS)
• Gzipped: ~724 KB total

License

MIT

Author

Javier Gonzalo Arrayaran

Links

• GitHub Repository
• Documentation
• Support

Changelog

1.0.230

• Latest stable release
• Production-ready chatbox and form widgets
• Full TypeScript support
• Tailwind CSS styling