Web Call Widget

The Web Call Widget is a browser-based calling component that lets website visitors speak with your AI Employee directly from a web page. It uses WebRTC to establish a real-time voice connection between the visitor's browser and your AI Employee — no phone number, app download, or external software required.

The widget is a lightweight JavaScript snippet that you add to any website. Once embedded, visitors can click a button and start a live voice conversation with your AI Employee, just as they would on a phone call.

📘

NOTE

The Web Call Widget is currently feature-flagged and not enabled by default. To enable it for your account, contact [email protected].

When to use the Web Call Widget

The Web Call Widget is useful whenever you want to offer voice-based interactions without requiring visitors to dial a phone number. Common scenarios include:

• Website customer support — Add a "Talk to our assistant" button to your website so visitors can get instant voice support without leaving the page. This is ideal for service businesses (cleaning companies, salons, medical offices) where callers typically want to book an appointment or ask a quick question.

• Lead qualification on landing pages — Embed the widget on a landing page so prospects can speak with your AI Employee immediately. The AI Employee can ask qualifying questions, collect contact details, and route high-intent leads to your sales team.

• Internal tools and dashboards — Add calling capabilities to partner portals, admin panels, or CRM dashboards. Team members can test or interact with AI Employees without switching to a separate phone.

• E-commerce product assistance — Let shoppers speak with an AI assistant to get product recommendations, check order status, or resolve issues while browsing your store.

• After-hours coverage — Keep a voice channel available 24/7 on your website even when your team is offline. The AI Employee handles common inquiries, books appointments, and takes messages around the clock.

How it works

When a visitor clicks the call button, the widget:

1. Requests microphone access from the browser.
2. Establishes a WebRTC connection to the Newo.ai voice service.
3. Routes the call to your AI Employee using the connector and customer identifiers you provide.
4. The AI Employee answers and conducts the conversation — handling appointments, answering questions, collecting information, or performing any tasks defined in its workflow.
5. When the call ends, the widget closes the connection and releases browser resources.

The entire experience happens inside the browser. The visitor never leaves your website.

1. Add widget script

To use the Web Call Widget, you must first load the widget bundle so that the global API becomes available in your application.

The widget is distributed in two formats. Choose the script based on your application type.

UMD bundle (recommended for framework applications)

<script src="https://cdn.newo.ai/webcall-widget/widget.umd.min.js"></script>

Use this bundle for:

• React applications
• Vue applications
• Angular applications
• Next.js / SPA applications
• Micro-frontend portals and dashboards
• Any application where scripts are loaded via standard <script> tag

This bundle exposes a global API:

window.WebCallWidget

This is the recommended and default integration approach.

ES module bundle

<script type="module" src="https://cdn.newo.ai/webcall-widget/widget.es.min.js"></script>

Use this bundle for:

• WordPress websites
• CMS-driven pages
• Static websites
• Environments using native ES modules

2. Initialize the widget

After the script has loaded and required runtime identifiers are available, initialize the widget.

window.WebCallWidget.init({
  customerIdn: '<CUSTOMER_IDN>',
  connectorIdn: '<CONNECTOR_IDN>',
  externalActorId: '<EXTERNAL_ACTOR_ID>'
});

Initialization mounts the widget runtime and prepares the call experience. Initialization should be performed once per page lifecycle.

3. Target container (optional)

The target option defines the DOM container where the widget will be mounted.

Default behavior (no target)

If target is not provided:

• The widget creates its own container
• The container is appended to document.body
• The widget appears as a floating element in the bottom-right corner of the page.

This mode is suitable for simple integrations.

Custom target container

You can specify a container where the widget should render.

Example container:

<div id="call-widget-container"></div>

Initialization:

window.WebCallWidget.init({
  target: '#call-widget-container',
  customerIdn: '...',
  connectorIdn: '...',
  externalActorId: '...'
});

In this mode:

• The widget mounts into your container
• All overlays and portals are scoped to that container
• Positioning is controlled by your layout

4. Custom button integration (recommended pattern)

Applications often prefer to use their own UI instead of the default floating button.

This can be achieved by disabling the widget button and triggering calls programmatically.

window.WebCallWidget.init({
  target: '#call-widget-container',
  showButton: false,
  customerIdn: '...',
  connectorIdn: '...',
  externalActorId: '...'
});

Then trigger the call:

window.WebCallWidget.open('audio');

In this pattern:

• Widget infrastructure is mounted
• Default button is hidden
• Host application controls call triggers
• Widget manages call lifecycle internally

5. Open call programmatically

To open the call UI:

window.WebCallWidget.open('audio');

Supported modes:

• audio
• video (if enabled)

Example:

window.WebCallWidget.open('video');

6. Additional lifecycle methods

The widget exposes additional lifecycle helpers.

Close call

window.WebCallWidget.close();

Update configuration

window.WebCallWidget.update(target, partialOptions);

Used to update runtime configuration without full reinitialization.

Destroy widget

window.WebCallWidget.destroy(target);

Unmounts the widget and cleans internal resources.

7. Configuration reference

The widget supports several optional parameters to control its appearance and behavior.

8. Examples

Basic floating button

The simplest integration. The widget displays its own call button in the bottom-right corner of the page.

<script src="https://cdn.newo.ai/webcall-widget/widget.umd.min.js"></script>
<script>
  window.WebCallWidget.init({
    customerIdn: 'your_customer_idn',
    connectorIdn: 'newo_voice_connector',
    externalActorId: crypto.randomUUID(),
    apiBaseUrl: 'https://api.newo.ai',
    showButton: true,
    theme: 'auto',
    defaultMode: 'audio'
  });
</script>

Custom call button

Use your own styled button and trigger the call programmatically.

<button id="speak-to-agent" style="padding: 12px 24px; font-size: 16px;">
  Speak with our AI assistant
</button>

<script src="https://cdn.newo.ai/webcall-widget/widget.umd.min.js"></script>
<script>
  window.WebCallWidget.init({
    customerIdn: 'your_customer_idn',
    connectorIdn: 'newo_voice_connector',
    externalActorId: crypto.randomUUID(),
    apiBaseUrl: 'https://api.newo.ai',
    showButton: false
  });

  document.getElementById('speak-to-agent').addEventListener('click', function() {
    window.WebCallWidget.open('audio');
  });
</script>

React integration

Embed the widget inside a React component with a custom trigger button.

import { useEffect, useRef } from 'react';
import { v4 as uuidv4 } from 'uuid';

function WebCallButton({ customerIdn }) {
  const initialized = useRef(false);

  useEffect(() => {
    if (initialized.current || !window.WebCallWidget) return;
    initialized.current = true;

    window.WebCallWidget.init({
      customerIdn,
      connectorIdn: 'newo_voice_connector',
      externalActorId: uuidv4(),
      apiBaseUrl: 'https://api.newo.ai',
      showButton: false
    });
  }, [customerIdn]);

  return (
    <button onClick={() => window.WebCallWidget?.open('audio')}>
      Talk to our assistant
    </button>
  );
}

Using the onReady callback

Store the widget API for later use — for example, to enable the call button only after the widget finishes loading.

<button id="call-btn" disabled>Loading...</button>

<script src="https://cdn.newo.ai/webcall-widget/widget.umd.min.js"></script>
<script>
  window.WebCallWidget.init({
    customerIdn: 'your_customer_idn',
    connectorIdn: 'newo_voice_connector',
    externalActorId: crypto.randomUUID(),
    apiBaseUrl: 'https://api.newo.ai',
    showButton: false,
    onReady: function(api) {
      var btn = document.getElementById('call-btn');
      btn.disabled = false;
      btn.textContent = 'Call now';
      btn.addEventListener('click', function() {
        api.openCall('audio');
      });
    }
  });
</script>

Full page example: cleaning service website

A complete HTML page showing how a cleaning service might embed the widget for appointment booking.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sunny's Cleaning Service</title>
  <script src="https://cdn.newo.ai/webcall-widget/widget.umd.min.js"></script>
</head>
<body>
  <h1>Welcome to Sunny's Cleaning Service</h1>
  <p>Need a quote or want to book a cleaning? Talk to our AI assistant instantly.</p>

  <button id="call-btn">Call our AI assistant</button>

  <script>
    var visitorId = crypto.randomUUID();

    window.WebCallWidget.init({
      customerIdn: 'sunnys_cleaning_cust_001',
      connectorIdn: 'newo_voice_connector',
      externalActorId: visitorId,
      apiBaseUrl: 'https://api.newo.ai',
      theme: 'light',
      defaultMode: 'audio',
      useOnlyAudio: true,
      showButton: false
    });

    document.getElementById('call-btn').addEventListener('click', function() {
      window.WebCallWidget.open('audio');
    });
  </script>
</body>
</html>

When a visitor clicks Call our AI assistant, the widget opens an audio call in their browser. The AI Employee answers and handles the conversation — booking appointments, providing quotes, or answering common questions — just as it would on a regular phone call.

9. Integration flow summary

1. Add widget script (UMD or ES depending on app type)
2. Wait until identifiers are available
3. Initialize widget with your customerIdn, connectorIdn, and a unique externalActorId
4. Optionally provide a target container and configure appearance
5. Trigger calls via the default floating button or your own custom UI