Intégrer plusieurs boutons Webcallback dans la même page

15 19 décembre 2024

Dans certains cas d’usage il peut être important de pouvoir intégrer plusieurs boutons de webcallback ayant chacun leurs paramètres propres comme le numéro de réception des appels , le design ou les heures d’ouverture.

Avec Voxolib il est tout à fait possible de mettre cela en place.

Étape 1 : Intégrer les librairies nécessaires

Afin d’utiliser les boutons, vous devez inclure les librairies CSS et JavaScript spécifiques dans votre pageHTML.
Placez les balises suivantes dans la section <head> de votre page :

<link href="https://scripts.voxolib.com/multif/multiple-widgets.css" rel="stylesheet">
<script src="https://scripts.voxolib.com/multif/multiple-widgets.js"></script>

Attention, ces deux codes viennent remplacer le code standard généré par notre interface en ligne.

Étape 2 : Ajouter les boutons

<button class="popup_4lead_fr-btn" data-url='https://scripts.voxolib.com/iframe.php?wid=ID_UNIQUE&mode=clicktocall'>Bouton 1</button>
<button class="popup_4lead_fr-btn"   data-url='https://scripts.voxolib.com/iframe.php?wid=ID_UNIQUE&mode=clicktocall'>Bouton 2</button>
<button class="popup_4lead_fr-btn" data-width="500" data-height="500" data-backdrop="0.9" data-spinner="4" data-url='https://scripts.voxolib.com/iframe.php?wid=ID_UNIQUE&mode=clicktocall'>Bouton 3</button>

Étape 3 : Détails des paramètres des boutons

Paramètres communs
data-url : L’URL de l’iframe ou de l’action à exécuter lorsque le bouton est cliqué.

https://scripts.voxolib.com/iframe.php?wid=ID_UNIQUE&mode=clicktocall

Paramètres supplémentaires et optionnels

  1. data-width : Définit la largeur de la fenêtre modale en pixels. Par exemple : 500 (pour une largeur de 500 pixels).
  2. data-height : Définit la hauteur de la fenêtre modale en pixels. Par exemple : 500 (pour une hauteur de 500 pixels).
  3. data-backdrop : Définit la transparence de l’arrière-plan lorsque la fenêtre modale est ouverte. Par exemple : 0.9 (pour un arrière-plan légèrement opaque).
  4. data-spinner : Spécifie un style ou une animation pour le spinner de chargement. Les spinners proposés par Voxolib vont de 1 à 5.

Important:

  • Assurez-vous que les URLs spécifiées dans les attributs data-url possèdent bien des ids de widgets actifs