Guide d'installation du SDK Web

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

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

Workflow d'installation

Commencer

Les sections suivantes fournissent des informations pour vous aider à faire vos premiers pas avec le SDK Web CCAI Platform.

Initialiser le SDK Web

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

Obtenir la clé de votre entreprise

Pour obtenir votre clé d'entreprise, procédez comme suit :

  1. Connectez-vous au portail de la plate-forme CCAI à l'aide de vos identifiants d'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 appelle un mécanisme de signature JWT à partir de 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() appelle un mécanisme de signature JWT depuis votre backend. Pour en savoir plus, consultez Mozilla Fetch API.

Configurer le SDK Web pour la co-navigation

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

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

  1. Pour obtenir le domaine de co-navigation 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 de vos identifiants d'administrateur.

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

    3. Accédez au volet Co-navigation, puis activez l'option.

    4. Enregistrez les valeurs des champs Co-browse Domain (Domaine de co-navigation) et License Key (Clé de licence).

  2. Pour fournir le domaine de co-navigation 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 co-navigation que vous avez enregistré à l'étape précédente

Pour en savoir plus, consultez Configurer la co-navigation.

Initialisez l'authentification avec le secret de votre entreprise.

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

Voici un exemple de signature de jeton 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 Content Security Policy, ajoutez https://websdk.ujet.co/ à vos script-src et frame-src.

Compatibilité avec Internet Explorer 11

Pour assurer la compatibilité avec 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 de manière globale 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écurrents dans votre CRM et utiliser des réponses standardisées 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: 'test@user.com',
        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. Ajoutez 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: 'test@user.com', //optional,
          phone: '000000000' //optional
        }
      };
    });
  },
})

Transfert vers un 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 renseignant le champ external_chat_transfer dans les données personnalisées. greeting_override est compatible avec le formatage 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"
            }
          }
        ]
      }
    ]
  }
}

Données personnalisées non signées de Chat

Lorsqu'un chat est démarré, vous pouvez transmettre des données personnalisées avec l'objet de chat. Les données personnalisées peuvent être le système d'exploitation, le numéro de version, l'emplacement ou toute autre donnée 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 au format JSON. Chaque champ de données contient une clé, une étiquette 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 des 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 affiché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
    }
  }
});

Lorsque vous incluez la propriété "invisible_to_agent" : true avec un objet de données personnalisé, vous pouvez vous attendre au comportement suivant :

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": false,
        "type": "boolean"
      },
      "reserved_bad_actor": {
        "label": "Bad Actor",
        "value": false,
        "type": "boolean"
      },
      "reserved_repeat_customer": {
        "label": "Repeat Customer",
        "value": false,
        "type": "boolean"
      }
    }
  }

Définissez chaque valeur sur true ou false.

  • reserved_verified_customer : true si vous considérez cet utilisateur final comme un client légitime.
  • reserved_bad_actor : true si vous considérez que cet utilisateur final est potentiellement un acteur malveillant.
  • reserved_repeat_customer : true si vous avez déterminé que cet utilisateur final a déjà contacté votre centre de contact.

Désactiver les pièces jointes

Vous pouvez empêcher les clients 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 clients ne peuvent pas faire glisser de fichiers dans la zone de message.

Déviation du chat

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

Les options de déviation de chat sont disponibles sur 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 est spécifique au centre de contact ou à la file d'attente en dehors des horaires d'ouverture. Pour activer la déviation hors horaires d'ouverture, procédez comme suit :

  1. Dans le portail CCAI Platform, accédez à 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 horaires 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 horaires d'ouverture

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

      • Toutes les files d'attente en dehors des horaires d'ouverture avec un agent virtuel attribué en mode de disponibilité 24h/24

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

      • Toutes les files d'attente en dehors des heures d'ouverture pour lesquelles la déviation en dehors des heures d'ouverture est activée

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

Déviation en cas de surcapacité

La déviation en cas de surcapacité est spécifique à la capacité actuelle de l'agent et au temps d'attente actuel pour 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 à 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 qui ferait passer l'état de la file d'attente à "Surcapacité".

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

Options de déviation

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

E-mail

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

Le comportement spécifique est le suivant :

  • Mobile : lorsque la déviation vers l'e-mail 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 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 par 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. Un formulaire d'e-mail s'affiche alors. 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.

Les boîtes de dialogue de recueil du consentement pour la co-navigation permettent à un utilisateur final d'accepter une demande initiale de session de co-navigation, ainsi qu'une demande ultérieure de contrôle à distance ou d'accès complet à l'appareil. Lorsque vous configurez le SDK Web pour la co-navigation, il fournit des boîtes de dialogue de recueil du consentement et un bouton de fin de session par défaut. Toutefois, vous pouvez ajouter des champs facultatifs à l'objet cobrowseOptions pour personnaliser les boîtes de dialogue de recueil du 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 recueil du consentement en fonction de vos besoins.

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

Procédure

Pour configurer le SDK Web pour la co-navigation et personnaliser les boîtes de dialogue de recueil du consentement, procédez comme suit :

  1. Pour obtenir le domaine de co-navigation 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 de vos identifiants d'administrateur.

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

    3. Accédez au volet Co-navigation, puis activez l'option.

    4. Enregistrez les valeurs des champs Co-browse Domain (Domaine de co-navigation) et License Key (Clé de licence).

  2. Pour initialiser le SDK Web et inclure les champs de personnalisation de la co-navigation, 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 :

Classes de boutons

Les boîtes de dialogue de recueil du consentement contiennent des boutons permettant à l'utilisateur d'autoriser ou de refuser la demande de co-navigation, ou de fermer la boîte de dialogue de recueil du consentement. Pour que ces boutons communiquent avec le SDK Web, vous devez associer les classes de boutons suivantes aux types de boutons correspondants. Le SDK Web recherche ces classes dans le code et ajoute un écouteur d'événements 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 recueil du consentement

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

"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 co-navigation.

Personnalisation des messages visuels et multilingues

La nouvelle méthode CCAI Platform (option) comporte deux champs permettant de prendre en charge plusieurs langues et de personnaliser les 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, il est défini sur "en" par défaut.

  • 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 niveau supérieur de l'objet de traduction doivent être le code de langue.

// 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
});

Les messages de personnalisation sont les suivants :

"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).

  • La 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 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 de liens vers des feuilles de style pour les polices Web

    • --primary-font : valeur du style CSS font-family appliqué à l'ensemble de l'UI 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 lanceur accepte quatre valeurs pour le lanceur.

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

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

    • closeIcon : URL de l'icône SVG utilisée pour l'icône Fermer

    • style : cet objet de thème distinct accepte deux valeurs pour le lanceur d'applications.

      • --background-color : valeur de code hexadécimal utilisée comme couleur d'arrière-plan du lanceur, par exemple #E85230 --icon-color : valeur de code hexadécimal utilisée comme couleur de l'icône du lanceur, 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',
    }
  }
});

Style du Lanceur d'applications

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

Pour permettre le suivi de la sélection du canal et de l'envoi de l'e-mail, le SDK Web utilise la fonction postMessage, qui transmet un message contenant 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 sélectionné par l'utilisateur final.

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

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

  • 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 effectué sa sélection.

  • has_attachments: : indique si un e-mail comportait des pièces jointes lorsqu'il a été envoyé (ce champ n'apparaît que lors de l'envoi de l'e-mail, et non lors de la sélection du canal).

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

Pour récupérer les données du message, vous pouvez créer un écouteur d'événements qui écoute "message". La section suivante présente un exemple qui affiche l'action et les données dans la console. 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 le nouvel objet UJET(option) :

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, en choisissant d'utiliser 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 "launcher" et définissez-le sur "true" dans le nouveau 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 vers une file d'attente spécifique.

Pour utiliser un point d'accès direct, procédez comme suit :

  1. Connectez-vous au portail CCAI Platform.

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

  3. Assurez-vous que le canal Web est activé en activant l'option 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 que l'utilisateur final soit redirigé.

  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'UI Web de manière programmatique

Il s'agit d'une étape facultative. Sans cette étape, l'UI Web se terminera et se réduira d'elle-même.

Cette étape vous permet d'appeler la fonction de rappel lorsque le client 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'interface utilisateur Web en cliquant sur l'icône de lancement de l'interface utilisateur 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, procédez comme suit :

  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 vous souhaitez que la condition fasse 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 de 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 des 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, le nom s'affiche 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 Publier.

ID des demandes existantes

Si vous disposez d'un ticket existant pour un utilisateur final, vous pouvez récupérer l'ID du ticket à partir de 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.