Personnalisation de l'interface utilisateur de l'Open ContactPad (UC uniquement)

Créer un fournisseur d'intégration

Choisissez un nom unique pour votre fournisseur d'intégration. Il sera utilisé pour associer les ressources appartenant au fournisseur d'intégration. Les exemples ci-dessous utilisent "acme" comme fournisseur de personnalisation.

Indiquer au composeur UC les fonctions supplémentaires à activer dans l'interface utilisateur lors de l'initialisation.

Remarque : vous devez toujours mettre en œuvre les gestionnaires correspondants pour les fonctions activées.

 VonageDialer.init({
   features: {
     contactsProvider: true,
     openContact: true,
     openActivity: 'acme',
     eventsHistory: true
   }
 }, (dialer) => { /* <-- dialer instance */ });

Définir l'icône d'intégration

VonageDialer.init({}, (dialer) => {
  dialer.registerSvgIcon('acme', 'data:image/svg+xml;base64,PHN… ...zdmc+');
});
  • Vous pouvez convertir n'importe quelle image SVG (taille recommandée 64x64px) en une URL de données à l'aide d'une balise outil en ligne.

Ajouter des paramètres personnalisés à l'interface du composeur

Custom Settings

Le SDK fournit une méthode pour étendre les paramètres par défaut de l'interface du composeur avec des options de configuration supplémentaires (types pris en charge : chaîne, booléen, sélection).

dialer.registerCustomSettings('acme', [
  { name: 'autoLog', label: 'Auto Log Telephony Records', type: 'boolean', subtype: 'switch', default: true },
  { name: 'skipInternal', label: 'Skip internal communications', type: 'boolean', subtype: 'checkbox', dependsOn: 'autoLog', default: true },
  { name: 'skipZeroDuration', label: 'Skip zero duration calls', type: 'boolean', subtype: 'checkbox', dependsOn: 'autoLog', default: true },
  { name: 'skipNoContact', label: 'Skip if contact not found', type: 'boolean', subtype: 'checkbox', dependsOn: 'autoLog' },
  { name: 'skipMultipleContacts', label: 'Skip if multiple contacts', type: 'boolean', subtype: 'checkbox', dependsOn: 'autoLog' }
]);
dialer.getSettings('acme', (settings) => {
  //{"autoLog":true,"skipInternal":true,"skipZeroDuration":false,"skipNoContact":true}
});

ÉCHANTILLON EN DIRECT

  • Les valeurs des paramètres supplémentaires sont enregistrées automatiquement par le composeur dans la mémoire du navigateur et sont disponibles pour une utilisation ultérieure par le code d'intégration (en respectant les valeurs par défaut).

Contacts fournisseur

Comment introduire vos propres contacts dans l'interface du composeur.

Complétion automatique des contacts (suggestions de numérotation)

Implémentez une méthode spéciale pour rechercher des contacts à partir de votre propre source de données. Le premier paramètre d'entrée est le texte que l'utilisateur tape dans le contrôle d'entrée du composeur (*il peut s'agir d'un numéro de téléphone ou de n'importe quel texte sous forme de chaîne). Le second paramètre est une fonction de rappel qui renvoie les résultats lorsque la recherche est terminée. La fonction de rappel doit toujours être appelée avec un paramètre de type tableau (comprenant au moins zéro élément de contact). L'interface utilisateur affiche une petite barre de progression pendant la recherche.

const searchContactables = (query, callback) => {
  // 'query' parameter contains the autocomplete search string
  callback([
   {
     provider: 'acme',
     id: '123',
     label: 'John Smith',
     type: 'contact',
     typeLabel: 'Contact',
     phoneNumber: '+12027621401',
     phoneType: 'Mobile'
   },
   {
     provider: 'acme',
     id: '124',
     label: 'John Smith',
     type: 'lead',
     // 'typeLabel' - optional, for visualization purposes
     phoneNumber: '+12027621401',
     // 'phoneType' - optional, for visualization purposes (home, mobile, office)
   }
  ]);
};

Enregistrer la méthode de recherche de contact personnalisée avec l'API du composeur setOnSearchContactables :

  dialer.setOnSearchContactables(searchContactables);

ÉCHANTILLON EN DIRECT

Définir le contact d'interaction (écran d'appel actif)

Le SDK permet d'attacher un objet de contact externe aux événements d'interaction à des fins de visualisation et d'enregistrement. Une fois que l'identifiant de l'appel en cours est connu (voir S'abonner à des événements d'interaction), l'intégration pourrait attribuer un contact externe à l'interaction.

Le contactable attaché est visualisé pendant l'écran d'appel actif (communications unifiées uniquement) et est également pris en charge par le système tout au long du cycle de vie de l'interaction.

dialer.setOnDialerEvent((event) => {
   switch (event.type) {
     case 'CALL_START': {
       dialer.setInteractionContact(event.data.id, {
         provider: 'acme',
         id: '123',
         label: 'John Smith',
         type: 'contact',
       });
       break;
     }
     case 'CALL_END': {
       console.log(event.data.contact); // <- carries the assigned contact object
       break;
     }
     default: {
       console.log('Unhandled event', event);
     }
   }
 });

ÉCHANTILLON EN DIRECT

  • L'affectation des contacts est disponible dans les composeurs CC et UC, mais CC ContactPad ne visualise pas le nom du contact donné dans l'interface utilisateur.

Histoire interactive

A venir !