Widget API — embed en minutos

Tu agente de IA,
en cualquier web

Un script tag. Sin dependencias. Sin configuración compleja. Embeds un chat widget completamente funcional en tu sitio en menos de 3 minutos.

Crear cuenta gratis Ver cómo funciona

html · snippet

<script
  src="https://agentflowhub.com/widget.js"
  data-agent-id="mi-agente-id"
  data-token="wt_yyyyyyyyyy..."
  data-title="Soporte"
  data-color="#e41414"
  async
></script>

Sin dependencias

Un script tag es todo lo que necesitas. Sin npm, sin bundlers.

Multi-origen

Define los dominios autorizados y bloquea el resto automáticamente.

API programática

Control total desde JS: open(), close(), onMessageReceived, onOpen.

Personalizable

Colores, tema, posición, mensaje de bienvenida. Encaja con tu marca.

3 pasos para estar en vivo

Del registro al widget embebido sin fricciones.

Paso 01

Regístrate y obtén tu API Key

Un solo POST crea tu organización y devuelve el orgId y apiKey que necesitas para todo lo demás.

Respuesta

json

{
  "org": {
    "id": "org_a1b2c3d4",
    "apiKey": "afhub_xxxxxxxx...",
    "plan": "starter",
    "maxWidgets": 3
  }
}

bash

curl -X POST https://agentflowhub.com/api/orgs \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Acme Corp",
    "email": "hola@acme.com",
    "plan": "starter"
  }'

Paso 02

Crea un Widget

Asocia el widget a tu agente de IA y define los dominios que pueden usarlo.

Respuesta

json

{
  "widget": {
    "id": "wgt_11223344",
    "token": "wt_yyyyyyyyyy...",
    "remaining": 2
  }
}

bash

curl -X POST https://agentflowhub.com/api/orgs/org_a1b2c3d4/widgets \
  -H "X-Api-Key: afhub_xxxxxxxx..." \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Chat de soporte",
    "agentId": "mi-agente-id",
    "allowedOrigins": "https://acme.com"
  }'

Paso 03

Pega el snippet en tu web

Una sola línea antes del </body>. Cero dependencias, cero configuración extra.

html

<script
  src="https://agentflowhub.com/widget.js"
  data-agent-id="mi-agente-id"
  data-token="wt_yyyyyyyyyy..."
  data-title="Soporte Acme"
  data-color="#e41414"
  async
></script>

API programática (opcional)

Control total desde JavaScript — abre/cierra el chat, escucha eventos, integra con tu UI.

javascript

<script src="https://agentflowhub.com/widget.js" async></script>
<script>
  window.addEventListener('load', function () {
    const chat = window.AgentFlowhub.init({
      agentId: 'mi-agente-id',
      token:   'wt_yyyyyyyyyy...',
      host:    'https://agentflowhub.com',
      title:   'Soporte Acme',
      color:   '#e41414',
      theme:   'dark',
      onOpen:  function () { console.log('chat abierto'); },
      onMessageReceived: function (msg) { console.log('respuesta:', msg); },
    });

    // Conectar a tu propio botón de soporte
    document.getElementById('btn-soporte').addEventListener('click', function () {
      chat.open();
    });
  });
</script>

Atributos configurables

Todos los parámetros del script tag y su equivalente en la API JS.

Atributo

Default

Descripción

data-agent-id—Requerido. ID del agente

data-token—Requerido. Widget token (wt_...)

data-titleAsistenteNombre en la cabecera del chat

data-subtitleEn líneaSubtítulo

data-welcomeBienvenido...Mensaje inicial

data-color#e41414Color principal (hex)

data-themelightlight o dark

data-positionrightright, left, center

data-auto-openfalseAbrir automáticamente

Planes disponibles

Empieza gratis. Escala cuando lo necesites.

Ver todos los detalles de precios

Códigos de error

Respuestas estandarizadas para un manejo de errores predecible.

HTTP

code

Causa

400—Faltan name, email o agentId

401WIDGET_TOKEN_INVALIDToken inválido o expirado

403PLAN_LIMITAlcanzaste el límite de widgets del plan

403WIDGET_ORIGIN_FORBIDDENDominio no está en allowedOrigins

403WIDGET_AGENT_MISMATCHEl agentId no coincide con el token

409—Ya existe una org con ese email

429RATE_LIMITDemasiadas solicitudes (global)

429PLAN_DAILY_LIMITLímite diario de mensajes agotado

Preguntas frecuentes

Flujo completo en 3 líneas

POST /api/orgs→ obtienes orgId + apiKey

POST /api/orgs/:id/widgets→ obtienes token (wt_...)

Pega el <script> en tu web→ listo ✓

Empieza hoy — es gratis

Sin tarjeta de crédito. Sin configuración compleja. Tu widget de IA en 3 minutos.

Crear cuenta gratis Ver documentación completa

Tu agente de IA,en cualquier web