# @horneross/embeds

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

## Installation

```bash
npm install @horneross/embeds
```

or with pnpm:

```bash
pnpm add @horneross/embeds
```

## Usage

### Chatbox Widget

Add the chatbox widget to your website:

```html
<!-- 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:

```html
<!-- 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:

```html
<!-- Chatbox -->
<script src="https://unpkg.com/@horneross/embeds@1.0.230/dist/chatbox/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@horneross/embeds@1.0.230/dist/chatbox/index.css">

<!-- Form -->
<script src="https://unpkg.com/@horneross/embeds@1.0.230/dist/form/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@horneross/embeds@1.0.230/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

```javascript
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

```javascript
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](https://github.com/)
- [Documentation](https://horneross.com/docs)
- [Support](https://horneross.com/support)

## Changelog

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