react-zadarmawidget

Librairie React publique pour intégrer le widget WebRTC Callme de Zadarma dans une application React.

Elle encapsule le widget JavaScript historique fourni dans zip_callmewidget_v2.0.9_full.zip et expose un composant React typé.

Installation

npm install react-zadarmawidget

Utilisation

import { CallmeWidget } from 'react-zadarmawidget';
import 'react-zadarmawidget/style.css';

export default function App() {
  return (
    <CallmeWidget
      widgetId={123456}
      sipId={123456}
      options={{
        language: 'fr',
        shape: 'circle',
        dtmf: true,
        color_bg_call: 'rgb(126, 211, 33)'
      }}
      onError={(error) => console.error(error)}
    />
  );
}

Props

Prop	Type	Description
widgetId	number | string	Identifiant du widget Zadarma.
sipId	number | string	Identifiant SIP Zadarma.
options	CallmeWidgetOptions	Options visuelles et fonctionnelles du widget.
id	string	ID DOM personnalisé du conteneur.
className	string	Classe CSS du conteneur.
style	CSSProperties	Style inline du conteneur.
objectName	string	Nom global utilisé par les callbacks JSONP Zadarma. Utile si plusieurs widgets sont affichés sur la même page.
scriptUrls	[string, string, string]	URLs personnalisées pour detectWebRTC, JsSIP et widget.
onReady	() => void	Callback appelé après création du widget.
onError	(error: Error) => void	Callback appelé en cas d’erreur.

Contraintes

• Le widget WebRTC doit être utilisé en HTTPS, sauf en local sur localhost.
• widgetId et sipId doivent venir de ton compte Zadarma.
• Le widget original utilise des variables globales et des callbacks JSONP ; cette librairie les isole autant que possible côté React.
• Pour plusieurs widgets sur une même page, définis un objectName unique pour chaque instance.

Erreur microphone is not allowed in this document

Si le navigateur affiche Permissions policy violation: microphone is not allowed in this document, le problème vient du document hôte, pas du widget lui-même.

Cas le plus fréquent : le composant est rendu dans une iframe sans permission micro. Il faut autoriser explicitement le micro sur l'iframe :

<iframe
  src="https://ton-app.example"
  allow="microphone"
></iframe>

Selon ton hébergement, il peut aussi falloir autoriser la feature au niveau HTTP :

Permissions-Policy: microphone=(self)

Si l'application est servie depuis un domaine parent différent, adapte la politique en conséquence, par exemple en autorisant l'origine qui embarque le widget.

Héberger les scripts vendor toi-même

Par défaut, les scripts vendor sont empaquetés avec la librairie. Tu peux aussi fournir tes propres URLs :

<CallmeWidget
  widgetId={123456}
  sipId={123456}
  scriptUrls={[
    '/callmewidget/detectWebRTC.min.js',
    '/callmewidget/jssip.min.js',
    '/callmewidget/widget.min.js'
  ]}
/>

Publication npm publique

Avant publication, connecte-toi à npm :

npm login

Puis publie :

npm publish --access public

Si le nom react-zadarmawidget est déjà pris, change le champ name dans package.json, par exemple :

{
  "name": "react-zadarmawidget"
}

Développement

npm install
npm run typecheck
npm run build

Licence

MIT