Fonctionnalités compatibles

Le SDK Web est conçu pour fonctionner sur tous les navigateurs modernes pour ordinateur et mobile, mais nous prenons officiellement en charge la version la plus récente des navigateurs suivants :

• Ordinateur :

  • Chrome

  • Safari

  • Edge

• Android :

  • Chrome

  • Edge

• iOS :

  • Chrome

  • Safari

  • Edge

Déclencheurs proactifs

Remarque :

• Cette fonctionnalité est facultative.
• Aucune API JavaScript n'est disponible pour cela.

Les déclencheurs proactifs permettent de lancer le SDK Web et d'envoyer un message aux consommateurs de manière proactive. Vous pouvez configurer des déclencheurs de chat proactifs dans Contact Center AI Platform en accédant à Paramètres > Chat > Déclencheurs de chat proactifs sur le Web.

Pour en savoir plus, consultez Déclencheurs Web SDK proactifs.

Suivre les utilisateurs

Si vous souhaitez identifier les utilisateurs réguliers dans votre CRM ou utiliser des réponses prédéfinies à l'aide des informations des utilisateurs, vous devez ajouter identifiers aux utilisateurs. L'utilisation de réponses prédéfinies nécessite un CRM.

L'authentification (mise à jour de l'identifiant) peut être effectuée au début ou au milieu d'une session. Pour en savoir plus sur l'authentification en cours de session, consultez Authentification en cours de session par API.

Identifiant

Attention : N'utilisez pas d'informations permettant d'identifier personnellement l'utilisateur ni de valeurs énumérables.

Lorsque vous lancez un appel ou un chat, notre système s'appuie sur un identifiant pour authentifier l'utilisateur. Vous pouvez spécifier la valeur de votre choix pour le champ d'identifiant lors de la configuration. Si vous possédez déjà un GUID (identifiant unique global) pour vos utilisateurs, vous pouvez l'utiliser pour les identifier. Toutefois, si l'identifiant dont vous disposez pour un utilisateur est énumérable ou contient des informations permettant de l'identifier personnellement, vous devez le hacher pour renforcer la sécurité.

Les identifiants doivent être ajoutés 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: '18008675309'
         }
       })
     }).then(function(resp) {
       return resp.json();
     });
   }
   

2. Ajoutez à 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(`Listening 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

Remarque : Cette fonctionnalité est facultative.

Lorsque vous transférez une discussion 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 le format Markdown.

ccaas.config({
  customData: {
    "external_chat_transfer": {
      "greeting_override": "YOUR GREETING MESSAGE."
    }
  }
"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": "text",
            "text": "Check Order Status"
          }
        ]
      },
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:16Z",
        "content": [
          {
            "type": "text",
            "text": "I can help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:20Z",
        "content": [
          {
            "type": "media",
            "media": {
              "type": "image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

Nom de l'entreprise

Choisissez un name personnalisé au lieu du nom provenant de l'API de l'entreprise.

ccaas.config({
  name: 'ACME',
})

Éviter le chat

Lorsque les agents sont indisponibles, vous pouvez spécifier des options pour gérer automatiquement la situation avec des déviations.

Les options de redirection du chat sont disponibles dans le portail sous Paramètres > Chat > Redirections Web et mobiles.

Points d'accès direct

Vous pouvez rediriger un utilisateur directement vers une file d'attente spécifique de la structure des files d'attente à l'aide de points d'accès directs.

Pour utiliser un point d'accès direct, vous devez d'abord en créer un dans le portail.

1. Dans le portail CCAI Platform, cliquez sur Settings> Queue (Paramètres > File d'attente). Si le menu Paramètres ne s'affiche pas, cliquez sur  Menu.

2. Activez l'option Utiliser pour le menu Web, puis accédez à MODIFIER / AFFICHER.

3. Sélectionnez une file d'attente dans la structure des files d'attente.

   

4. Cliquez sur Créer un point d'accès direct.

5. Type de point d'accès = Général.

   

6. Ajoutez les données d'entrée pour le point d'accès direct dans la boîte de dialogue. Notez que le champ General Access Point Label correspond à MenuKey mentionné à l'étape suivante.

7. Cliquez sur CRÉER.

Une fois la configuration effectuée à l'aide du portail, vous pouvez rediriger un utilisateur vers une file d'attente spécifique à l'aide de MenuKey:.

ccaas.config({
  menuKey: 'vip'
})

ID de la demande

Si vous avez déjà créé une demande pour un consommateur, vous pouvez récupérer son ID dans votre CRM et le transmettre au SDK Web :

retrieveTicket().then(ticket => {
  ccaas.config({ ticketId: ticket.id })
})

Sélection automatique des chaînes

À l'aide de preferredChannel, vous pouvez sélectionner automatiquement un canal lorsqu'un consommateur sélectionne une file d'attente spécifique :

ccaas.config({
  preferredChannel: 'chat'
})

Désactiver les pièces jointes

Par défaut, le SDK Web permet aux consommateurs d'importer des photos et des vidéos lors d'une session de chat. Vous pouvez le désactiver à l'aide du script suivant :

ccaas.config({
  disableAttachment: false
})

Transmettre des données personnalisées

Lorsqu'une discussion est lancée, des données personnalisées peuvent être envoyées avec l'objet de discussion. Les données personnalisées peuvent être n'importe quoi : OS, version, emplacement ou toute autre donnée pouvant être pertinente pour la discussion concernée.

Vous pouvez ajouter des données personnalisées non signées à l'aide de la configuration customData.

Le format de données personnalisé est semblable à un objet JSON et se compose de key, label et value.

ccaas.config({
  customData: {
    k1: {
      label: 'Version',
      value: '1.1.0'
    },
    k2: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

Key : identifiant unique des données. Dans l'exemple précédent, k1 et k2 sont des clés.

Label : nom à afficher sur la page du CRM.

Value : valeur du libellé

Vous pouvez ajouter des données personnalisées signées à l'aide de la configuration signedCustomData :

ccaas.config({
  signedCustomData: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.n...."
})

signedCustomData est une chaîne JWT avec l'algorithme HS256.

SIGN_JWT(
  algorithm='HS256',
  secret=YOUR_COMPANY_SECRET,
  payload={
    custom_data: {
      version: {
        label: 'Version',
        value: '1.0.0'
      },
      ...
    },
    iss: 'YOUR TENANT',
    iat: NOW,
    exp: NOW + 3600,
  }
)

Prise en charge de plusieurs langues

Le champ lang peut être utilisé pour contrôler la langue par défaut au lancement et pour prendre en charge plusieurs langues. Si cette valeur est omise, la langue par défaut est l'anglais (en). La langue par défaut peut être configurée pour chaque page de votre site Web. Si d'autres langues sont disponibles dans votre locataire, le consommateur aura la possibilité de passer à une autre langue.

client.getMenus(key?: string, lang?: string)

La méthode .getMenus accepte un paramètre "lang" facultatif. Si vous ne transmettez pas le paramètre "lang" à .getMenus, cette méthode utilisera l'option "lang" par défaut.

Exemple :

const client = new Client({
  // ...
  lang: 'ja',
})

Cette option est accessible à l'aide de la propriété suivante :

console.log(client.lang)

Les langues suivantes sont acceptées et utilisent les abréviations indiquées dans le tableau ci-dessous :

Langue	Abréviation
Anglais	en
Anglais (Canada)	en-CA
Anglais (Royaume-Uni)	en-GB
Anglais (Australie)	en-AU
Anglais (Inde)	en-IN
Espagnol (Espagne)	es
Espagnol (Mexique)	es-MX
Français (Canada)	fr-CA
Allemand	de
Japonais	ja
Coréen	ko
Italien	pour les recevoir.
Chinois (simplifié)	zh
Chinois (traditionnel)	zh-Hant
Suédois	sv
Portugais	pt
Portugais (Brésil)	pt-BR
Finnois	fi
Norvégien	nb
Danois	da
Néerlandais	nl
Turc	tr
Vietnamien	vi
Thaï	th
Arabe	ar
Tchèque	cs
Polonais	pl
Hongrois	hu
Russe	ru
Hindi	salut
Roumain	ro
Croate	h
Ukrainien	uk
Tagalog	tl

Pour en savoir plus sur les traductions, consultez la section Personnaliser les messages et les traductions.

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

Remarque : Cette étape est facultative. Sans cette étape, les consommateurs peuvent démarrer l'UI Web en cliquant sur l'icône de lancement de l'UI Web.

Cette étape vous permet d'ouvrir l'interface utilisateur Web de manière programmatique avec la méthode ccaas.start(options).

Dans certains cas, vous pouvez demander au consommateur de cliquer sur un bouton supplémentaire pour ouvrir l'UI du SDK Web.

Exemple :

<button id="launcher">Click to open</button>

var ccass = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  authenticate: getAuthToken,
});

ccass.config({disableLauncher: true})

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ccass.visible) {
    ccaas.hide();
    launcher.textContent = 'Click to open';
  } else {
    ccaas.show();
    launcher.textContent = 'Click to close';
  }
});

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

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

Fermer l'interface utilisateur Web de manière programmatique

Remarque : Cette étape est 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 consommateur souhaite fermer le SDK Web.

ccass.on('visible', function(visible) {console.log(visible) })

Obtenir des informations sur les sessions de chat actives

Vous pouvez obtenir des informations sur les sessions de chat actives, y compris l'ID de chat.

Consultez l'exemple ci-dessous :

ccass.getOngoingChat()

Si une session de chat est active, cette méthode renvoie les métadonnées du chat. Si aucune session de chat n'est active, cette fonction renvoie null.

Vous pouvez l'utiliser pour empêcher les consommateurs d'ouvrir plusieurs sessions de chat en masquant conditionnellement le SDK si une session de chat est en cours.

Suivre l'état d'ouverture ou de fermeture entre plusieurs onglets ou fenêtres

Vous pouvez synchroniser l'état d'ouverture ou de fermeture du SDK entre plusieurs onglets ou fenêtres de votre site Web. Utilisez l'extrait de code pour suivre l'état du SDK dans le stockage local :

ccass.on('visible', (isVisible) => {
 localStorage['ujetOpen'] = isVisible ? 'yes' : 'no'
})
if (localStorage['ujetOpen'] == 'yes') {
 ccass.show()
} else {
 ccass.hide()
}

Personnaliser les boîtes de dialogue de consentement et le bouton de fin du partage d'écran

modèle

Cette option vous permet de personnaliser le modèle de boîte de dialogue de partage d'écran. La valeur par défaut template est la suivante :

<dialog open class="cobrowse-dialog">
  <h1>$title</h1>
  <div class="cobrowse-dialog_content">$content</div>
  <div class="cobrowse-dialog_footer">
    <button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
    <button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
  </div>
</dialog>

Ce template est utilisé pour :

• Boîte de dialogue de confirmation de la session

• Boîte de dialogue de confirmation de la télécommande

• Boîte de dialogue de confirmation pour l'accès complet à l'appareil

Les paramètres du modèle seront remplacés par le contenu de l'option messages.

confirmSessionTemplate

Cette option permet de personnaliser la boîte de dialogue de confirmation de la session.

confirmRemoteControlTemplate

Cette option permet de personnaliser la boîte de dialogue de confirmation de la télécommande.

confirmFullDeviceTemplate

Cette option permet de personnaliser la boîte de dialogue de confirmation de la réinitialisation complète de l'appareil.

sessionControlsTemplate

Cette option permet de personnaliser le bouton de contrôle de la session. Le modèle par défaut est le suivant :

<button class="cobrowse-end js-cobrowse-end">$end</button>

Messages

Les modèles précédents contiennent les variables de message suivantes :

• $title

• $content

• $allow

• $deny

Ces variables seront remplacées par :

{
  confirmSessionTitle: string;  // $title
  confirmSessionContent: string;  // $content
  confirmRemoteControlTitle: string;  // $title
  confirmRemoteControlContent: string;  // $content
  confirmFullDeviceTitle: string;  // $title
  confirmFullDeviceContent: string;  // $content
  allowText: string;  // $allow
  denyText: string;  // $deny
  endSessionText: string;  // $end
}

Nous avons intégré des messages de partage d'écran, par exemple les messages pour la langue en :

{
  "confirmSessionTitle": "Screen Share Session Request",
  "confirmSessionContent": "Do you want to share your current screen with the agent?",
  "endSessionText": "End Screen Share Session",
  "confirmRemoteControlTitle": "Remote Access Request",
  "confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
  "confirmFullDeviceTitle": "Screen Share Request",
  "confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
  "allowText": "Allow",
  "denyText": "Deny"
}