Anpassen der Open ContactPad-Benutzeroberfläche (nur UC)

Erstellen Sie einen Integrationsanbieter

Wählen Sie einen eindeutigen Namen für Ihren Integrationsanbieter. Er wird verwendet, um die Ressourcen des Integrationsanbieters zuzuordnen. In den folgenden Beispielen wird "acme" als Anpassungsanbieter verwendet.

Teilen Sie dem UC-Dialer mit, welche zusätzlichen Funktionen in der Benutzeroberfläche während der Initialisierung aktiviert werden sollen.

Hinweis: Sie müssen noch die entsprechenden Handler für die aktivierten Funktionen implementieren.

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

Integrationssymbol festlegen

VonageDialer.init({}, (dialer) => {
  dialer.registerSvgIcon('acme', 'data:image/svg+xml;base64,PHN… ...zdmc+');
});
  • Sie können jedes SVG-Bild (empfohlene Größe 64x64px) in eine Daten-URL umwandeln mit einem Online-Tool.

Hinzufügen von benutzerdefinierten Einstellungen zur Dialer-Schnittstelle

Custom Settings

Das SDK bietet eine Methode, um die Standardeinstellungen der Dialer-Schnittstelle um zusätzliche Konfigurationsoptionen zu erweitern (unterstützte Typen: string, boolean, select).

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

LIVE-MUSTER

  • Die zusätzlichen Einstellungswerte werden vom Dialer automatisch im Browser gespeichert und stehen für die spätere Verwendung durch den Integrationscode zur Verfügung (wobei die Standardwerte beibehalten werden).

Kontakte Anbieter

So bringen Sie Ihre eigenen Kontakte in die Dialer-Schnittstelle.

Automatische Vervollständigung von Kontakten (Wahlvorschläge)

Implementieren Sie eine spezielle Methode zur Suche von Kontakten aus Ihrer eigenen Datenquelle. Der erste Eingabeparameter ist der Text, den der Benutzer in das Dialer-Eingabefeld eingibt (*es kann eine Telefonnummer oder ein beliebiger Text als String sein). Der zweite Parameter ist eine Callback-Funktion für die Rückgabe der Ergebnisse, wenn die Suche abgeschlossen ist. Der Callback muss immer mit einem Parameter vom Typ Array (mit null oder mehr kontaktierbaren Elementen) aufgerufen werden. Die Benutzeroberfläche zeigt während der Suche einen kleinen Fortschrittsbalken an.

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

Registrieren Sie die benutzerdefinierte Kontaktsuchmethode mit der Dialer-API setOnSearchContactables:

  dialer.setOnSearchContactables(searchContactables);

LIVE-MUSTER

Interaktionskontakt einstellen (Bildschirm für aktiven Anruf)

Das SDK ermöglicht das Anhängen eines externen Kontaktobjekts an die Interaktionsereignisse zu Visualisierungs- und Protokollierungszwecken. Sobald die Kennung des laufenden Anrufs bekannt ist (siehe Abonnieren von Interaktionsereignissen), könnte die Integration der Interaktion einen externen Kontakt zuordnen.

Der angehängte Kontakt wird während des aktiven Gesprächsbildschirms (nur UC) visualisiert und wird vom System durch den gesamten Interaktionslebenszyklus getragen.

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

LIVE-MUSTER

  • Die Kontaktzuweisung ist sowohl in CC- als auch in UC-Dialern verfügbar, aber CC ContactPad zeigt den angegebenen Kontaktnamen nicht in der Benutzeroberfläche an.

Interaktive Geschichte

Demnächst verfügbar!