LiveZilla : Support par Tchat

Xavier ZOLEZZI

La réactivité d'une assistance est, pour de nombreux clients, un critère non négligeable pour le choix d'une société à une autre.
Démarquez-vous et proposez une assistance par messages instantanés, le tout gratuitement.

L'ensemble des captures d'écran ont été faites une fois le mode traduction activé. Si vous souhaitez les traduire avant rendez-vous directement à la

Commentez

- Titre : LiveZilla : Support par Tchat

- Auteur : Xavier ZOLEZZI

- Parution : 3 mars 2011

- Licence : Copyright ® 2011 Xavier ZOLEZZI. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Présentation

- II. Téléchargement & Installation

- III. Installation sur le serveur

- IV. Configuration des opérateurs

- V. Installation sur le site web

- VI. Le logiciel « Opérateur »

- VII. Personnalisation de la fenêtre de Tchat

- VII-A. En-tête

- VII-B. Champs

- VII-C. Template

- VIII. Chargement dynamique des champs

- IX. Conclusion

- X. Remerciement

I - Présentation

LiveZilla est très certainement le futur en matière d'assistance en ligne. Il vous permet de dialoguer instantanément avec vos clients. Le gros avantage par rapport au support par mail c'est bien sûr la rapidité d'échange entre les deux parties. Bien entendu cette rapidité peut se retrouver avec le support téléphonique, mais les clients ont toujours une certaine crainte sur l'attente et sur les coûts que ce support peut engendrer. LiveZilla apporte une solution à ce souci de coût, il est totalement gratuit !

Fonctions principales & avantages :

- Installation très simple

- Gratuit

- Support SSL

- Nombre d'opérateurs illimité

- Support de la webcam

- Suivi des visiteurs

- Personnalisable

- Dialogue entre opérateurs

- ...

II - Téléchargement & Installation

Vous pouvez télécharger LiveZilla à cette adresse : http://www.livezilla.net/downloads/en/

Une fois que vous avez téléchargé et installé LiveZilla sur votre ordinateur, vous disposez de deux "programmes".

- LiveZilla Server Admin : Permet d'installer et de configurer LiveZilla sur le serveur distant.

- LiveZilla Client : Est le programme pour l'opérateur.

III - Installation sur le serveur

L'installation de LiveZilla est très simplifiée. Ouvrez le programme "LiveZilla Server Admin", puis sélectionnez "Create new LiveZilla Server".

La fenêtre suivante permet de créer l'utilisateur administrateur du serveur.

L'étape suivante vous permet de créer le premier groupe de support que vous désirez.

La simplicité d'installation se trouve notamment à la fenêtre suivante, car elle va vous permettre d'envoyer les fichiers nécessaires à la configuration et au fonctionnement de LiveZilla directement en FTP depuis l'interface.

Vous avez aussi la possibilité d'extraire les fichiers directement sur votre ordinateur et ensuite de les envoyer sur votre serveur. Évidemment je vous conseille le premier choix, bien plus simple.

Renseignez toutes les informations nécessaires à la connexion au serveur FTP.

Si vous avez besoin de créer un dossier, vous pouvez passer par le bouton "Select", qui vous permettra, entre autres, de créer, renommer ou sélectionner un dossier réservé pour LiveZilla.

Le logiciel va envoyer tous les fichiers nécessaires, cela dure quelques minutes. LiveZilla a besoin de droits supplémentaires sur certains dossiers, la fenêtre suivante vous permet de les attribuer automatiquement. Si vous n'avez pas les droits, cochez la case "Skip" et contactez votre administrateur afin qu'il donne les droits à la liste des dossiers.

Une fois les fichiers envoyés et les droits donnés, il faudra donner un nom au serveur. Ce nom vous servira pour vous connecter pour modifier la configuration, mais aussi pour la connexion des opérateurs.

L'étape suivante va générer la base de données, pour cela il faut renseigner les différents champs correspondant à vos informations de connexion à votre base de données. Le préfixe correspond au mot qui sera écrit devant chaque nom de table, je vous conseille de mettre un "z" devant, comme ça toutes les tables de LiveZilla se situeront en fin de votre base de données.

Une fois les informations complétées, cliquez sur "Create Tables". Une fois que la génération a réussi, cliquez sur "Validate Database", la case à cocher "Configuration validated" doit être cochée.

L'installation de LiveZilla Server est terminée.

IV - Configuration des opérateurs

Une fois l'installation du serveur terminée, il faut maintenant configurer les opérateurs et/ou les groupes. Aller sur l'interface du programme "LiveZilla Server Admin" et sélectionner "User Management".

Nous allons créer notre premier opérateur, pour cela dans l'onglet "Operators" cliquez sur "New".

Dans le premier onglet, "Account", vous pouvez saisir les renseignements concernant l'opérateur. Vous pouvez aussi sélectionner les groupes dans lesquels il pourra exercer.

En ce qui concerne le mot de passe, vous forcerez le changement du mot de passe lors de la première connexion de l'opérateur en cochant la case "User has to change his password on next logon"

L'onglet" Permissions", comme son nom l'indique, permet de gérer les actions possibles et impossibles que pourra effectuer l'opérateur.

L'onglet "Predefined Messages", permet de créer des messages qui seront envoyés automatiquement. Par exemple lors de l'ouverture du chat, etc…

Nous allons ajouter un message de bienvenue. Pour cela, cliquez sur "New", puis sélectionnez la langue "FR - French".

Tapez le message de bienvenue que vous souhaitez. Si vous voulez ajouter des champs automatiques, par exemple le nom de l'opérateur, son mail, le groupe, etc…, faites un clic droit dans la zone de texte et sélectionnez l'élément dans le menu "Add Placeholder".

Vous pouvez aussi configurer le message émis lorsqu'un opérateur invite un visiteur à discuter, mais aussi le message émis lorsque vous redirigez un visiteur vers un lien.

Le dernier onglet "Security" permet de faire des restrictions de connexion de l'opérateur selon l'adresse IP.

V - Installation sur le site web

Maintenant que le serveur et les opérateurs sont configurés, il ne nous reste plus qu'à intégrer le bouton, qui indiquera s'il y a des opérateurs disponibles et fera le lien vers la fenêtre de dialogue.

Pour cela, dans "LiveZilla Server Admin", sélectionnez "Link Generator / Script Generator".

LiveZilla intègre plusieurs styles de boutons, mais le problème est qu'ils sont tous en anglais, vous pouvez vous rendre à cette adresse : http://www.livezilla.net/livechaticons/en/, afin de télécharger les images sources (.psd) et les modifier à votre guise. Ou bien, vous pouvez enregistrer ces deux images sur votre ordinateur.

Ensuite, cliquez sur "Change" puis dans "Add new Banner Set" et pour finir sélectionnez les deux images. Lors de la validation, elles seront stockées sur le serveur.

Par souci de validité de votre page qui contiendra le bouton, il est fortement conseillé de sélectionner le "Doctype : XHTML 1.0"

Il vous suffira ensuite de cliquer sur "Copy to clipboard" et de coller le code à l'endroit où vous souhaitez faire apparaitre le bouton.

VI - Le logiciel « Opérateur »

Notre bouton d'accès au "Tchat" est maintenant installé sur votre site, cependant lorsque vous cliquez dessus, vous n'accédez pas au "Tchat" mais à la fenêtre de message hors ligne. C'est normal puisqu'il n'y a aucun opérateur connecté.

L'opérateur doit donc lancer "LiveZilla Client" puis sélectionner dans la liste le serveur désiré et enfin saisir ses informations de connexion.

Si vous souhaitez utiliser l'application en français, cliquez sur "Extras" puis dans "Translation MODE". Ensuite dans la fenêtre principale du client, cliquez sur l'icône "?" située en haut à droite, à côté du bouton pour fermer l'application.

La fenêtre qui s'ouvre permet de changer chaque mot de toute l'application. Vous pouvez télécharger une version française déjà faite, pour cela sélectionnez "FR" dans la liste déroulante "Language" puis cliquez sur "Download latest". Enfin validez votre choix par "Save"

Votre application est maintenant en français.

Si maintenant vous vous rendez sur la page où vous avez inséré votre bouton, vous pouvez voir que le "Tchat" est maintenant disponible.

Lorsqu'un visiteur cliquera sur ce bouton, l'opérateur verra apparaitre la fenêtre ci-dessous, dans le coin inférieur droit de son écran. Cette fenêtre lui indique qu'un visiteur cherche à avoir une discussion.

Double cliquez sur cette fenêtre, puis sur "Accepter la demande". Vous dialoguez dès à présent avec votre visiteur.

LiveZilla regorge de fonctionnalités toutes plus intéressantes les unes que les autres, je vous ai juste présenté le strict minimum pour faire fonctionner et utiliser LiveZilla.

VII - Personnalisation de la fenêtre de Tchat

L'application fonctionne complètement, cependant vous souhaitez personnaliser un peu l'interface web avec le logo de votre société, changer les couleurs, etc… La fenêtre de "Tchat" est Open Source, vous pouvez donc la personnaliser à votre gout.

VII-A - En-tête

Il est vrai que cet en-tête ne fait pas trop personnel, si vous souhaitez le remplacer par le logo de votre société, ou bien mettre une autre image, vous pouvez le faire facilement par l'interface de "LiveZilla Server Admin" puis dans "Server Configuration". Le bouton "Edit HTML" vous permet de modifier la taille de fenêtre, le titre, etc… mais aussi et surtout les images d'en-tête.

VII-B - Champs

Qu'il y ait un ou des opérateurs disponibles ou non, lorsque le visiteur cliquera sur le bouton pour lancer le "Tchat", il lui sera demandé un certain nombre de renseignements. Par défaut, il est demandé le nom, le courriel, la société, et la question.

Mais selon votre besoin vous avez peut-être besoin de changer les noms de ces champs ou bien d'en supprimer ou d'en rajouter.

Dans l'interface de configuration du serveur, allez dans "Edit Inputs". Deux onglets s'offrent à vous, "Default Inputs" et "Custom Inputs". LiveZilla a besoin des 4 champs par défaut pour fonctionner, vous pouvez cependant changer leur nom dans la colonne "Caption". Pour rajouter un champ, faites-en de même, mais dans l'onglet "Custom Inputs".

Si vous souhaitez rendre obligatoire ou cacher un champ, il faut se rendre dans "User Management" de "LiveZilla Server Admin" puis dans l'onglet "Groups" et enfin éditer le groupe sur lequel vous souhaitez cacher ou rendre obligatoire le/les champ(s).

Les onglets "Chat Login Inputs" et "Offline Message Inputs" correspondent respectivement aux champs lorsqu'il y a des opérateurs disponibles et lorsqu'il n'y a personne.

La colonne de cases à cocher "Hidden" permet de cacher le champ et la colonne "Mandatory" rend obligatoire le champ.

VII-C - Template

Si vous souhaitez modifier la mise en forme de la fenêtre de "Tchat", vous pouvez le faire, mais ce n'est pas simple.

Pour rendre l'interface de "Tchat" plus en accord avec votre site, le plus simple est de modifier la couleur des images. Celles-ci se trouvent tout simplement dans le dossier "images" situé sur votre serveur, dans le dossier où vous avez installé LiveZilla.

Si toutefois vous souhaitez modifier la structure de la page, il faut avoir de très bonnes connaissances en HTML et en Template, car l'interface Web est construite avec des "Templates". Vous trouverez tous les fichiers templates dans le dossier "templates". Les fichiers portent l'extension ".tpl".

Attention, veillez à ne pas supprimer le lien situé en pied de page pour soutenir ce projet.

VIII - Chargement dynamique des champs

Il peut être intéressant de pré remplir les champs de renseignements. Par exemple si c'est un membre inscrit et connecté, vous connaissez déjà son nom et son e-mail, il est donc inutile de les lui redemander.

Allez dans le générateur de lien "Link Generator / Script Generator" de l'interface de "LiveZilla Server Admin" puis cliquez sur le bouton "Advanced" et pour finir dans l'onglet "Parameters". Cochez ensuite la case "I want to pass-thru dynamic data from my website.".

La case à cocher en face de chaque ligne permet de laisser la saisie libre des champs non cochés.

La valeur de chaque champ est remplacée par "<!--replace_me_this_b64url_[nom du champ]-->", il faudra, dans le code inséré, remplacer ce commentaire par la valeur souhaitée encodée en base 64.

Exemple PHP

<a href="http:// www.serveur.com /livezilla/chat.php?en=<?php echo base64_encode("Valeur"); ?>&amp;mp=1" target="_blank">
<img src="http://www.serveur.com/livezilla/image.php?id=01&amp;type=inlay" width="120" height="30" border="0" alt="LiveZilla Live Help">
</a>

Dans certains langages, il n'y a pas de fonction toute faite pour convertir une chaine de caractères en base 64. Par exemple en C# il faut utiliser cette fonction :

static public string EncodeTo64(string toEncode)
{
byte[] toEncodeAsBytes = System.Text.ASCIIEncoding.ASCII.GetBytes(toEncode);
string returnValue = System.Convert.ToBase64String(toEncodeAsBytes);
return returnValue;
}

<a href="http:// www.serveur.com /livezilla/chat.php?en=<%=EncodeTo64("Valeur") %>&amp;mp=1" target="_blank">
<img src="http://www.serveur.com/livezilla/image.php?id=01&amp;type=inlay" width="120" height="30" border="0" alt="LiveZilla Live Help">
</a>

Vous constaterez que lorsque vous cliquez sur le bouton d'accès au "Tchat", le champ "Nom" est pré rempli avec "Valeur".

IX - Conclusion

Vous avez dès à présent un système d'assistance par messages instantanés. Si vous avez des questions ou que vous souhaitez en savoir plus, je vous invite à vous rendre sur le site officiel de LiveZilla (http://www.livezilla.net), de consulter la FAQ (http://www.livezilla.net/faq/en/) ou bien d'aller sur le forum (http://www.livezilla.com/forum/).

X - Remerciement

Je tiens particulièrement à remercier aieeeuuuuu pour sa relecture attentive.