Intégration Tawk.to

Modifié le 08/11/2022 13:22

À propos de cette intégration

SAS_IntegrationNotRESTIntroduction

Il existe plusieurs moyens d’intégrer des systèmes tiers avec Service Apps. Cela, en fonction des besoins métiers, des contraintes d’architecture et de sécurité en vigueur ainsi que des spécificités de chaque application ou service tiers. Notamment, vous pouvez utiliser les datasources REST, CSV, Online CSV ainsi que le widget Html Script.

Cette page présente un processus d’intégration type déjà mis en œuvre dans un contexte client.

Pour plus de détails sur cette intégration, n'hésitez pas à contacter votre interlocuteur EasyVista ou vos fournisseurs de services et intégrateurs habituels.

Synthèse de l'intégration

Tawk.to est un logiciel de Live Chat 100% gratuit (sans spam ni publicité), disponible dans plus de 20 langues, qui vous permet de communiquer en temps réel avec des prospects et clients visitant vos applications et sites web, et d’améliorer sensiblement leur engagement en ligne.

Cette intégration très simple à mettre en œuvre permet d’insérer un chat widget tawk.to directement dans une application Product name - ev sas.png, en utilisant un widget Html Script.

Vous pouvez également facilement configurer Tawk.to et Product name - ev itsm.png pour, par exemple, créer des incidents dans Product name - ev itsm.png à partir de toutes les transcriptions de conversations (chats) et conversations manquées (hors-ligne).
 

Flux d’intégration des données (sens) Type d'authentification Options du connecteur d'intégration

Product name - ev sas - big.png

Up and Down arrow.png

Logo - Tawk to.png

Down arrow.png

Product name - ev itsm - big.png

N/A

Product name - ev itsm.png Version SaaS

Product name - ev itsm.png Version On-premise

Check icon.png

Check icon.png

Version SaaS du produit tiers

Version On-premise du produit tiers

Check icon.png

Not check icon.png

Processus d'intégration pas-à-pas

Entre Tawk.to et Product name - ev sas - big.pngev Service Apps

Open url.png voir l’aide en ligne de Tawk.to :

Tawk.to peut être intégré avec Product name - ev sas.png en 3 étapes simples :


Étape 1: Vérifier la liste des prérequis

  • Vous avez un compte tawk.to et les identifiants pour vous y loguer. Sinon, utilisez le formulaire de création de compte tawk.to puis validez-le via le lien d’activation reçu dans la boîte aux lettres du compte de messagerie que vous avez indiqué.
             Open url.png voir Créer un nouveau compte (EN)
  • Pour pouvoir utiliser le chat widget, chaque nouveau membre doit posséder un compte tawk.to.
  • Votre application Product name - ev sas.png ne possède pas de propriété dans votre compte tawk.to.
  • Tawk.to vous permet de rajouter plusieurs membres à une propriété. Ces membres peuvent alors communiquer (via chat) avec les visiteurs de la propriété qui engagent une conversation via le chat widget. L’adresse e-mail des nouveaux membres peut être ajoutée facilement, avec un rôle Agent ou Admin, via le menu Admin > Property Members.


Étape 2 : Créer une nouvelle propriété et un chat widget tawk.to, puis copier son code JavaScript

1. Loguez-vous à votre compte tawk.to.

2. Créez une nouvelle propriété en cliquant sur Admin dans la barre de navigation supérieure gauche puis renseignez les informations de chaque étape de l'assistant. Note : Si celui-ci ne se lance pas automatiquement, cliquez sur [ + ADD ] dans le panneau Admin pour utiliser le processus standard de création.
         Tawk to - Creation wizard - Admin.png

     Step 1 - Site Information

  • Attention : Dans le panneau Admin, les champs Site Name et Site URL sont éditables.
  • Tawk.to attribue des identifiants uniques (notamment un Site ID) à chaque propriété. Le code du chat widget dépend des identifiants uniques de votre propriété.

          Tawk to - Creation wizard - step 1.png

  • Site Name : Nom de l’application Product name - ev sas.png à laquelle vous souhaitez intégrer un chat widget, ou à défaut le nom vous permettant d’identifier facilement votre site et de suivre la propriété correspondante.
  • Site URL : URL de l'application :
    • soit saisissez uniquement la partie de l'URL identifiant votre plateforme (appelée base uri) ;
               Example documentation icon FR.png  https://mycompany-apps.easyvista.com
    • soit saisissez la totalité de l'URL (en mode Conception ou en mode Exécution). Ceci vous permet alors de facilement identifier l'application Product name - ev sas.png à laquelle la propriété est associée si vous modifiez par inadvertance le champ Site Name de la propriété.

      Note : Les applications Product name - ev sas.png ont :

      • en mode Conception, une URL de type https://mycompany-apps.easyvista.com/index.php?timestamp=1474643995412&name=com.mycompany.57e4f6483d9bc&studiomode 
      • en mode Exécution, une URL de type https://mycompany-apps.easyvista.com/index.php?timestamp=1474644039302&name=com.80007.57e4f6483d9bc|555c55c0ac965&showapp=0

      La valeur indiquée après le paramètre timestamp change systématiquement, alors que la dernière suite de chiffres, qui identifie l’application de façon unique, reste inchangée.

     Step 2 - Invite Agent
          Étape facultative, cliquez sur [ SKIP THIS STEP ] pour la sauter.
         Tawk to - Creation wizard - step 2.png

  • Vous pouvez ajouter les adresses e-mails d’autres personnes que l'adresse e-mail utilisée pour la création du compte tawk.to que vous utilisez.
  • Vous pouvez leur attribuer un rôle Agent ou Admin. Note : Un agent avec le rôle Admin a le droit de configurer le chat widget de votre application.
     

     Step 3 - Install Chat Widget
          Copiez l’intégralité du code JavaScript encadré en rouge.

Note : Vous pouvez envoyer ce code par e-mail à la personne chargée d'intégrer le chat widget dans l'application Product name - ev sas.png, en cliquant sur [ EMAIL THESE INSTRUCTIONS TO MY WEB DEVELOPER ].

          Tawk to - Creation wizard - step 3.png

3. Cliquez sur [ DONE ] pour terminer la création de la nouvelle propriété associée à votre compte tawk.to.

4. Pour accéder aux détails de la propriété, sélectionnez-la puis cliquez sur Wheel icon.png [ PROPERTY SETTINGS ] dans le panneau Admin. Chaque propriété est identifiée de façon unique par un Site ID, une API Key et un Ticket Forwarding Email qui lui sont propres.
         Tawk to - Modify property.png


Étape 3 : Intégrer dans une application Product name - ev sas.png le code JavaScript pour afficher le chat widget tawk.to

PasteJavaScriptCode

1. Allez sur Product name - ev sas.png et ouvrez l'application souhaitée.

2. Affichez le chat widget via un widget Html Script :

  • dans le volet Objets, cliquez sur Apps - Add widget icon.png ; ouvrez la catégorie Basic et cliquez-glissez le widget HTML Script sur le volet Conception ;

    Best Practice icon.png  Vous pouvez placer le widget Html Script n’importe où sur une page car le chat widget apparaît (par défaut) en bas à droite de l’écran de l’utilisateur. Toutefois, pour le retrouver plus rapidement, sans faire une recherche par nom de widget, insérez-le de préférence en bas de page.

  • renommez le nouveau widget pour l'identifier facilement ;
  • collez le code JavaScript obtenu à l'étape 2 dans la zone Theme > Footer > Footer et cochez la case Display.

    Best Practice icon.png   Collez le code du chat widget dans l'une des sections Header ou Footer et non dans le champ Html Code. Cela permet d'afficher le chat widget sans être limité à la hauteur du widget Html Script, et de le faire apparaître sur toutes les pages de l'application.

Note : Dans certains cas, vous pouvez également utiliser le widget Secured Html et coller le code JavaScript directement dans le champ Html Code.

3. Cliquez sur EVApps - GUI - Execute icon.png pour passer en mode Visualisation et testez le bon affichage et fonctionnement du chat widget.



Entre Tawk.to et Product name - ev itsm - big.pngev Service Manager

Open url.png voir aide en ligne :

Tawk.to peut être intégré avec Product name - ev itsm.png en 3 étapes simples :


Étape 1: Vérifier la liste des prérequis

  • Vous avez un compte tawk.to et les identifiants pour vous y loguer. Sinon, utilisez le formulaire de création de compte tawk.to puis validez-le via le lien d’activation reçu dans la boîte aux lettres du compte de messagerie que vous avez indiqué.
             Open url.png voir Créer un nouveau compte (EN)
  • Vous avez un compte de messagerie (ex. : Exchange) dédié à l’intégration entre Tawk.to et Product name - ev itsm.png.

    Note : Les e-mails de ce compte de messagerie sont automatiquement supprimés par l’agent support technique une fois traités.

  • Vous avez un compte d’accès à votre plateforme Product name - ev itsm.png avec un profil et des droits d’accès et d’édition suffisants pour accéder au menu Administration > Agent support technique.


Étape 2 : Configurer dans Tawk.to l’envoi des e-mails à traiter par l’agent support technique

1. Loguez-vous à votre compte tawk.to.

2. Cliquez sur Admin dans la barre de navigation supérieure gauche puis sur Mail Notifications.
         Tawk to - Configure email sending 1 - step 1 ev itsm

3. Saisissez l’adresse e-mail du compte de messagerie utilisé par l’agent support technique puis cliquez sur [ SAVE ].

Example documentation icon FR.png  Pour configurer tawk.to afin que toutes les transcriptions de conversations (chats) et les conversations manquées (hors-ligne) fassent l’objet de la création d’incidents dans Product name - ev itsm.png, saisissez l’adresse e-mail du compte de messagerie utilisé par l’agent support technique dans cette intégration.
         Tawk to - Configure email sending 2 - step 1 ev itsm

Note : L’envoi de transcriptions de conversations et de notifications par e-mail fonctionne même si l’option Personne est sélectionnée.


Étape 3 : Configurer dans Product name - ev itsm.png l’agent support technique

Note : Contactez votre service desk ou votre administrateur Windows/Exchange si vous ne connaissez pas le paramétrage POP3/IMAP4 à utiliser pour l’accès (par l’agent support technique) au compte de messagerie créé pour cette intégration.

1. Dans Product name - ev itsm.png, allez sur le menu Administration > Agent support technique.

2. Cliquez sur Add icon.png pour ajouter une boîte aux lettres.

3. Saisissez les informations correspondant au compte de messagerie dédié à l’intégration entre Tawk.to et Product name - ev itsm.png.

Attention : Cochez la case Création automatique des demandeurs pour que les incidents soient créés.

          Example documentation icon FR.png  Compte de messagerie Outlook Office 365
         Tawk to - Example configure ast - step 3 ev itsm.png

4. Allez sur la liste des incidents et vérifiez que ceux-ci ont bien été créés.
         Tawk to - Verify incidents list - step 3 ev itsm.png

Note : Tawk.to fournit l’URL des documents joints aux conversations (Chat) dans les transcriptions. Ces documents sont hébergés sur la plateforme SaaS de tawk.to et sont accessibles à tout moment via votre navigateur.
         Tawk to - Verify incident url - step 3 ev itsm.png

Cas d’utilisation

UseCaseTawkTo

Le chat widget tawk.to est intégré dans l'application modèle Standard Service Workplace. Pour l’utiliser avec ce modèle, utilisez votre propre compte tawk.to et remplacez le code JavaScript par celui correspondant à la propriété créée pour votre propre application.

Tags :
Powered by XWiki © EasyVista 2022