@utilia-os/widget

Widget embebible de soporte para UTILIA OS.

Instalacion via CDN

La forma mas simple de usar el widget:

<script
  src="https://cdn.utilia.ai/widget/utilia-widget.js"
  data-utilia-widget
  data-base-url="https://os.utilia.ai/api"
  data-api-key="tu-api-key"
  data-user-id="user-123"
  data-user-email="[email protected]"
  data-user-name="Juan Perez"
  data-position="bottom-right"
  data-theme="light"
></script>

Instalacion via NPM

npm install @utilia-os/widget

Uso Programatico

import { initUtiliaWidget } from '@utilia-os/widget';

const widget = initUtiliaWidget({
  baseURL: 'https://os.utilia.ai/api',
  apiKey: 'tu-api-key',
  userId: 'user-123',
  userEmail: '[email protected]',
  userName: 'Juan Perez',
  position: 'bottom-right',
  theme: 'light',
  autoContext: true,
  onTicketCreated: (ticket) => {
    console.log('Ticket creado:', ticket.ticketKey);
  },
});

// Metodos disponibles
widget.open();
widget.close();
widget.showNewTicketForm();

Uso como Web Component

<utilia-support
  base-url="https://os.utilia.ai/api"
  api-key="tu-api-key"
  user-id="user-123"
  user-email="[email protected]"
  user-name="Juan Perez"
  position="bottom-right"
  theme="light"
></utilia-support>

Configuracion

| Opcion | Tipo | Requerido | Descripcion | |--------|------|-----------|-------------| | baseURL | string | Si | URL base de la API de UTILIA OS | | apiKey | string | Si | API Key de la aplicacion externa | | userId | string | Si | ID del usuario en tu sistema | | userEmail | string | No | Email del usuario | | userName | string | No | Nombre del usuario | | userMetadata | object | No | Metadatos adicionales | | position | 'bottom-right' | 'bottom-left' | No | Posicion del widget (default: bottom-right) | | theme | 'light' | 'dark' | 'auto' | No | Tema del widget (default: light) | | defaultCategory | string | No | Categoria por defecto para nuevos tickets | | defaultPriority | string | No | Prioridad por defecto para nuevos tickets | | autoContext | boolean | No | Capturar URL y browser info automaticamente | | onTicketCreated | function | No | Callback cuando se crea un ticket | | onError | function | No | Callback cuando ocurre un error |

Personalizacion de Estilos

El widget usa CSS Custom Properties que puedes sobrescribir:

utilia-support {
  --utilia-primary: #tu-color-principal;
  --utilia-primary-hover: #tu-color-hover;
  --utilia-bg: #ffffff;
  --utilia-bg-secondary: #f8fafc;
  --utilia-text: #1e293b;
  --utilia-text-secondary: #64748b;
  --utilia-border: #e2e8f0;
  --utilia-radius: 12px;
}

Variables Disponibles

| Variable | Default (light) | Descripcion | |----------|-----------------|-------------| | --utilia-primary | #2563eb | Color principal | | --utilia-primary-hover | #1d4ed8 | Color principal en hover | | --utilia-bg | #ffffff | Fondo principal | | --utilia-bg-secondary | #f8fafc | Fondo secundario | | --utilia-text | #1e293b | Color de texto | | --utilia-text-secondary | #64748b | Color de texto secundario | | --utilia-border | #e2e8f0 | Color de bordes | | --utilia-radius | 12px | Radio de bordes | | --utilia-shadow | ... | Sombra normal | | --utilia-shadow-lg | ... | Sombra grande |

Eventos

const widget = document.querySelector('utilia-support');

widget.addEventListener('widget:open', () => {
  console.log('Widget abierto');
});

widget.addEventListener('widget:close', () => {
  console.log('Widget cerrado');
});

widget.addEventListener('ticket:created', (e) => {
  console.log('Ticket creado:', e.detail.ticketKey);
});

Requisitos

• Navegador moderno con soporte para Web Components
• API Key valida de UTILIA OS

Licencia

MIT