Guide d'installation du SDK Web

Cette page explique comment installer et utiliser le SDK Web CCAI Platform (Contact Center AI Platform). Pour vous aider à vous lancer, Google vous recommande de télécharger et d'utiliser nos exemples de fichiers du SDK Web version 2.

Avant de commencer

1. Incluez le chargeur du SDK Web CCAI Platform dans votre client Web.

   <script src="https://websdk.ujet.co/v2/loader.js"></script>
   

2. Initialisez le SDK Web CCAI Platform avec votre COMPANY_KEY.

3. Initialisez l'authentification avec votre COMPANY_SECRET à l'aide de votre code de backend.

Workflow d'installation

Commencer

Les sections suivantes fournissent des informations pour vous aider à vous lancer avec le SDK Web CCAI Platform.

Initialiser le SDK Web

Vous pouvez initialiser le SDK Web à l'aide de votre clé d'entreprise.

Remarque : Si vous souhaitez utiliser la navigation simultanée, consultez également Configurer le SDK Web pour la navigation simultanée.

Obtenir la clé de votre entreprise

Pour obtenir la clé de votre entreprise :

1. Connectez-vous au portail de la plate-forme CCAI à l'aide d'identifiants administrateur.

2. Cliquez sur Menu, puis sur Paramètres > Paramètres pour les développeurs.

3. Accédez au volet Clé et code secret de l'entreprise, puis enregistrez le code dans le champ Clé de l'entreprise.

Vous pouvez ensuite initialiser le SDK Web avec la méthode UJET(config) et l'événement ujet.on('created', function). Indiquez l'hôte de votre instance CCAI Platform, par exemple myccaip.uc1.ccaiplatform.com.

// INITIALIZE WEB SDK
var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "https://myccaip.uc1.ccaiplatform.com",
});

ujet.on('created', function () {
  ujet.authenticate(getAuthToken);
});

Vous pouvez également utiliser l'option d'authentification sans événement créé :

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  authenticate: getAuthToken,
  host: "https://myccaip.uc1.ccaiplatform.com",
});

où getAuthToken() est une fonction qui fait appel à un mécanisme de signature JWT depuis votre backend :

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token')
    .then(function(resp) {
      // { token: '....' }
      return resp.json();
    });
}

où fetch() fait appel à un mécanisme de signature JWT de votre backend. Pour en savoir plus, consultez l'API Fetch de Mozilla.

Configurer le SDK Web pour le cobrowsing

La navigation conjointe est une fonctionnalité facultative qui permet à un agent de voir l'écran d'un utilisateur final et, éventuellement, de le contrôler. Pour utiliser la navigation simultanée, vous devez fournir le domaine et la clé de licence de votre instance CCAI Platform lors de l'initialisation du SDK.

Pour configurer le SDK Web pour le co-browsing, procédez comme suit :

1. Pour obtenir le domaine de navigation conjointe et la clé de licence de votre instance CCAI Platform, procédez comme suit :

   1. Connectez-vous au portail de la plate-forme CCAI à l'aide d'identifiants administrateur.

   2. Cliquez sur Menu, puis sur Paramètres > Paramètres du développeur.

   3. Accédez au volet Navigation conjointe et cliquez sur le bouton bascule pour l'activer.

   4. Enregistrez les valeurs dans les champs Domaine de navigation conjointe et Clé de licence.

2. Pour fournir le domaine de navigation à plusieurs et la clé de licence lors de l'initialisation du SDK, incluez le code suivant lorsque vous initialisez le SDK Web :

   var ujet = new UJET({
     // other options
     cobrowseOptions: {
       license: "LICENSE_KEY",
       trustedOrigins: ["CO-BROWSE_DOMAIN"],
       api: "CO-BROWSE_DOMAIN"
     },
     // other options
   })
   

   Remplacez les éléments suivants :

   • LICENSE_KEY : clé de licence que vous avez enregistrée à l'étape précédente

   • CO-BROWSE_DOMAIN : domaine de navigation à plusieurs que vous avez enregistré à l'étape précédente

Important : Lorsque vous configurez le SDK Web pour le co-browsing, il fournit des boîtes de dialogue de consentement par défaut permettant aux utilisateurs finaux de donner leur consentement pour les sessions de co-browsing. Pour personnaliser vos boîtes de dialogue de consentement, ainsi que le bouton de fin de session, consultez Personnaliser la boîte de dialogue de consentement et le bouton de fin de session pour la navigation conjointe.

Pour en savoir plus, consultez Configurer la navigation conjointe.

Initialiser l'authentification avec le code secret de votre entreprise

Remarque : Il est impératif de stocker votre COMPANY_SECRET de manière sécurisée sur votre serveur afin que l'application puisse valider votre identité. Sans cette précaution, des entités malveillantes peuvent agir en votre nom.

La fonction getAuthToken() doit appeler votre API et encoder votre charge utile avec votre COMPANY_SECRET.

Voici un exemple de signature JWT à l'aide d'ExpressJS :

const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = {}
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

Vous pouvez utiliser n'importe quel service de backend.

Content Security Policy

Si votre serveur de production dispose d'une règle Content Security Policy, ajoutez https://websdk.ujet.co/ à vos script-src et frame-src.

Compatibilité avec Internet Explorer 11

Pour prendre en charge Internet Explorer, babel-polyfill est utilisé dans notre code. Si votre site Web utilise également babel-polyfill, ne l'importez pas dans le SDK Web, car l'utilisation de la même bibliothèque globalement et dans le SDK Web peut entraîner une exception. Avant d'importer le package, nous vous recommandons d'ajouter du code pour vérifier cela et éviter ce problème.

Suivre les utilisateurs

L'exemple précédent ne permet pas de suivre les utilisateurs. Si vous souhaitez identifier les utilisateurs réguliers dans votre CRM et utiliser des réponses prédéfinies avec les informations des utilisateurs, vous devez ajouter des identifiants aux utilisateurs.

Pour ce faire, vous devez ajouter des identifiants aux emplacements suivants :

1. Transmettre au backend dans getAuthToken()

   function getAuthToken() {
     // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
     return fetch('/auth/token', {
       headers: {
         'Content-Type': 'application/json'
       },
       method: "POST",
       body: JSON.stringify({
         payload: {
           identifier: 'c727f2851b64b29761da170d0adee67a9a89c2d9960c8eee0ae53737413cfa4e',
           name: 'Test user',
           email: '[e-mail]',
           phone: '1800UJETSDK'
         }
       })
     }).then(function(resp) {
       return resp.json();
     });
   }
   

2. Ajouter à la charge utile lors de l'encodage du jeton JWT

   const express = require('express')
   const jwt = require('jsonwebtoken')
   
   const port = process.env.PORT || 3000
   const secret = process.env.COMPANY_SECRET || 'secret'
   
   const app = express()
   
   app.use(express.json())
   
   app.post('/auth/token', function (req, res) {
     const payload = req.body.payload
     payload['iss'] = 'YOUR_COMPANY_NAME'
     const iat = parseInt(Date.now() / 1000, 10)
     payload['iat'] = iat
     payload['exp'] = iat + 600
     const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
     res.json({ token })
   })
   
   app.listen(port, function () {
     console.log(`Listing at http://localhost:${port}`)
   })
   

3. Ajouter des options supplémentaires dans authentication()

   new UJET({
     // ...
     authenticate: function() {
       return getAuthToken().then({ token } => {
         return {
           token: token,
           user: {
             identifier: YOUR_UNIQUE_USER_ID,
             name: 'Test user' //optional,
             email: '[e-mail]', //optional,
             phone: '000000000' //optional
           }
         };
       });
     },
   })
   

Transfert de chatbot externe

Lorsque vous transférez un chat de l'agent virtuel à l'agent, vous pouvez remplacer le message d'accueil et transmettre les transcriptions à l'agent en remplissant le champ "external_chat_transfer" avec les données personnalisées. greeting_override est compatible avec la mise en forme Markdown.

{
  "external_chat_transfer": {
    "greeting_override": "Please hold while we connect you with a human agent.",
    "agent": {
      "name": "Agent Name",
      "avatar": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
    },
    "transcript": [
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:00Z",
        "content": [
          {
            "type": "text",
            "text": "Hello! How can I help you today?"
          },
          {
            "type": "buttons",
            "buttons": [
              {
                "label": "Create New Order",
                "selected": false
              },
              {
                "label": "Check Order Status",
                "selected": true
              },
              {
                "label": "Check Account Balance",
                "selected": false
              }
            ]
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:15Z",
        "content": [
          {
            "type": "txt",
            "text": "Ceck Order Status"
          }
        ]
      },
      {
        "sender": "aget",
        "timestamp": "021-03-15 12:00:16Z",
        "content": [
          {
            "type": "txt",
            "text": "Ican help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "enduser",
        "timestamp": "021-03-15 12:00:20Z",
        "content": [
          {
            "type": "mdia",
            "media": {
              "type": image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

Discuter des données personnalisées non signées

Lorsqu'une discussion est lancée, vous pouvez transmettre des données personnalisées avec l'objet de discussion. Les données personnalisées peuvent être le système d'exploitation, le numéro de version, l'emplacement ou toute autre donnée pouvant être pertinente pour le chat. Ces données ne sont pas chiffrées et ne doivent donc pas contenir d'informations permettant d'identifier personnellement l'utilisateur.

Vous pouvez également transmettre ces données personnalisées à un agent virtuel. Pour en savoir plus, consultez Agents virtuels.

var ujet = new UJET({
  // other parameters
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  },
});

Le format de données personnalisé est semblable à JSON. Chaque champ de données contient une clé, un libellé et une valeur. Voici un exemple :

{
  "k1": {
    "label": "Version",
    "value": "1.2.3"
  },
  "k2": {
    "label": "Dashboard",
    "value": "http://example.com"
  }
}

Dans cet exemple, k1 et k2 sont des clés. label est un libellé sur une page CRM, et value est la valeur du libellé.

Empêcher l'affichage de données personnalisées

Vous pouvez utiliser la propriété invisible_to_agent avec un objet customData pour empêcher l'affichage de données personnalisées signées ou non signées dans l'adaptateur d'agent. Dans l'exemple suivant, la version est indiquée dans l'adaptateur d'agent, mais pas la plate-forme.

var ujet = new UJET({
  // Other parameters
});

ujet.config({
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
      invisible_to_agent: true
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
      invisible_to_agent: false
    }
  }
});

Remarque : La propriété invisible_to_agent n'empêche pas l'affichage des propriétés de données réservées dans l'adaptateur d'agent.

Lorsque vous incluez la propriété "invisible_to_agent" : true avec un objet de données personnalisé, voici ce qui se passe :

• Les données personnalisées sont incluses dans le fichier de métadonnées de session.
• Les données personnalisées ne sont pas incluses dans les fiches CRM.

Pour en savoir plus, consultez Afficher les données de session dans l'adaptateur d'agent.

Propriétés de données réservées

Vous pouvez envoyer des propriétés de données réservées à Contact Center AI Platform (CCAI Platform) en tant que données personnalisées signées au début d'une session. Pour en savoir plus, consultez Envoyer des propriétés de données réservées.

Voici un exemple de propriétés de données réservées dans les données personnalisées :

  {
    "custom_data": {
      "reserved_verified_customer": {
        "label": "Verified Customer",
        "value": "VERIFIED_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_bad_actor": {
        "label": "Bad Actor",
        "value": "VERIFIED_BAD_ACTOR_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_repeat_customer": {
        "label": "Repeat Customer",
        "value": "REPEAT_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      }
    }
  }
  

Remplacez les éléments suivants :

• VERIFIED_CUSTOMER_BOOLEAN : "True" si vous considérez que cet utilisateur final est un client légitime.
• VERIFIED_BAD_ACTOR_BOOLEAN : "True" si vous considérez que cet utilisateur final peut être un acteur malveillant.
• REPEAT_CUSTOMER_BOOLEAN : "True" si vous avez déterminé que cet utilisateur final a déjà contacté votre centre d'appels.

Désactiver les pièces jointes

Vous pouvez empêcher les consommateurs d'importer des pièces jointes à l'aide de l'option disableAttachment :

new UJET({
// ...
  disableAttachment: true
});

Avec disableAttachment: true, aucune icône de pièce jointe ne s'affiche dans la zone de saisie du chat et les consommateurs ne peuvent pas faire glisser de fichiers dans la zone de message.

Éviter le chat

Lorsque les agents ne sont pas disponibles, vous pouvez spécifier des options pour gérer automatiquement cette situation pour les chats Web et mobiles.

Les options de déviation du chat sont disponibles dans le portail CCAI Platform, sous Paramètres> Chat> Déviation Web et mobile.

Déviation hors horaires d'ouverture

La déviation hors horaires d'ouverture s'applique lorsque le centre de contact ou la file d'attente sont en dehors des heures d'ouverture. Pour activer la déviation hors horaires d'ouverture :

1. Dans le portail CCAI Platform, accédez à Settings > Chat > Web & mobile deflection (Paramètres > Chat > Déviation Web et mobile).

2. Si l'option Déviation hors horaires d'ouverture est désactivée, vous pouvez l'activer en la sélectionnant.

3. Modifiez l'option Autoriser les transferts pour autoriser les transferts vers des files d'attente en dehors des heures d'ouverture pour le comportement suivant :

   • Les agents pourront voir les files d'attente suivantes comme options de transfert dans l'adaptateur d'agent :

     • Toutes les files d'attente pendant les heures d'ouverture

     • Toutes les files d'attente en dehors des heures d'ouverture sans redirection activée et avec des agents connectés

     • Toutes les files d'attente hors horaires d'ouverture avec un agent virtuel attribué en mode de disponibilité 24 heures sur 24

   • Les agents ne pourront pas voir les types de files d'attente suivants :

     • Toutes les files d'attente hors horaires d'ouverture pour lesquelles la déviation hors horaires d'ouverture est activée

     • Toutes les files d'attente en dehors des heures d'ouverture avec un agent virtuel attribué limité aux heures d'ouverture de la file d'attente

Dépassement de la capacité

La déviation due à la surcapacité est spécifique à la capacité actuelle de l'agent et au temps d'attente actuel de la file d'attente à laquelle la session est attribuée. Pour activer cette option, procédez comme suit :

1. Dans le portail Contact Center AI Platform, accédez à Settings > Chat > Web & Mobile Deflection (Paramètres > Chat > Déviation Web et mobile).

2. Si l'option Déviation en cas de surcapacité est désactivée, sélectionnez le bouton Déviation en cas de surcapacité pour l'activer.

3. Définissez le temps d'attente en minutes au-delà duquel l'état de la file d'attente passe à "Surchargée".

   Ce paramètre de seuil temporel est également utilisé pour définir la fréquence à laquelle le message de surcapacité s'affiche pour l'utilisateur final.

Options de redirection

Il est possible de spécifier les options disponibles pour l'utilisateur final lorsque la redirection se produit.

E-mail

Lorsque l'option d'envoi d'e-mails est activée, l'utilisateur final peut être redirigé vers un e-mail. Lorsqu'un utilisateur final établit une session de chat Web ou mobile en dehors des heures d'ouverture, il est invité à rédiger un e-mail.

Voici le comportement spécifique :

• Mobile : lorsque la déviation d'e-mails est activée et que le seuil de temps d'attente estimé est atteint, l'utilisateur final est redirigé vers son application de messagerie par défaut lorsqu'il appuie sur l'option de chat. La version de l'application et la version d'iOS/Android sont automatiquement insérées dans le corps de l'e-mail, et l'objet est Assistance pour [chemin de menu sélectionné]. Vous pouvez également activer le formulaire d'adresse e-mail. Pour en savoir plus, consultez Formulaire de contact intégré pour les SDK mobile et Web.

• Web : présente une option d'e-mail aux utilisateurs finaux. Lorsqu'un utilisateur clique dessus, un formulaire d'e-mail s'affiche. Pour en savoir plus, consultez Formulaire de contact intégré pour les SDK mobile et Web.

• Continuer à attendre (Web uniquement) : permet à l'utilisateur final de cliquer sur une option pour continuer à attendre.

Personnaliser les boîtes de dialogue de recueil du consentement et le bouton de fin de session de la navigation conjointe

Les boîtes de dialogue de consentement à la navigation conjointe permettent à un utilisateur final d'accepter une demande de session de navigation conjointe initiale, ainsi qu'une demande de contrôle à distance ou d'accès complet à l'appareil ultérieure. Lorsque vous configurez le SDK Web pour le cobrowsing, il fournit des boîtes de dialogue de consentement et un bouton de fin de session par défaut. Toutefois, vous pouvez ajouter des champs facultatifs à l'objet cobrowseOptions qui vous permettent de personnaliser les boîtes de dialogue de consentement ainsi que le bouton de fin de session. Cela vous permet non seulement de contrôler l'apparence de ces éléments, mais aussi d'adapter les déclarations de consentement dans les boîtes de dialogue de consentement à vos besoins.

Déclaration de consentement

Une déclaration de consentement s'affiche dans une boîte de dialogue de consentement. La déclaration de consentement indique à l'utilisateur final le comportement auquel il peut s'attendre de l'expérience de navigation conjointe et ce à quoi il consent. Si vous avez l'intention d'enregistrer une session de navigation conjointe, vous devez le mentionner dans votre déclaration de consentement. Pour obtenir des exemples de boîtes de dialogue de consentement personnalisées contenant des déclarations de consentement, consultez Exemple de code pour les boîtes de dialogue de consentement personnalisées.

Procédure

Pour configurer le SDK Web pour le cosurfing et personnaliser les boîtes de dialogue de consentement, procédez comme suit :

1. Pour obtenir le domaine de navigation conjointe et la clé de licence de votre instance CCAI Platform, procédez comme suit :

   1. Connectez-vous au portail de la plate-forme CCAI à l'aide d'identifiants administrateur.

   2. Cliquez sur Menu, puis sur Paramètres > Paramètres du développeur.

   3. Accédez au volet Co-navigation, puis cliquez sur le bouton bascule pour l'activer.

   4. Enregistrez les valeurs dans les champs Domaine de navigation conjointe et Clé de licence.

2. Pour initialiser le SDK Web et inclure les champs de personnalisation de la navigation simultanée, exécutez le code suivant :

   var ujet = new UJET({
     // other options
     cobrowseOptions: {
       license: "LICENSE_KEY",
       trustedOrigins: ["CO-BROWSE_DOMAIN"],
       api: "CO-BROWSE_DOMAIN"
       cobrowseRequestHtml: "COBROWSE_REQUEST_HTML",
       remoteControlHtml: "REMOTE_CONTROL_HTML",
       fullDeviceHtml: "FULL_DEVICE_HTML",
       styles: "STYLES",
       sessionControlsHtml: "SESSION_CONTROLS_HTML"
     },
     // other options
   })
   

   Remplacez les éléments suivants :

   • LICENSE_KEY : clé de licence que vous avez enregistrée à l'étape précédente

   • CO-BROWSE_DOMAIN : domaine de navigation à plusieurs que vous avez enregistré à l'étape précédente

   • COBROWSE_REQUEST_HTML : code HTML de votre boîte de dialogue de consentement pour une session de navigation à plusieurs dans le mode de partage d'écran. Pour obtenir un exemple, consultez cobrowseRequestHtml dans l'exemple de code pour les boîtes de dialogue de consentement personnalisées.

   • REMOTE_CONTROL_HTML : code HTML de votre boîte de dialogue de consentement pour une session de navigation simultanée en mode de contrôle à distance. Pour obtenir un exemple, consultez remoteControlHtml dans l'exemple de code pour les boîtes de dialogue de consentement personnalisées.

   • FULL_DEVICE_HTML : code HTML de votre boîte de dialogue de consentement pour une session de navigation conjointe en mode appareil complet. Pour obtenir un exemple, consultez fullDeviceHtml dans Exemple de code pour les boîtes de dialogue de consentement personnalisées.

   • STYLES : informations de style pour les éléments de vos boîtes de dialogue de consentement et de votre bouton de fin de session. Pour obtenir un exemple, consultez styles dans l'exemple de code pour les boîtes de dialogue de consentement personnalisées.

   • SESSION_CONTROLS_HTML : code HTML de votre bouton de fin de session. Pour obtenir un exemple, consultez sessionControlsHtml dans l'exemple de code pour les boîtes de dialogue de consentement personnalisées.

Classes de boutons

Les boîtes de dialogue de consentement contiennent des boutons qui permettent à l'utilisateur d'autoriser ou de refuser la demande de navigation conjointe, ou de fermer la boîte de dialogue de consentement. Pour que ces boutons communiquent avec le SDK Web, vous devez associer les classes de bouton suivantes aux types de bouton correspondants. Le SDK Web recherche ces classes dans le code et ajoute un écouteur d'événement pour chacune d'elles. Voici les classes de boutons :

• cobrowse-allow : bouton permettant à l'utilisateur final d'autoriser la requête

• cobrowse-deny : bouton permettant à l'utilisateur final de refuser la demande

• cobrowse-close : bouton permettant à l'utilisateur final de fermer la boîte de dialogue de consentement

Exemple de code pour les boîtes de dialogue de consentement personnalisées

L'exemple de code suivant contient des boîtes de dialogue de consentement personnalisées, un bouton de fin de session et des informations de style pour ces éléments. Chaque boîte de dialogue de consentement de l'exemple contient une déclaration de consentement. Voici les propriétés des boîtes de dialogue de consentement pour chacun des trois modes de navigation conjointe :

• cobrowseRequestHtml : boîte de dialogue de consentement pour le mode de partage d'écran

• remoteControlHtml : boîte de dialogue de consentement pour le mode de contrôle à distance

• fullDeviceHtml : boîte de dialogue de consentement pour le mode Appareil complet

"cobrowseOptions": {
    "license": "example_license",
    "trustedOrigins": "[https://example.com]",
    "cobrowseRequestHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n  <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9",
    "remoteControlHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n  </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n  <li>Stop screen sharing at any time</li>\n  <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n</ul>\n</div>\n<div class=\"description\">\n<svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n<span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n</span>\n</div>\n<div class=\"footer\">\n<span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "fullDeviceHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n  <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "styles": ".some-end-button {\n border-radius: 20px;\n background-color: blue;\n color: white;\n display: marquee;\n width: 20rem;\n font-size:200%;\n height: 20rem;\n }\n .custom-backdrop {\n background: rgba(0, 0, 0, 0.1);\n position: fixed;\n z-index: 2147483647;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n }\n .cobrowse-confirm-dialog {\n color: #232424;\n font-family:sans-serif;\n line-height:140%;\n position:fixed;\n background:white;\n border-radius:5px;\n z-index:2147483647;\n top:50px;\n left:50%;\n width:75%;\n max-width:450px;\n transform:translateX(-50%);\n box-shadow:2px 2px 30px rgb(0,0,0,0.08);\n padding: 1.5rem;\n }\n .title {\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 125%;\n line-height: 25px;\n padding: 20px;\n border-radius: 5px 5px 0 0;\n }\n \n .description {\n height: 8rem;\n display: flex;\n flex-direction:column;\n justify-content: center;\n align-items: center;\n background-color: #F3F3F3;\n }\n \n #loader {\n height:4rem;\n }\n \n .footer {\n margin-top: 1rem;\n margin-bottom: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: flex-start\n }\n .cobrowse-allow {\n background-color: pink;\n color: white;\n flex-grow: 2;\n height: 3rem;\n }\n #cobrowse-end-button {\n cursor: pointer;\n position: fixed;\n z-index: 2147483647;\n top: 50%;\n left: 25%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #cobrowse-end-button:hover {\n background-color: #92162D;\n }",
    "sessionControlsHtml": " <div class=\"some-end-button\">\n End Session\n </div>"
  }

Pour en savoir plus, consultez Configurer la navigation conjointe.

Personnalisation des messages visuels et dans plusieurs langues

La nouvelle méthode CCAI Platform (option) comporte deux champs pour prendre en charge plusieurs langues et la personnalisation des messages visuels :

• lang : indique la langue par défaut lorsque l'utilisateur final n'a pas choisi de langue préférée. Ce code est conforme à la norme ISO 639-1. S'il est omis, la langue par défaut est l'anglais (en).

• translation : le SDK Web est compatible avec plusieurs langues pour les textes affichés. L'objet de traduction vous permet de personnaliser les textes pour une langue existante ou même d'ajouter des textes pour de nouvelles langues. Par exemple : de, es, fr, ja.

Voici un exemple d'objet de traduction qui personnalise le texte en anglais. Comme vous pouvez le voir, les clés de premier niveau de l'objet de traduction doivent correspondre au code de langue.

Remarque : Si vous définissez un ujet_message sur une chaîne vide, le message ne sera pas envoyé.

// ES6
let translation = `{
  "en": {
    "ujet_start_title": "Hi!"
  },
  "es": {
    "ujet_start_title": "¡Hola!"
  },
  "fr": {
    "ujet_start_title": "Salut!"
  },
  "de": {
    "ujet_start_title": "Hallo!"
  },
  "it": {
    "ujet_start_title": "Ciao!"
  },
  "ja": {
    "ujet_start_title": "こんにちは！"
  },
  "ko": {
    "ujet_start_title": "안녕하세요!"
  },
  "pt": {
    "ujet_start_title": "Olá!"
  },
  "pt-BR": {
    "ujet_start_title": "Olá!"
  },
  "sv": {
    "ujet_start_title": "Hej!"
  }
}`;

// initialize when dom ready
var ujet = new UJET({
  // other fields
  lang: 'en',
  translation: translation
});

Voici les messages de personnalisation :

"ujet_ask_phone_number_button_title": "Call Me"
"ujet_ask_phone_number_description": "Provide your phone number below"
"ujet_ask_phone_number_title_instant": "We'll Call You"
"ujet_ask_phone_number_title_scheduled": "Let's Schedule a Call"
"ujet_ask_phone_number_warning": "Your call may be monitored or recorded for training and quality assurance purposes."
"ujet_call_confirm_content": "Your phone should be ringing right about - {0}"
"ujet_call_confirm_start_new_conversation": "Start A New Conversation"
"ujet_call_record_permission_subtitle": "Do you give permission for {0} to record your call for training and quality?"
"ujet_call_record_permission_title": "Permission to Record"
"ujet_channel_chat": "Let's connect you to one of our chat support specialists",
"ujet_channel_instant_call": "Let one of our support specialists give you a call now",
"ujet_channel_menu_chat": "Chat now"
"ujet_channel_menu_email": "Email"
"ujet_channel_menu_instant_call": "Call now"
"ujet_channel_menu_keep_waiting": "Keep Waiting"
"ujet_channel_menu_scheduled_call": "Schedule call"
"ujet_channel_scheduled_call": "Let's schedule a time for a support specialist to call and help you",
"ujet_channel_email": "Please send us an email so we can help",
"ujet_chat_end": "End chat"
"ujet_chat_ended": "This chat has ended"
"ujet_chat_input_placeholder": "Type your message here"
"ujet_chat_leave": "Leave chat"
"ujet_chat_timed_out": "This chat has timed out"
"ujet_chat_title_with_multiple_agent": "Multiple Agents"
"ujet_chat_title_with_one_agent": "Chatting with {0}"
"ujet_chat_title_with_two_agent": "Chatting with {0} & {1}"
"ujet_chat_transfer_failed": "Transfer has failed"
"ujet_chat_transfer_joined": "<b>{0}<\/b> just joined the conversation"
"ujet_chat_transfer_left": "<b>{0}<\/b> just left the conversation"
"ujet_chat_transfer_started_menu": "<b>{0}<\/b> is transferring this chat to another agent..."
"ujet_chat_transfer_started_user": "<b>{0}<\/b> is adding another agent to this conversation..."
"ujet_common_back": "Back"
"ujet_common_cancel": "Cancel"
"ujet_common_end": "End"
"ujet_common_no": "No"
"ujet_common_save": "Save"
"ujet_common_submit": "Submit"
"ujet_common_support": "Support"
"ujet_common_yes": "Yes"
"ujet_deflection_menu_title": "Select from the options below"
"ujet_error_no_available_language": "No Available Language"
"ujet_error_phone_number_invalid": "Please input a valid phone number."
"ujet_file_upload_button": "Choose a file to upload"
"ujet_file_upload_failure_size": "Looks like we couldn't upload. <br> Please try uploading a file <br> that is less than {0}."
"ujet_file_upload_failure_type": "Looks like we couldn't upload. <br> We only accept <br> .JPG, .PNG, or .MP4."
"ujet_file_upload_failure_unknown": "Looks like we couldn't upload. <br> Please try again!"
"ujet_file_upload_subtitle": "Drop files here to upload"
"ujet_file_upload_title": "Upload Files"
"ujet_greeting": "Hi there, how can we help?"
"ujet_instant_call_confirm_content": "Your phone should be ringing shortly"
"ujet_language_chinese": "中文"
"ujet_language_english": "English"
"ujet_language_french": "Français"
"ujet_language_german": "Deutsch"
"ujet_language_italian": "Italiano"
"ujet_language_japanese": "日本語"
"ujet_language_korean": "한국어"
"ujet_language_portuguese": "Português (Portugal)"
"ujet_language_portuguese_brazil": "Português (Brazil)"
"ujet_language_spanish": "Español"
"ujet_language_swedish": "Svenska"
"ujet_menu_title": "Select an option"
"ujet_message_back_in_menu": "Looks like you changed your mind! How else can we help?"
"ujet_message_channel": "How would you like to communicate?"
"ujet_message_chat_deflection_afterhour": "We are currently closed. We look forward to helping you during our normal business hours."
"ujet_message_chat_deflection_default": "We are currently experiencing a high volume of requests with a current wait time of <b>{0}<\/b>. How would you like to reach out?"
"ujet_message_chat_deflection_email": "Please contact us via email: <b><a href="mailto:{0}">{0}<\/a><\/b>."
"ujet_message_chat_deflection_keepwaiting": "Thank you for continuing to wait. The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_deflection_outage": "We are currently experiencing a high volume of request, how would you like to reach out?"
"ujet_message_chat_deflection_recurring": "Thanks for your patience! The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_restart": "Connecting to your ongoing chat, one moment please..."
"ujet_message_chat_start": "One moment please..."
"ujet_message_queue": "Let's help you with<br /><strong>{0}<\/strong>"
"ujet_rating_feedback_placeholder": "Let us know how we can improve."
"ujet_rating_result_subtitle": "We appreciate your feedback"
"ujet_rating_result_title": "Thank you!"
"ujet_rating_title": "Rate Your Experience"
"ujet_redirect_action_title": "Open this page in a new tab"
"ujet_redirect_url_title": "Visit the page below"
"ujet_schedule_time_description": "Pick a time that works best for you"
"ujet_schedule_time_title": "Let's Schedule a Call"
"ujet_scheduled_call_cancel_cancel": "Cancel"
"ujet_scheduled_call_cancel_content": "You scheduled a support call for<br><b>{0}<\/b> at <b>{1}<\/b>."
"ujet_scheduled_call_cancel_keep": "Keep It"
"ujet_scheduled_call_cancel_title": "Cancel the existing call?"
"ujet_screenshot_init_cancel": "No Thanks"
"ujet_screenshot_init_okay": "Accept"
"ujet_screenshot_init_title": "Screenshot Request"
"ujet_screenshot_install_cancel": "Cancel"
"ujet_screenshot_install_okay": "Install"
"ujet_screenshot_install_title": "Install Chrome Extension"
"ujet_screenshot_take_action": "Take Screenshot"
"ujet_screenshot_take_title": "Click the button below to send a screenshot to the agent"
"ujet_screenshot_verify_cancel": "No"
"ujet_screenshot_verify_okay": "Yes"
"ujet_screenshot_verify_title": "Successfully Installed Chrome Extension"
"ujet_start_title": "Need any help?"
"ujet_tap_to_minimize": "Tap to minimize"
"ujet_time_hour": "hour | hours"
"ujet_time_minute": "minute | minutes"

Personnalisation du logo et de l'icône

La méthode new UJET(option) comporte des champs permettant de personnaliser le logo et l'icône.

• logo : URL de l'image du logo

• Position du widget (ne s'applique qu'aux ordinateurs)

  • right : définit la position du bord droit en pixels (la valeur par défaut est 50).

  • bottom : définit la position du bord inférieur en pixels (la valeur par défaut est 50).

• Position de l'icône (ne s'applique qu'aux ordinateurs)

  • right : définit la position du bord droit en pixels (la valeur par défaut est 50).

  • bottom : définit la position du bord inférieur en pixels (la valeur par défaut est 50).

Exemple de personnalisation du logo et de l'icône

new UJET({
  logo: 'https://example.com/logo.svg',
  // widget position
  right: '50px',
  bottom: '150px',

  // launcher position
  launcher: {
    right: '50px',
    bottom: '50px',
  }
})

Personnalisation du logo et de l'icône

Personnalisation du logo et de l'icône

Personnalisation du thème

La méthode new UJET(option) comporte un champ permettant de personnaliser le thème.

• style : l'objet de thème accepte quatre valeurs pour le widget.

  • links : liste des liens vers les feuilles de style pour les polices Web.

  • --primary-font: valeur du style CSS font-family appliqué à l'ensemble de l'interface utilisateur Web (par exemple, Merriweather)

  • --primary-color : valeur de code hexadécimal utilisée comme couleur principale de l'interface utilisateur Web (par exemple, #51C3C3)

  • --link-color : valeur de code hexadécimal utilisée comme couleur de lien de l'UI Web (par exemple, #51C3C3)

• launcher : l'objet de lanceur accepte quatre valeurs pour le lanceur.

  • cssText : syntaxe CSS utilisée comme style CSS pour le lanceur.

  • chatIcon : URL d'une icône SVG utilisée pour l'icône de chat normale

  • closeIcon : URL d'une icône SVG utilisée pour l'icône de fermeture

  • style : cet objet de thème séparé accepte deux valeurs pour le lanceur.

    • --background-color : code hexadécimal utilisé comme couleur d'arrière-plan du lanceur d'applications (par exemple, #E85230) --icon-color : code hexadécimal utilisé comme couleur de l'icône du lanceur d'applications (par exemple, #FFF)

var ujet = new UJET({
  // ...
  style: {
    links: [
      'https://fonts.example.com/css?family=Droid+Serif:400,700&display=swap',
    ],
    '--primary-font': 'Droid Serif, Georgia, serif',
    '--primary-color': '#F1684A',
    '--link-color': '#F1684A',
  },
  launcher: {
    cssText: '.wrap button {background: #E85230}',
    chatIcon: 'https://example.com/logo.svg',
    closeIcon: 'https://example.com/close.svg',
    style: {
      '--background-color': '#F1684A',
      '--icon-color': '#fff',
    }
  }
});

Suivi de la sélection du canal et de l'envoi d'e-mails

Pour permettre le suivi de la sélection du canal et de l'envoi d'e-mails, le SDK Web utilise la fonction postMessage qui transmet un message avec les données suivantes :

• application : type d'appareil.

• sdk_version: : version du SDK Web.

• user_agent: : version du navigateur.

• company : nom du locataire.

• menu_name: : nom de la file d'attente ou du menu que l'utilisateur final a sélectionné.

• menu_path: : chemin d'accès à la file d'attente ou au menu que l'utilisateur final a sélectionné.

• menu_id: : ID du menu ou de la file d'attente que l'utilisateur final a sélectionné.

• url : URL de la page Web sur laquelle se trouvait l'utilisateur final lorsqu'il a sélectionné un canal ou envoyé un e-mail.

• timestamp : heure à laquelle l'utilisateur final a fait sa sélection.

• has_attachments: : indique si un e-mail comportait des pièces jointes lors de son envoi (cette option n'apparaît que lors de l'envoi d'un e-mail, et non lors de la sélection du canal).

Les données des messages sont stockées dans un objet ujet avec deux attributs : un attribut appelé "action" qui sera une chaîne contenant le nom de l'action effectuée, et un attribut appelé "data" qui inclura les données décrites précédemment.

Pour récupérer des données à partir du message, vous pouvez créer un écouteur d'événements qui écoute "message". Un exemple qui affichera l'action et les données dans la console est présenté dans la section suivante. Vous trouverez un exemple fonctionnel dans le dossier tracking-channel-selection.

window.addEventListener('message', (e) => {
  if (e.data && e.data.ujet) {
    console.log(`Action: ${e.data.ujet.action}`);
    console.log(`Message Data: ${e.data.ujet.data}`);
  }
});

Masquer la bordure du logo de l'agent

Pour masquer la bordure du logo de l'agent, ajoutez "--logo-shadow": "none" dans l'attribut de style et définissez-le sur "true" dans la nouvelle option UJET :

new UJET({
  // ...
  style: {
    '--logo-shadow': 'none',
  }
});

Masquer l'icône de lancement

Pour des raisons esthétiques, il est possible de masquer l'icône de lancement de l'UI Web et d'utiliser à la place un déclencheur de chat proactif ou de démarrer le chat de manière programmatique. Pour supprimer l'icône de lancement, ajoutez l'attribut de lanceur et définissez-le sur "true" dans le nouvel UJET(option) :

new UJET({
  // ...
  launcher: false,
});

Pour démarrer l'UI Web de manière programmatique, consultez Démarrer l'UI Web de manière programmatique. Pour démarrer l'UI Web avec un déclencheur de chat proactif, consultez Déclencheur proactif.

Utiliser un point d'accès direct

Vous pouvez utiliser un accès direct pour envoyer un utilisateur final directement à une file d'attente spécifique.

Pour utiliser un point d'accès direct :

1. Connectez-vous au portail de la plate-forme CCAI.

2. Accédez à Paramètres > File d'attente.

3. Assurez-vous que le canal Web est activé en sélectionnant Utiliser.

4. Accédez à Modifier > Afficher pour le canal Web. La structure Web s'affiche.

5. Sélectionnez la file d'attente vers laquelle vous souhaitez rediriger l'utilisateur final.

6. Accédez à la section Point d'accès, puis cliquez sur Créer un point d'accès direct.

7. Fournissez les informations suivantes :

   1. Définissez le type de point d'accès sur Général.

   2. Indiquez le nom du point d'accès. Il s'agit du nom qui apparaît dans la liste Point d'accès.

   3. Indiquez le libellé du point d'accès général. Il s'agit de la valeur que vous utiliserez pour configurer le SDK Web.

8. Cliquez sur Créer.

Vous pouvez transmettre le nom d'un point d'accès direct à l'aide de la méthode ujet.start(options). Consultez l'exemple ci-dessous :

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start({ menuKey: '__MENU_KEY__' });
  }
});

Fermer l'interface utilisateur Web de manière programmatique

Il s'agit d'une étape facultative. Sans cette étape, l'interface utilisateur Web se fermera et sera réduite d'elle-même.

Cette étape vous permet d'appeler la fonction de rappel lorsque le consommateur souhaite fermer le SDK Web.

ujet.on('close', function() {
  // do something here
});

Démarrer l'UI Web de manière programmatique

Il s'agit d'une étape facultative. Sans cette étape, l'utilisateur final peut démarrer l'UI Web en cliquant sur l'icône de lancement de l'UI Web.

Cette étape vous permet d'ouvrir l'UI Web de manière programmatique avec la méthode ujet.start(options). Vous pouvez demander à l'utilisateur final de cliquer sur un bouton supplémentaire pour ouvrir l'UI Web, comme ceci :

<button id="launcher">Cliquez pour ouvrir</button>

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  launcher: false
});

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start();
  }
});

ujet.on('ready', function() {
  launcher.textContent = 'ready to talk';
});

ujet.registerHook('loading', function() {
  launcher.textContent = 'loading';
});

ujet.registerHook('open', function() {
  launcher.textContent = 'Click to close';
});

ujet.registerHook('close', function() {
  launcher.textContent = 'Click to open';
});

ujet.on('created', function() {
  ujet.authenticate(getAuthToken);
});

Vous pouvez également fermer le widget avec la méthode ujet.close() et le supprimer avec la méthode ujet.destroy().

Déclencheur proactif

Les déclencheurs proactifs vous permettent de déclencher le SDK Web pour envoyer de manière proactive un message à l'utilisateur final.

Pour configurer un déclencheur proactif :

1. Dans le portail CCAI Platform, accédez à Settings > Chat (Paramètres > Chat).

2. Accédez au volet Web Proactive Chat Triggers (Déclencheurs de chat proactifs Web), puis cliquez sur View triggers (Afficher les déclencheurs). Le volet Déclencheurs s'affiche.

3. Cliquez sur Ajouter un déclencheur. Le volet Choisir un nom s'affiche.

4. Dans le champ Nom du déclencheur, saisissez un nom, puis cliquez sur Suivant. Le volet Définir des conditions s'affiche.

5. Pour définir des conditions, procédez comme suit :

   1. À côté de L'utilisateur final, sélectionnez une condition.

   2. Dans le champ Saisissez un mot clé, saisissez un mot clé auquel la condition doit faire référence, puis appuyez sur la touche Entrée.

   3. Répétez l'étape précédente pour chaque mot clé que vous souhaitez saisir.

   4. Pour ajouter une autre condition, cliquez sur Ajouter une autre condition, puis sur le type de condition souhaité.

   5. Définissez l'option de configuration pour la condition.

   6. Pour ajouter une autre condition, répétez les deux étapes précédentes.

   7. Cliquez sur Suivant. Le volet Définir les actions s'affiche.

6. Pour définir des actions, procédez comme suit :

   1. Sous Attribution de file d'attente, saisissez le nom du nœud de file d'attente de chat auquel vous souhaitez attribuer l'utilisateur final. Si une file d'attente de chat portant ce nom existe, il apparaît en gras sous le champ.

   2. Cliquez sur le nom de la file d'attente de chat en gras. Une boîte de dialogue de confirmation s'affiche.

   3. Cliquez sur OK pour continuer.

   4. Sous Message de chat, saisissez le message que vous souhaitez afficher dans le chat déclenché.

   5. Cliquez sur Terminer.

   6. Pour activer votre nouveau déclencheur, cliquez sur Passer au direct.

ID des demandes existantes

Si vous disposez déjà d'un ticket pour un utilisateur final, vous pouvez récupérer son ID depuis votre CRM et le transmettre au SDK Web en appelant ujet.start().

Exemple :

yourFunctionToRetrieveTicket()
  .then((existingTicket) => {
    ujet.start({ ticketId: existingTicket });
  });

Vous pouvez vous référer à l'exemple du dossier "ticket-id".