AI4CALL Widget

Une ligne de code pour permettre à vos visiteurs de parler à l'assistant IA vocal directement depuis le navigateur.

📑

1

Démarrage rapide

Copiez et collez dans votre HTML. C'est tout.

<!-- Ajoutez ceci là où vous voulez le bouton -->
<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="VOTRE_APIKEY"></script>
🔑 Où trouver mon apikey ?
Dans le portail AI4CALL, sur la fiche de votre assistant. Au format ai4call_sk_xxxxxxxx.
2

Paramètres

Tous les data-* disponibles sur la balise script.

Obligatoire
data-apikey REQUIRED chaîne Apikey de l'assistant AI4CALL. Identifie l'assistant qui répond à l'appel.
Apparence
ParamètreValeursDescription
data-mode embed embed fixed api embed = le bouton apparaît à l'endroit où vous mettez la balise script.
fixed = bouton flottant dans un coin, toujours visible.
api = aucune interface, uniquement l'API JavaScript.
data-style pill pill round square minimal pulse gradient outline 3d glass neon Style graphique du bouton. Voir la galerie.
data-color #e2241c #hex Couleur principale du bouton.
data-position bottom-right bottom-right bottom-left top-right top-left bottom-center Position du bouton. Uniquement pour mode=fixed.
data-text Parler à l'IA texte libre Texte du bouton (ex. « Parler à Mario »).
data-hide-branding false true false Masque « Powered by AI4CALL ». Soumis au plan contractuel.
Téléphonie
ParamètreValeursDescription
data-cid-name AI4CALL-Widget texte libre Nom CallerID personnalisé visible par l'assistant.
data-cid-num 0000000000 numéro Numéro CallerID personnalisé.
Langue
ParamètreValeursDescription
data-lang it it en fr es Langue des libellés automatiques (Connexion, En appel, Raccrocher).
3

Galerie de styles

10 styles disponibles. Choisissez la couleur et l'état pour voir l'aperçu.

Couleur

État

4

Comportement

Le bouton change automatiquement d'apparence selon l'état de l'appel.

Idle

Affiche le texte configuré. Clic → démarre l'appel.

Connexion

Bouton orange, « Connexion... ». Clic → annule.

En appel

Bouton vert, « En appel 00:32 » avec minuteur. Clic → raccroche.

💡
Aucune modale, aucun popup. Un seul bouton qui change d'état. Plusieurs assistants sur la même page ? Un seul appel à la fois : les autres boutons se désactivent automatiquement.
5

Exemples

Snippets prêts à coller pour chaque scénario.

Exemple minimal

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

Style et texte personnalisés

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

Flottant en bas à gauche

<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="Assistant IA"
  data-color="#3498db"></script>

Avec CallerID personnalisé

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

Galerie — plusieurs assistants sur la même 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="Appeler Mario"
      data-color="#e2241c"></script>
  </div>
  <div>
    <h3>Laura — Hôtel</h3>
    <script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
      data-apikey="ai4call_sk_laura02"
      data-style="neon"
      data-text="Appeler Laura"
      data-color="#3498db"></script>
  </div>
</div>

Tous les paramètres

<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="Parler à Mario"
  data-cid-name="Mario Restaurant"
  data-cid-num="3331234567"
  data-lang="it"
  data-hide-branding="true"></script>
6

API JavaScript

Pour les développeurs qui veulent créer leur propre interface.

Utilisez data-mode="api" pour désactiver l'interface du widget. Construisez votre UI avec les fonctions JavaScript exposées.

Fonctions disponibles
FonctionParamètresDescription
AI4CALL.call(opts) {cidName, cidNum} optionnel Démarre l'appel vers l'assistant.
AI4CALL.hangup() — Raccroche l'appel en cours.
AI4CALL.getState() — Retourne l'état : idle, calling, connected.
AI4CALL.onStateChange(fn) fn(state, secs) Callback à chaque changement d'état. secs = durée de l'appel en secondes.

Bouton unique avec toggle

<button id="myBtn" onclick="toggleCall()">Appeler 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 = 'Raccrocher ' + (m<10?'0':'')+m+':'+(s<10?'0':'')+s;
    btn.style.background = '#e74c3c';
  } else if(state === 'calling'){
    btn.textContent = 'Connexion...';
    btn.style.background = '#f39c12';
  } else {
    btn.textContent = 'Appeler Mario';
    btn.style.background = '';
  }
});
</script>

CallerID dynamique avec utilisateur authentifié

👤 Scénario : l'utilisateur est connecté sur votre site
Si votre site a un espace privé avec authentification, vous pouvez passer le numéro de téléphone de l'utilisateur connecté comme CallerID. L'assistant IA saura qui appelle et pourra répondre de manière personnalisée. 
<!-- L'utilisateur est déjà authentifié sur votre site -->
<!-- Votre backend injecte nom et téléphone dans le 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()">
  Appeler l'assistant</button>

<script>
// Données de l'utilisateur connecté (injectées par votre backend)
var utente = {
  nome: 'Mario Rossi',         // depuis votre BDD
  telefono: '3331234567'        // depuis votre BDD
};

function callWithUserCID(){
  if(AI4CALL.getState() === 'idle'){
    AI4CALL.call({
      cidName: utente.nome,       // L'assistant voit « Mario Rossi »
      cidNum: utente.telefono     // L'assistant voit « 3331234567 »
    });
  } else {
    AI4CALL.hangup();
  }
}
</script>
⚙️ Comment ça marche
Le CallerID est passé en en-tête SIP à l'assistant IA. Si l'assistant est configuré avec un outil MCP de lookup clients, il peut reconnaître le numéro et personnaliser la conversation : « Bonjour Mario, comment puis-je vous aider ? »

Exemple PHP — injecter les données utilisateur dans le template

<?php
// Votre backend récupère les données de l'utilisateur connecté
$user = getLoggedUser();  // Votre fonction d'authentification
?>

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-text="Parler à l'assistant"
  data-style="gradient"
  data-cid-name="<?= htmlspecialchars($user['nome']) ?>"
  data-cid-num="<?= htmlspecialchars($user['telefono']) ?>"></script>
⚠️ Note de sécurité
Le CallerID est défini côté client, donc l'utilisateur peut le modifier. Ne l'utilisez pas pour l'authentification ou l'accès à des données sensibles. Utilisez-le comme indication pour l'assistant IA, pas comme garantie d'identité.
7

Prérequis techniques

Ce qu'il faut pour que le widget fonctionne.

🌐 WebRTC
Le navigateur doit supporter WebRTC. Tous les navigateurs modernes le supportent : Chrome, Firefox, Safari, Edge.
🎤 Microphone
Le navigateur demande la permission au premier clic. Si l'utilisateur refuse, l'appel ne peut pas démarrer.
🔒 HTTPS
Obligatoire. WebRTC et l'accès au microphone exigent une connexion sécurisée.
📦 Aucune dépendance
Le widget charge tout de manière autonome (~15 Ko). La librairie SIP est chargée en arrière-plan après 3 secondes, sans bloquer la page.

Questions fréquentes

Oui. Chaque balise script avec une data-apikey différente crée un bouton indépendant. Un seul appel à la fois : les autres boutons se désactivent automatiquement durant un appel.

Non. Le widget pèse environ 15 Ko et charge la librairie de téléphonie en arrière-plan après 3 secondes, sans bloquer le rendu de la page.

Oui. Le widget est responsive et fonctionne sur smartphones et tablettes. Le navigateur demande l'accès au microphone comme sur ordinateur.

L'appel ne peut pas démarrer. Le widget revient à l'état idle.

Oui. Utilisez data-mode="api" pour désactiver l'interface du widget et construisez votre propre UI avec les fonctions JavaScript AI4CALL.call(), AI4CALL.hangup(), AI4CALL.getState() et AI4CALL.onStateChange().

Oui. Pour des raisons de sécurité, chaque apikey est liée à une liste de domaines autorisés. Contactez le support AI4CALL pour ajouter ou modifier des domaines.

Oui. Si votre site dispose d'une authentification, vous pouvez injecter le nom et le téléphone de l'utilisateur dans data-cid-name et data-cid-num directement depuis le backend (PHP, Node.js, etc.). Vous pouvez aussi, avec data-mode="api", les passer via JavaScript : AI4CALL.call({cidName: 'Mario Rossi', cidNum: '3331234567'}). L'assistant IA recevra ces données et pourra reconnaître l'appelant.

Le CallerID est défini côté client, donc l'utilisateur peut le modifier. Utilisez-le pour personnaliser la conversation de l'assistant, pas comme mécanisme d'authentification ou pour l'accès à des données sensibles.


Quelques utilisateurs d'ai4call