AI4CALL Widget

One line of code to let your visitors talk to the AI voice assistant directly from the browser.

📑

1

Quick Start

Copy and paste into your HTML. Done.

<!-- Add this where you want the button -->
<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="YOUR_APIKEY"></script>
🔑 Where do I find my apikey?
In the AI4CALL portal, on your assistant card. It has the format ai4call_sk_xxxxxxxx.
2

Parameters

All data-* attributes available on the script tag.

Required
data-apikey REQUIRED string AI4CALL assistant apikey. Identifies which assistant answers the call.
Appearance
ParameterValuesDescription
data-mode embed embed fixed api embed = the button appears where you place the script tag.
fixed = floating button in a corner, always visible.
api = no UI at all, JavaScript API only.
data-style pill pill round square minimal pulse gradient outline 3d glass neon Visual style of the button. See Style Gallery.
data-color #e2241c #hex Primary color of the button.
data-position bottom-right bottom-right bottom-left top-right top-left bottom-center Button position. Only for mode=fixed.
data-text Talk to AI free text Button text (e.g. "Talk to Mario").
data-hide-branding false true false Hides "Powered by AI4CALL". Subject to your contract plan.
Telephony
ParameterValuesDescription
data-cid-name AI4CALL-Widget free text Custom CallerID name visible to the assistant.
data-cid-num 0000000000 number Custom CallerID number.
Language
ParameterValuesDescription
data-lang it it en fr es Language of the automatic labels (Connecting, In call, Hang up).
3

Style Gallery

10 styles available. Pick a color and a state to preview.

Color

State

4

Behavior

The button automatically changes appearance based on the call state.

Idle

Shows the configured text. Click → starts the call.

Connecting

Orange button, "Connecting...". Click → cancels.

In call

Green button, "In call 00:32" with timer. Click → hangs up.

💡
No modal, no popup. A single button that switches state. Multiple assistants on the same page? Only one call at a time: the others auto-disable.
5

Examples

Copy-paste ready snippets for every scenario.

Minimal example

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"></script>

Custom style and text

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-style="neon"
  data-text="Talk to Mario"
  data-color="#2ecc71"></script>

Floating bottom-left

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-mode="fixed"
  data-position="bottom-left"
  data-style="gradient"
  data-text="AI assistant"
  data-color="#3498db"></script>

With custom CallerID

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-style="pulse"
  data-text="Call the restaurant"
  data-cid-name="Mario Restaurant"
  data-cid-num="3331234567"
  data-color="#e67e22"></script>

Gallery — multiple assistants on the same page

<div style="display:flex; gap:20px">
  <div>
    <h3>Mario — Restaurant</h3>
    <script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
      data-apikey="ai4call_sk_mario01"
      data-style="pulse"
      data-text="Call Mario"
      data-color="#e2241c"></script>
  </div>
  <div>
    <h3>Laura — Hotel</h3>
    <script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
      data-apikey="ai4call_sk_laura02"
      data-style="neon"
      data-text="Call Laura"
      data-color="#3498db"></script>
  </div>
</div>

All parameters

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-mode="fixed"
  data-style="neon"
  data-color="#2ecc71"
  data-position="bottom-left"
  data-text="Talk to Mario"
  data-cid-name="Mario Restaurant"
  data-cid-num="3331234567"
  data-lang="it"
  data-hide-branding="true"></script>
6

JavaScript API

For developers who want to build their own custom UI.

Use data-mode="api" to disable the widget UI. Build your own UI on top of the exposed JavaScript functions.

Available functions
FunctionParametersDescription
AI4CALL.call(opts) {cidName, cidNum} optional Starts the call to the assistant.
AI4CALL.hangup() — Hangs up the current call.
AI4CALL.getState() — Returns the state: idle, calling, connected.
AI4CALL.onStateChange(fn) fn(state, secs) Callback fired on every state change. secs = call duration in seconds.

Single button with toggle

<button id="myBtn" onclick="toggleCall()">Call Mario</button>

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-mode="api"></script>

<script>
function toggleCall(){
  if(AI4CALL.getState() === 'idle')
    AI4CALL.call({cidName:'Mario', cidNum:'333123'});
  else
    AI4CALL.hangup();
}

AI4CALL.onStateChange(function(state, secs){
  var btn = document.getElementById('myBtn');
  if(state === 'connected'){
    var m = Math.floor(secs/60), s = secs%60;
    btn.textContent = 'Hang up ' + (m<10?'0':'')+m+':'+(s<10?'0':'')+s;
    btn.style.background = '#e74c3c';
  } else if(state === 'calling'){
    btn.textContent = 'Connecting...';
    btn.style.background = '#f39c12';
  } else {
    btn.textContent = 'Call Mario';
    btn.style.background = '';
  }
});
</script>

Dynamic CallerID with authenticated user

👤 Scenario: the user is logged in on your website
If your site has a login area, you can pass the logged-in user's phone number as the CallerID. The AI assistant will know who is calling and can answer in a personalized way. 
<!-- The user is already authenticated on your site -->
<!-- Your backend injects name and phone in the template -->

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-mode="api"></script>

<button id="callBtn" onclick="callWithUserCID()">
  Call the assistant</button>

<script>
// Logged-in user data (injected by your backend)
var utente = {
  nome: 'Mario Rossi',         // from your DB
  telefono: '3331234567'        // from your DB
};

function callWithUserCID(){
  if(AI4CALL.getState() === 'idle'){
    AI4CALL.call({
      cidName: utente.nome,       // The assistant sees "Mario Rossi"
      cidNum: utente.telefono     // The assistant sees "3331234567"
    });
  } else {
    AI4CALL.hangup();
  }
}
</script>
⚙️ How it works
The CallerID is passed as a SIP header to the AI assistant. If the assistant is configured with an MCP customer-lookup tool, it can recognize the number and tailor the conversation: "Good morning Mario, how can I help you?"

PHP example — inject user data into the template

<?php
// Your backend retrieves the logged-in user data
$user = getLoggedUser();  // Your authentication function
?>

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-text="Talk to the assistant"
  data-style="gradient"
  data-cid-name="<?= htmlspecialchars($user['nome']) ?>"
  data-cid-num="<?= htmlspecialchars($user['telefono']) ?>"></script>
⚠️ Security note
The CallerID is set client-side, so a user could modify it. Don't use it for authentication or sensitive-data access. Use it as a hint for the AI assistant, not as proof of identity.
7

Technical requirements

What you need for the widget to work.

🌐 WebRTC
The browser must support WebRTC. All modern browsers do: Chrome, Firefox, Safari, Edge.
🎤 Microphone
The browser will ask permission on the first click. If the user denies it, the call cannot start.
🔒 HTTPS
Required. WebRTC and microphone access need a secure connection.
📦 No dependencies
The widget loads everything on its own (~15KB). The SIP library loads in the background after 3 seconds without blocking the page.

Frequently asked questions

Yes. Each script tag with a different data-apikey creates an independent button. Only one call at a time: the other buttons auto-disable during a call.

No. The widget weighs about 15KB and loads the telephony library in the background after 3 seconds, without blocking page rendering.

Yes. The widget is responsive and works on smartphones and tablets. The browser will ask for microphone access just like on desktop.

The call cannot start. The widget returns to the idle state.

Yes. Use data-mode="api" to disable the widget UI and build your own UI on top of the JavaScript functions AI4CALL.call(), AI4CALL.hangup(), AI4CALL.getState() and AI4CALL.onStateChange().

Yes. For security, every apikey is bound to a list of authorized domains. Contact AI4CALL support to add or change domains.

Yes. If your site has authentication, you can inject the user's name and phone into data-cid-name and data-cid-num directly from the backend (e.g. PHP, Node.js). Or, with data-mode="api", you can pass them via JavaScript: AI4CALL.call({cidName: 'Mario Rossi', cidNum: '3331234567'}). The AI assistant will receive these data and can recognize the caller.

The CallerID is set client-side, so a user could change it. Use it as a hint to personalize the assistant's conversation, not as an authentication mechanism or for accessing sensitive data.


Some of the ai4call users