> ## Documentation Index
> Fetch the complete documentation index at: https://docs.contactship.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget de llamada web

> Agregá un agente de voz a tu sitio con el código de inserción del widget.

export const Availability = ({lang = 'es', plan, addon, permission, route, status}) => {
  const L = lang === 'en' ? {
    plan: 'Plan',
    addon: 'Add-on',
    permission: 'Permission',
    route: 'Where',
    status: 'Status',
    addonNote: 'enabled on request',
    allPlans: 'All plans',
    beta: 'Beta',
    nuevo: 'New',
    soon: 'Coming soon'
  } : {
    plan: 'Plan',
    addon: 'Add-on',
    permission: 'Permiso',
    route: 'Dónde',
    status: 'Estado',
    addonNote: 'se activa a pedido',
    allPlans: 'Todos los planes',
    beta: 'Beta',
    nuevo: 'Nuevo',
    soon: 'Próximamente'
  };
  const items = [];
  if (plan) items.push([L.plan, plan]);
  if (addon) items.push([L.addon, `${addon} · ${L.addonNote}`]);
  if (permission) items.push([L.permission, permission]);
  if (route) items.push([L.route, route]);
  if (status) items.push([L.status, L[status] || status]);
  return <div style={{
    display: 'flex',
    flexWrap: 'wrap',
    gap: '6px 22px',
    padding: '12px 16px',
    margin: '4px 0 24px',
    border: '1px solid rgba(2, 82, 255, 0.28)',
    borderLeft: '3px solid #0252ff',
    borderRadius: '8px',
    background: 'rgba(2, 82, 255, 0.05)',
    fontSize: '13.5px',
    lineHeight: '1.5'
  }}>
      {items.map(([k, v]) => <div key={k} style={{
    display: 'flex',
    gap: '6px',
    alignItems: 'baseline'
  }}>
          <span style={{
    fontSize: '10.5px',
    fontWeight: 600,
    letterSpacing: '0.07em',
    textTransform: 'uppercase',
    opacity: 0.65
  }}>{k}</span>
          <span style={{
    fontWeight: 500
  }}>{v}</span>
        </div>)}
    </div>;
};

<Availability lang="es" route="Widgets" permission="widgets.read / widgets.create" />

El widget permite conversar con un agente de voz desde el navegador. Necesita permiso de micrófono y consume créditos de la organización.

## Crear e insertar

1. Abrí **Widgets** y creá uno para tu sitio.
2. Elegí el agente de voz y configurá los campos disponibles: ícono, color, idioma, modo oscuro y duración máxima.
3. Si necesitás identificar al visitante, configurá el formulario con nombre y correo. Revisá qué campos pedís antes de compartirlo.
4. Guardá y copiá el código que genera el configurador. Usá ese código completo: contiene los identificadores y la configuración del widget.
5. Insertalo en el lugar correspondiente de tu sitio y probá desde la página publicada con un micrófono autorizado.

La integración ofrece el componente `contactship-widget` y una vista de inserción del widget. Si tu constructor bloquea scripts o iframes, revisá sus opciones de código personalizado.

## Probar la experiencia

Revisá cómo se abre el widget, la selección del agente, el formulario, el acceso al micrófono y el final de la llamada. Comprobá el registro de llamadas del widget y el análisis del agente. Una previsualización correcta no demuestra que el sitio permita audio o contenido incrustado.

La duración máxima está limitada por el plan. El widget atiende una conversación de voz web; no crea por sí mismo un canal de WhatsApp ni una bandeja de chat de texto.

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="¿Por qué no se oye mi voz?">
    Revisá permisos del navegador, micrófono seleccionado y restricciones de audio del sitio.
  </Accordion>

  <Accordion title="¿Dónde veo las conversaciones?">
    Abrí las llamadas del widget o el registro general de Llamadas.
  </Accordion>

  <Accordion title="¿Necesito un número telefónico entrante?">
    Para conversar por voz desde el navegador, el widget usa la llamada web.
  </Accordion>
</AccordionGroup>

## Ver también

* [Crear agente](/es/agentes-de-voz/crear)
* [Llamadas](/es/llamadas/registro)