Personalização da interface de usuário do Open ContactPad (somente UC)

• Criar um provedor de integração
• Definir ícone de integração
• Adicionar configurações personalizadas à interface do discador
• Provedor de contatos
  • Preenchimento automático de contatos (sugestões de discagem)
    • Registre o método personalizado de busca de contatos com o método `setOnSearchContactables` da API do discador:
  • Definir contato de interação (tela de chamada ativa)
• História Interativa

Criar um provedor de integração

Escolha um nome exclusivo para o seu provedor de integração. Ele será usado para associar os recursos pertencentes ao provedor de integração. Nos exemplos a seguir, utiliza-se “acme” como provedor de integração.

Indique ao UC Dialer quais recursos adicionais devem ser ativados na interface do usuário durante a inicialização.

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

Definir ícone de integração

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

• Você pode converter qualquer imagem SVG (tamanho recomendado: 64x64 px) em uma URL de dados com um ferramenta online.

Adicionar configurações personalizadas à interface do discador

O SDK oferece um método para ampliar as configurações padrão da interface do discador com opções de configuração adicionais (tipos suportados: string, booleano, 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}
});

AMOSTRA AO VIVO

• Os valores adicionais das configurações são salvos automaticamente pelo discador no armazenamento do navegador e ficam disponíveis para uso posterior pelo código de integração (respeitando os valores padrão).

Provedor de contatos

Como importar seus próprios contatos para a interface do discador.

Preenchimento automático de contatos (sugestões de discagem)

Implemente um método especial para pesquisar contatos a partir de sua própria fonte de dados. O primeiro parâmetro de entrada é o texto que o usuário digita no campo de entrada do discador (*pode ser um número de telefone ou qualquer texto na forma de string). O segundo parâmetro é uma função de retorno de chamada para retornar os resultados quando a pesquisa for concluída. A função de retorno de chamada deve ser sempre chamada com um parâmetro do tipo array (incluindo zero ou mais itens de contato). A interface do usuário exibe uma pequena barra de progresso durante a pesquisa.

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

Registre o método personalizado de busca de contatos com o método `setOnSearchContactables` da API do discador:

  dialer.setOnSearchContactables(searchContactables);

AMOSTRA AO VIVO

Definir contato de interação (tela de chamada ativa)

O SDK permite associar um objeto de contato externo aos eventos de interação para fins de visualização e registro. Assim que o identificador da chamada em andamento for conhecido (consulte Inscrição para eventos de interação), a integração poderia atribuir um contato externo à interação.

O contato anexado é exibido na tela da chamada ativa (somente no UC) e também é mantido pelo sistema durante todo o ciclo de vida da interação.

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

AMOSTRA AO VIVO

• A atribuição de contatos está disponível tanto no discador CC quanto no UC, mas o CC ContactPad não exibe o nome do contato em questão na interface do usuário.

História Interativa

Em breve!