Introduction

Wildix WebRTC Kite est une solution professionnelle de communication basée sur la technologie WebRTC, pleinement intégrée dans le système de Communication Unifiées Wildix.

Naviguant sur votre site internet, le visiteur peut alors d’un simple clic démarrer un chat, appeler ou démarrer un visioconférence, partager un fichier ou son écran avec un opérateur du service qu’il souhaite contacter.

Actions pris en charge:

• Chat
• Appel audio
• Appel vidéo
• Partage d’écran
• Echange de fichier

La solution WebRTC Kite Wildix peut être ajoutée à votre site internet des façons suivantes :

• Un bouton d’appel personnalisable, avec ou sans la demande de l’autorisation
• Widget personnalisable (intégré dans le site Web ou dans une page web séparée), avec ou sans la demande de l’autorisation
• Signature email HTML personnalisable, avec ou sans la demande de l’autorisation

Vous pouvez trouver un exemple d’implantation de la solution Kite ici : www.wildix.com/contacts

La solution Wildix Kite est entièrement intégrée dans le système de téléphonie Wildix :

• les demandes de chat sont gérées par les utilisateurs de PBX via l’interface Collaboration
• les appels audios peuvent être gérés à partir de tous les appareils Wildix, y compris: téléphones WP, téléphones W-AIR, PC (Web phone), les appareils mobiles (Collaboration Wildix Mobile pour iOS et Android)
• La solution KITE de Wildix utilise un Dialplan à part qui facilite la personnalisation du service
• les demandes de chat du service Kite peuvent être réparties aux agents ou aux groupes de réponse

Configuration

Exigences

Navigateurs web :

• Chrome
• Firefox
• Safari

Nous vous recommandons d’utiliser la dernière version stable téléchargeable de navigateur web.

License :

• UC-Business pour chaque utilisateur, plus d'infos : https://manuals.wildix.com/licensing/ 

Ouvrir les ports sur le pare-feu:

Plus d'infos : Ports used by Wildix services

Configuration du Dialplan

1. Ouvrir la procédure Dialplan “kite” (WMS -> Dialplan -> Procédure du Dialplan)
2. Ajouter “pbxinternal (Dialplan utilisateurs…)” aux Procédures incluses de la procédure “kite”
   
   

Maintenant, tous les utilisateurs enregistrés sur votre PBX peuvent recevoir des appels via le service Kite.

Essayer Wildix Kite

• Ouvrir un navigateur web compatible et taper : https://kite.wildix.com/Nom_du_PBX/Numéro_d_extension
  • Nom_du_PBX est le Nom de votre iPBX Wildix
  • Numéro_d_extension est le numéro d’extension enregistré sur le PBX ou le numéro du groupe de réponse
    

Exemple : https://kite.wildix.com/ucit/324

• Entrer votre nom et email (optionnel) et cliquer sur Se connecter (il est aussi possible de se connecter via les identifiants de réseaux sociaux) :
  
  

• Si le numéro d’extension renseigné est correct, alors le chat se démarre automatiquement :
  
  

L’opérateur reçoit la demande de chat sur l’interface Collaboration.

En utilisant les boutons relatifs, l’utilisateur Kite peut effectuer un appel audio, faire démarrer le flux vidéo ou le partage d’écran avec l’opérateur, envoyer un fichier (utiliser le bouton de ” trombone “, ou glisser le fichier dans le champs de saisie).

Limiter la visualisation des informations Kite

Via les groupes ACL vous pouvez interdire la visualisation de l’image personnelle et de l’état de présence d’un utilisateur :

• Aller sur WMS -> Utilisateurs -> Profils (appellation des groupe de discrimination)
• Séléctionner le groupe
• Ajouter une règle de discrimination “ne peut pas”, “partager le statut Kite”

Via Dialplan vous pouvez limiter les numéros qui peuvent être composés via le service Kite

• Aller sur WMS -> Dialplan -> Procédure du Dialplan
• Sélectionner la procédure “kite”
• Programmer la procédure selon vos envies

Vous pouvez supprimer la procédure “pbxinternal (Dialplan utilisateurs…)” et ensuite ajouter un par un les extensions qui peuvent être jointes par les utilisateurs externes. Sinon, vous pouvez configurer le système pour acheminer les appels entrants vers certains numéros, vers la messagerie vocale ou vers d’autres utilisateurs.

Personnaliser Kite

Afficher les informations d’appel des agents

Grâce à l’application Wildix API, il est possible d’afficher l’état de présence, la disponibilité, les coordonnées, la géolocalisation de tous vos agents. Cette information est synchronisée avec Wildix Collaboration. Toutes les informations sont alors enregistrées sur le compte de l’utilisateur.

Afficher les informations suivantes :

• Afficher l’image personnelle de l’utilisateur :

https://kite.wildix.com/PBX_Nom/Numéro_d_extension/api/avatar

• Afficher l’état de présence de l’utilisateur :

https://kite.wildix.com/PBX_Nom/Numéro_d_extension/api/presence/image

• Afficher l’état de présence et la géolocalisation de l’utilisateur dans le format JSON :

https://kite.wildix.com/PBX_Numéro_Nom/Numéro_d_extension/api/presence

Exemple :
{“type”:”result”,”result”:{“online”:true,”show”:false,”device_show”:false,”status”:false,”location”:{“address”:false,”lat”:false,”lng”:false}}}

• Afficher toutes les informations de l’utilisateur dans le format JSON :

 https://kite.wildix.com/PBX_Nom/Numéro_d_extension/api/info

Exemple :
{“type”:”result”,”result”:{“uid”:”XXXXXXX”,”name”:”User Name”,”avatar”:”http:\/\/XXX.XX.X.XX\/user_avatar\/XXX.png”,”pbx”:”0050568XXXXX”,”presence”:{“online”:true,”show”:false,”device_show”:false,”status”:false,”location”:{“address”:false,”lat”:false,”lng”:false}},”pbxIp”:”XXX.XX.X.XX”}}

Variables possibles en détail :

• uid : Identifiant unique de l’utilisateur
• name : nom de l’utilisateur
• avatar : http:\/\/[PBX_IP_address]\/user_avatar\/[Extension_Number].png
• pbx : numéro de série du PBX
• Presence :
  • online : l’utilisateur est connecté ou déconnecté
  • show : statut choisi par l’utilisateur (absent, ne pas déranger)
  • device_show : état de l’appareil (en conversation, appel entrant)

• status : message associé à l’état choisi par l’utilisateur
• location : information de géolocalisation (adresse, latitude, longitude)
• pbxIp : l’adresse IP du PBX

Supprimer la demande d’autorisation

Les utilisateurs externes peuvent se connecter au service de Kite sans avoir à remplir la fenêtre d’autorisation.

Utiliser le lien Kite permet à un utilisateur d’entrer en contact directement avec un utilisateur de l’iPBX ou un groupe de réponse sans devoir renseigner son nom et son adresse email à chaque fois :

https://kite.wildix.com/Nom_du_PBX/Numéro_d_extension?name=Nom_du_client&email=Email_du_client

où

• PBX_Name est le nom de votre iPBX Wildix PBX
• Numéro_d_extension est le numéro d’extension de l’utilisateur ou le numéro de groupe de réponse
• Nom_du_client est le nom d’utilisateur Kite
• Email_du_client est l’adresse email de l’utilisateur Kite 

Exemple : https://kite.wildix.com/ucit/324?name=Elena&email=elena.kornilova@wildix.com

Les coordonnées de l’utilisateur Kite sont remplis par défaut :

Pour permettre à un utilisateur Kite de se connecter automatiquement, il faut ajouter la valeur “&autologin=1” à la fin du lien :

Exemple : https://kite.wildix.com/ucit/324?name=Elena&email=elena.kornilova@wildix.com&autologin=1

Appel direct (sans devoir passer par le chat)

Démarrer un appel direct vers un numéro de téléphone présent dans le dialplan “kite”, sans que le chat s’ouvre :

tapez dans l’URL : https://kite.wildix.com/nom_du_pbx/numero_de_telephone

où

• nom_du_pbx est le nom de votre PBX Wildix
• numero_du_telephone est le numéro de téléphone présent dans la procedure Dialplan “kite” (problème connu : pour le moment les lettres ne sont pas prises en charge, seuls les chiffres)

Lien de Kite dans l’iframe

Pour insérer le lien de contact Kite dans la page web avec une iframe, il faut ajouter “/embedded” à la fin du code, comme dans l’exemple ci-dessous :

<iframe src=”https://kite.wildix.com/0123456a7b89/60/embedded” width=”300″ height=”300″ frameborder=”0″ scrolling=”no”>

Télécharger le modèle HTML de la page web de Contacts Kite

Télécharger le dossier *.zip contenant le modèle HTML. Vous pouvez donc personnaliser ce modèle selon vos envies.

Voici comment peut apparaître un agent / un groupe d’appel sur votre page web contact (modèle HTML "contacts-new") :

Ajouter le Widget Kite sur votre site internet

Exemple de Widget Kite intégré au site internet de Wildix : www.wildix.com:

• Aller sur la page de génération de code : http://kite.wildix.com/pages/widget/
• Remplir les champs
  • Serial: le nom de votre iPBX Wildix
  • Extension: le numéro d’extension de l’utilisateur ou le numéro de groupe de réponse
  • Site URL: adresse URL de votre site web
  • Top title / Bottom title: saisir ici le titre et la description de votre widget Kite, comment souhaitez vous que celui-ci soit affiché sur votre site internet.
  • Default language: sélectionner la langue de la fenêtre d’autorisation pour l’utilisateur Kite (ou sélectionner l’option “Auto-detection”)
  • Auto connect: cette option permet aux utilisateurs de l’iPBX de recevoir la notification une fois l’utilisateur Kite ouvre la page web (même si le widget Kite n’est pas ouvert)
  • Auto login: activer cette option pour permettre à un utilisateur Kite de se connecter sans avoir besoin de saisir ses coordonnées, pour cela cocher l’option et saisissez le nom et l’adresse email de l’utilisateur Kite dans les champs correspondants afin de générer un Widget Kite ultra-personnalisé (“Name” et “Email”)
  • Widget behavior: ici vous pouvez choisir le comportement du Widget
    
    • – il apparaît systématiquement par défaut (“Default”)
    • – il apparait après un délai d’attente (“Make widget expanded by default” ; definir le délai d’attente en secondes)
    • – il apparaît une fois sélectionné dans une nouvelle fenêtre (“Do not expand the widget. Open it in new window”
  • Position et Offsets: sélectionner et optimiser la position du Widget sur votre site web
• Cliquer sur Generate
• Copier et coller le code généré sur votre site internet entre les balises “head” ou sur une page web vierge.

Créer la signature email avec le bouton de Kite

Suivez le lien pour générer la signature HTML pour votre email

Exemple :

<table cellpadding="7" cellspacing="0">

<tbody><tr><td width="75" height="5" align="left" valign="middle" bgcolor="#FFFFFF"><img id="picture" style="border-color:#DDD;width: 85px;height: 85px;" src="https://kite.wildix.com/ucit/324/api/avatar" width="85" height="85"></td>

<td width="250" height="5" align="left" valign="middle"><table><tbody><tr><td><div style="line-height: 25px;"><span id="uName1" style="font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #000000; font-weight: bold;">Elena Kornilova</span></div></td></tr>

<tr><td><div style="line-height: 14px;"><span id="uJob1" style="font-family: Verdana, Geneva, sans-serif; text-align: left; font-size: 12px; color: #000000;">Documentation & Tech communications Manager</span></div></td></tr>

<tr><td><div style="line-height: 14px;"><span id="uCompany1" style="font-family: Verdana, Geneva, sans-serif; text-align: left; font-size: 12px; line-height: 22px; color: #000000;">Wildix</span><span id="separator1" style="font-family: Verdana, Geneva, sans-serif; text-align: left; font-size: 10px; visibility: visible;"> | </span><span id="uWebsiteShow1" style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: 0000ff; text-decoration: underline;"><a href="http://www.wildix.com">www.wildix.com</a></span></div></td></tr></tbody></table></td></tr>

<tr><td colspan="2" valign="middle"><span contenteditable="true" id="simple" style="font-family:Verdana, Geneva, sans-serif; text-align:left; font-size:12px; line-height:25px; color: #000000;">Prefer online communication?</span><br>

<span id="kiteText1" style="font-family:Verdana, Geneva, sans-serif; font-size:15px; line-height:25px; color: #0000FF; text-decoration:underline; font-weight:bold"><a href="https://kite.wildix.com/ucit/324">Click here to chat with me now</a></span></td></tr>

<tr><td colspan="2" valign="middle"><div style="line-height:12px"><span id="tel1" style="font-family: Verdana, Geneva, sans-serif; text-align: left; line-height: 12px; font-size: 10px; color: rgb(0, 0, 0); visibility: hidden; display: none;">Tel: </span><span id="uPhone1" style="font-family: Verdana, Geneva, sans-serif; text-align: left; font-size: 10px; color: rgb(0, 0, 0); display: none;"><br></span>

<span id="uAddress1" style="line-height: normal; font-family: Verdana, Geneva, sans-serif; font-size: 10px; color: rgb(0, 0, 0); display: none;"></span></div>

<div style="line-height:12px"><p><span id="uLinkedin1" style="font-family:Verdana, Geneva, sans-serif; font-size:10px; color: 0000FF; text-decoration:underline; display:none;"><a href="">Add me on LinkedIn</a></span></p></div>

<div style="line-height:12px"><p><span id="uCustomLink1" style="line-height: 12px; font-family:Verdana, Geneva, sans-serif; text-align:left; font-size:10px; display:inline-block; color: #000000; display:none;"></span></p></div>

<div style="line-height:12px"><p><span id="customField1" style="font-family:Verdana, Geneva, sans-serif; font-size:10px; color: #000000; display:none;"></span></p></div>

</td></tr>

</tbody></table>