Personalización de la interfaz de usuario de Open ContactPad (sólo UC)

• Crear un proveedor de integración
• Icono de integración
• Añadir ajustes personalizados a la interfaz del marcador
• Contactos proveedor
  • Autocompletar contactos (sugerencias de marcado)
    • Registrar el método personalizado de búsqueda de contactos con la API del marcador setOnSearchContactables:
  • Establecer contacto de interacción (pantalla de llamada activa)
• Historia interactiva

Crear un proveedor de integración

Elija un nombre único para su proveedor de integración. Se utilizará para asociar los recursos propiedad del proveedor de integración. Los siguientes ejemplos utilizan "acme" como proveedor de personalización.

Indique al marcador UC qué funciones adicionales debe activar en la interfaz de usuario durante la inicialización.

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

Icono de integración

VonageDialer.init({}, (dialer) => {
  dialer.registerSvgIcon('acme', 'data:image/svg+xml;base64,PHN… ...zdmc+');
});

• Puede convertir cualquier imagen SVG (tamaño recomendado 64x64px) en una URL de datos con una etiqueta herramienta en línea.

Añadir ajustes personalizados a la interfaz del marcador

El SDK proporciona un método para ampliar la configuración predeterminada de la interfaz del marcador con opciones de configuración adicionales (tipos admitidos: 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}
});

MUESTRA EN DIRECTO

• Los valores de configuración adicionales son guardados automáticamente por el marcador en el almacenamiento del navegador y están disponibles para su uso posterior por el código de integración (respetando los valores por defecto).

Contactos proveedor

Cómo introducir tus propios contactos en la interfaz del marcador.

Autocompletar contactos (sugerencias de marcado)

Implemente un método especial para buscar contactos desde su propia fuente de datos. El primer parámetro de entrada es el texto que el usuario escribe en el control de entrada del marcador (*puede ser un número de teléfono o cualquier texto como cadena). El segundo parámetro es una función callback para devolver los resultados cuando la búsqueda se haya completado. El callback debe ser llamado siempre con un parámetro de tipo array (incluyendo cero o más elementos contactables). La interfaz de usuario muestra una pequeña barra de progreso durante la búsqueda.

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

Registrar el método personalizado de búsqueda de contactos con la API del marcador setOnSearchContactables:

  dialer.setOnSearchContactables(searchContactables);

MUESTRA EN DIRECTO

Establecer contacto de interacción (pantalla de llamada activa)

El SDK permite adjuntar un objeto de contacto externo a los eventos de interacción con fines de visualización y registro. Una vez conocido el identificador de la llamada en curso (véase Suscripción a eventos de interacción), la integración podría asignar un contacto externo a la interacción.

El contactable adjunto se visualiza durante la pantalla de llamada activa (sólo UC) y también es transportado por el sistema a lo largo de todo el ciclo de vida de la interacción.

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

MUESTRA EN DIRECTO

• La asignación de contactos está disponible tanto en los marcadores CC como UC, pero CC ContactPad no visualiza el nombre del contacto dado dentro de la interfaz de usuario.

Historia interactiva

Muy pronto.