Centre d'aide

Explorer notre base de connaissance
article

Implémenter un bouton fixe

Le bouton fixe est un bouton qui se positionne dans le contenu même de votre page. Il est intégré dans le corps et ne suit donc pas la navigation du visiteur comme pourrait le faire le bouton flottant.

Principe :

En fonction de la disponibilité des conseillers, iAdvize va tout simplement afficher / cacher un élément HTML présent sur vos pages.

Dans la configuration d'un bouton fixe, 3 étapes principales doivent être suivies :

  1. Déclarer le bouton fixe dans l'administration iAdvize, en indiquant l'élément HTML qui doit être caché / affiché
  2. Associer ce bouton fixe à une règle de ciblage
  3. Si ce n'est pas déjà le cas, mettre en place sur votre site le code HTML correspondant aux boutons fixes déclarés au sein d'iAdvize

 Vous trouverez ci-dessous l'ensemble des éléments qui vous seront utiles pour ces étapes. 

Attention : Notre ancien système de bouton fixe nécessitait l'utilisation d'un code Javascript "iAdvizeCallbacks", qui n'est actuellement plus supporté. Ce code peut donc être retiré.

 

1/ Création des boutons fixes dans l'administration iAdvize
2/ Association de votre bouton fixe à une règle de ciblage
3/ Mise en place sur vos pages du code HTML de votre bouton fixe
3.1/ Exemple de code HTML bouton fixe chat
   Bouton fixe Chat gérant 1 état (disponible)
   Bouton fixe Chat gérant 2 états (disponible et indisponible)
   Bouton fixe Chat gérant 3 états (disponible, indisponible ou occupé )
3.2/ Exemple de code html bouton fixe call
   Bouton fixe Call gérant 1 état (disponible)
   Bouton fixe Call gérant 2 états (disponible et indisponible)
3.3/ Exemple de code html bouton fixe chat et call
   Bouton fixe Chat et bouton fixe Call gérant l'état disponible
   Bouton fixe Chat et bouton fixe Call gérant l'état disponible et indisponible

 

 

1/ Création des boutons fixes dans l'administration iAdvize

Pour créer un bouton fixe, depuis l'administration iAdvize, rendez-vous dans l'onglet Engagement (1), puis Notification (2), cliquez sur le bouton bouton-add.png (3) et sélectionnez "Créer un bouton fixe"

implementer01.png

Vous obtiendrez alors le formulaire de création d'un nouveau bouton :

implementer02.png

  1. Donnez un nom à votre bouton fixe, afin de le retrouver ensuite dans la liste des boutons et lorsque vous l'associerez à une règle de ciblage
  2. Choisissez le canal (chat, call ou vidéo) que vous souhaitez associer à ce bouton
  3. Indiquez enfin les sélecteurs CSS permettant à iAdvize d'agir sur l'élément HTML présent sur vos pages, et qui correspond à votre bouton (plus de détails ci-dessous). 

Le sélecteur CSS que vous allez renseigner dans les états va permettre à iAdvize d'afficher / cacher l'élément HTML correspondant.

Important : L'information renseignée ici doit donc correspondre à 100% au code HTML du bouton fixe sur vos pages. Ce champ est par ailleurs sensible à la casse (#idzfonline et #idzFonline seront donc considérés comme différents).

Recommandation :

Par défaut, vous pouvez utiliser des ID CSS (# pour les ID, ce qui donne #idzfonline) ou des CLASS CSS (. pour les CLASS, ce qui donne .idzfonline). Ci-dessous un exemple :

  • état "En Ligne" : #idzfonline (OU .idzfonline)
  • état "Hors Ligne" : #idzfoffline (OU .idzfoffline)
  • état "Occupé" : #idzfbusy (OU .idzfbusy)

Vous pouvez sauvegarder votre nouveau bouton fixe.

 

2/ Association de votre bouton fixe à une règle de ciblage 

Une fois le bouton fixe créé, celui-ci doit être associé à une règle de ciblage (onglet "Engagement" > "Ciblage"). 

Lors de la création de la règle de ciblage, nommez votre règle et choisissez l'action "Afficher un bouton fixe". Vous pouvez ensuite choisir votre bouton dans la liste et sauvegarder votre règle.

implementer03.png

Pour plus de renseignement, veuillez consulter l'article sur la création d'une règle campagne d'engagement.

Note : N'oubliez pas que toute nouvelle règle de ciblage créée doit ensuite être distribuée vers vos agents.

 

3/ Mise en place du code HTML de votre bouton fixe

Voici quelques exemples d'implémentation HTML de bouton fixe (chat et call) utilisables sur vos pages selon vos besoins. Servez-vous !

Veuillez noter qu'il est impératif que le sélecteur renseigné dans votre bouton fixe (à l'étape 1) corresponde au code HTML que vous allez utiliser sur vos pages.

Les exemples ci-dessous sont basés sur l'utilisation d'un ID, si vous souhaitez les utiliser, dans l'étape 1 (création des boutons), vous pouvez alors renseigner les informations suivantes :
Pour le bouton fixe chat :
- Etat en ligne : #idzfonline
- Etat hors ligne : #idzfoffline
- Etat occupé : #idzfbusy

Pour le bouton fixe call :
- Etat en ligne : #idzfcallonline
- Etat hors ligne : #idzfcalloffline


3.1/ Bouton fixe chat


Bouton fixe Chat gérant 1 état (disponible)

Pour l'installation d'un bouton fixe Chat (affiché uniquement si un conseiller est disponible), voici un exemple de code HTML à insérer à l'endroit où le bouton doit apparaitre :

<!-- START IADVIZE HTML CHAT CALLBACK -->
<div class="idz_btn_fix">
<div id="idzfonline" style="display: none;"><a href="javascript:void(0)">ONLINE CHAT BUTTON</a></div>
</div>
<!-- END IADVIZE HTML CHAT CALLBACK -->

Vous devez renseigner les valeurs :

  • ONLINE CHAT BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles

Par exemple :
ex-bouton-fixe-chat-dispo.png

 

Bouton fixe Chat gérant 2 états (disponible et indisponible)

Pour l'installation d'un bouton fixe Chat (affiché quand les conseillers sont disponibles ou indisponibles), voici un exemple de code HTML à insérer à l'endroit où le bouton doit apparaitre :

<!-- START IADVIZE HTML CALLBACK -->
<div class="idz_btn_fix">
<div id="idzfonline" style="display: none;"><a href="javascript:void(0)">ONLINE CHAT BUTTON</a></div>
<div id="idzfoffline" style="display: none;"><a href="javascript:void(0)">OFFLINE CHAT BUTTON</a></div>
</div>
<!-- END IADVIZE HTML CALLBACK -->

Vous devez renseigner les valeurs :

  • ONLINE CHAT BUTTON: code HTML (image ou texte) indiquant que les agents sont disponibles
  • OFFLINE CHAT BUTTON: code HTML (image ou texte) indiquant que les agents sont indisponibles

Par exemple :
ex-bouton-fixe-chat-dispo-indispo.png

 


Bouton fixe Chat gérant 3 états (disponible, indisponible ou occupé)

Voici un exemple de code HTML à insérer à l'endroit où le bouton doit apparaitre :

<!-- START IADVIZE HTML CALLBACK -->
<div class="idz_btn_fix">
<div id="idzfonline" style="display: none;"><a href="javascript:void(0)">ONLINE CHAT BUTTON</a></div>
<div id="idzfbusy" style="display: none;"><a href="javascript:void(0)">BUSY CHAT BUTTON</a></div>
<div id="idzfoffline" style="display: none;"><a href="javascript:void(0)">OFFLINE CHAT BUTTON</a></div>
</div>
<!-- END IADVIZE HTML CALLBACK -->

Vous devez renseigner les valeurs :

  • ONLINE CHAT BUTTON: code HTML (image ou texte) indiquant que les agents sont disponibles sur le canal Chat
  • BUSY CHAT BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles sur le canal Chat
  • OFFLINE CHAT BUTTON: code HTML (image ou texte) indiquant que les agents sont disponibles sur le canal Chat

 

3.2/ Bouton fixe call

Bouton fixe Call gérant 1 état (disponible)

Pour l'installation d'un bouton fixe Call (uniquement lorsqu'un conseiller est disponible), voici un exemple de code HTML à insérer à l'endroit où le bouton doit apparaitre :

<!-- START IADVIZE HTML CALL BUTTON -->
<div class="idz_btn_fix_call">
<div id="idzfcallonline" style="display: none;"><a href="javascript:void(0);">ONLINE CALL BUTTON</a></div>
</div>
<!-- END IADVIZE HTML CALL BUTTON -->

Vous devez renseigner les valeurs :

  • ONLINE CALL BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles


Bouton fixe Call gérant 2 états (disponible et indisponible)

Pour l'installation d'un bouton d'appel Click to Call gérant l'état disponible et indisponible, voici un exemple de code HTML à insérer à l'endroit où le bouton doit apparaitre :

<!-- START IADVIZE HTML CALL BUTTON -->
<div class="idz_btn_fix_call">
<div id="idzfcallonline" style="display: none;"><a href="javascript:void(0);">ONLINE CALL BUTTON</a></div>
<div id="idzfcalloffline" style="display: none;"><a href="javascript:void(0);">OFFLINE CALL BUTTON</a></div>
</div>
<!-- END IADVIZE HTML CALL BUTTON -->

Vous devez renseigner les valeurs :

  • ONLINE CALL BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles
  • OFFLINE CALL BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles

 

3.3/ Bouton fixe chat et call

Bouton fixe Chat et bouton fixe Call gérant l'état disponible

Pour l'installation d'un bouton fixe d'appel Chat et Call (affiché uniquement lorsqu'un conseiller est disponible), voici un exemple de code HTML à insérer à l'endroit où le bouton doit apparaitre :

<div class="idz_btn_fix_all">
<!-- START IADVIZE HTML CHAT CALLBACK -->
<div id="idzfonline" style="display: none;"><a href="javascript:void(0)">ONLINE CHAT BUTTON</a></div>
<!-- END IADVIZE HTML CHAT CALLBACK -->
<!-- START IADVIZE HTML CALL BUTTON -->
<div id="idzfcallonline" style="display: none;"><a href="javascript:void(0);">ONLINE CALL BUTTON</a></div>
<!-- END IADVIZE HTML CALL BUTTON -->
</div>

Vous devez renseigner les valeurs :

  • ONLINE CHAT BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles sur le canal chat
  • ONLINE CALL BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles sur le canal call

 

Bouton fixe Chat et bouton fixe Call gérant l'état disponible et indisponible 

Pour l'installation d'un bouton fixe d'appel Click to Chat et Click to Call gérant l'état disponible et indisponible, voici un exemple de code HTML à insérer à l'endroit où le bouton doit apparaitre :

<div class="idz_btn_fix_all">
<!-- START IADVIZE HTML CHAT CALLBACK -->
<div id="idzfonline" style="display: none;"><a href="javascript:void(0)">ONLINE CHAT BUTTON</a></div>
<div id="idzfoffline" style="display: none;"><a href="javascript:void(0)">OFFLINE CHAT BUTTON</a></div>
<!-- END IADVIZE HTML CHAT CALLBACK -->
<!-- START IADVIZE HTML CALL BUTTON -->
<div id="idzfcallonline" style="display: none;"><a href="javascript:void(0);">ONLINE CALL BUTTON</a></div>
<div id="idzfcalloffline" style="display: none;"><a href="javascript:void(0);">OFFLINE CALL BUTTON</a></div>
<!-- END IADVIZE HTML CALL BUTTON -->
</div>

Vous devez renseigner les valeurs :

  • ONLINE CHAT BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles sur le canal Chat
  • OFFLINE CHAT BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles sur le canal Chat
  • ONLINE CALL BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles sur le canal Call
  • OFFLINE CALL BUTTON : code HTML (image ou texte) indiquant que les agents sont disponibles sur le canal Call

 

Commentaires