> ## 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.

# Web call widget

> Add a voice agent to your website using the widget embed code.

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="en" route="Widgets" permission="widgets.read / widgets.create" />

The widget lets visitors speak with a voice agent in their browser. It requires microphone permission and consumes organization credits.

## Create and embed

1. Open **Widgets** and create one for your site.
2. Select the voice agent and configure the available options: icon, color, language, dark mode, and maximum duration.
3. To identify visitors, configure the name and email form. Review the information you request before sharing it.
4. Save and copy the code generated by the configurator. Use the complete code because it includes widget identifiers and configuration.
5. Add it to your site and test the published page with microphone access allowed.

The integration offers the `contactship-widget` component and a widget embed view. If your site builder blocks scripts or iframes, check its custom-code options.

## Test the experience

Check widget opening, the selected agent, the form, microphone access, and call completion. Inspect the widget’s call log and the agent’s analysis. A working preview does not prove the host site allows audio or embedded content.

Maximum duration is capped by the plan. The widget provides a browser voice conversation; it does not by itself create a WhatsApp channel or text-chat inbox.

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Why can’t the agent hear me?">
    Check browser permission, the selected microphone, and host-site audio restrictions.
  </Accordion>

  <Accordion title="Where can I inspect conversations?">
    Open the widget’s calls or the main call log.
  </Accordion>

  <Accordion title="Do I need an inbound phone number?">
    For browser voice conversations, the widget uses a web call.
  </Accordion>
</AccordionGroup>

## See also

* [Create an agent](/en/voice-agents/create)
* [Calls](/en/calls/call-log)