how to add creational of third party CRM contacts search into embeddable widget

  • 1
  • Idea
  • Updated 1 day ago
I want to include the contact search and display contact name via a search through the embeddable widget.
There is a way like following, but how I pass creds and domain details to the request
https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/third-party-service-in-widget...
Photo of sharmilan A

sharmilan A

  • 364 Points 250 badge 2x thumb

Posted 3 months ago

  • 1
Photo of Embbnux Ji

Embbnux Ji, Employee

  • 948 Points 500 badge 2x thumb
Hi, Sharmilan This is a demo about how to integrate third party contacts https://github.com/embbnux/ringcentral-embeddable-voice-with-third-party/blob/master/index.html 

https://medium.com/ringcentral-developers/custom-extensions-for-the-ringcentral-embeddable-voice-web...

Firstly, you need to register the service into the widget when it is :

  function registerService() {
    document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
      type: 'rc-adapter-register-third-party-service',
      service: {
        name: 'TestService',
        contactsPath: '/contacts',
        contactSearchPath: '/contacts/search',
        contactMatchPath: '/contacts/match',
      }
    }, '*');
  } // To register the widget when it is ready. var registered = false; window.addEventListener('message', function (e) { const data = e.data; if (data && data.type === 'rc-adapter-pushAdapterState' && registered === false) { registered = true; registerService(); } })
And add message event to response to the widget:

  window.addEventListener('message', function (e) {
    var data = e.data;
    if (data && data.type === 'rc-post-message-request') {
      if (data.path === '/contacts') {
        getContacts(data);
      }
      if (data.path === '/contacts/search') {
        searchContacts(data);
      }
      if (data.path === '/contacts/match') {
        matchContacts(data);
      }
    }
  });
function responseMessage(request, response) {
    console.log(request);
    document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
      type: 'rc-post-message-response',
      responseId: request.requestId,
      response,
    }, '*');
  }
  function getContacts(request) {
    responseMessage(request, {
      data: [{
        id: '123456',
        name: 'TestService Name',
        type: 'TestService',
        phoneNumbers: [{
          phoneNumber: '+16579991394',
          phoneType: 'directPhone',
        }]
      }],
      nextPage: null,
    });
  }
  function searchContacts(request) {
    responseMessage(request, {
      data: [{
        id: '123456',
        name: 'TestService Name',
        type: 'TestService Name',
        phoneNumbers: [{
          phoneNumber: '+16579991394',
          phoneType: 'directPhone',
        }]
      }]
    });
  }
  function matchContacts(request) {
    responseMessage(request, {
      data: {
        '+12165325078': [
          {
            entityType: 'TestService',
            name: 'TestService 1',
            phoneNumbers: [{
              phoneNumber: '+12165325078',
              phoneType: 'directPhone',
            }]
          }
        ]
      }
    });
  }
Photo of Embbnux Ji

Embbnux Ji, Employee

  • 948 Points 500 badge 2x thumb
Hi, @sharmilan Just check with it. There are bugs in contacts list filter. We will fix it soon.  https://github.com/ringcentral/ringcentral-embeddable/issues/159 
And for dial pad search, it will only show 50 search results. and there are some problem on result sorting. we are working on it. https://github.com/ringcentral/ringcentral-embeddable/issues/111

Thanks very much for feedback.
Photo of sharmilan A

sharmilan A

  • 364 Points 250 badge 2x thumb
Thank you very much, FYI contacts list filter by telephone number works fine with the 3rd party list as well, the name search is the issue.
Photo of Embbnux Ji

Embbnux Ji, Employee

  • 948 Points 500 badge 2x thumb
Hi , @sharmilan We have fixed contacts list filter issue. Do you still have name search issue?
Photo of sharmilan A

sharmilan A

  • 364 Points 250 badge 2x thumb
Hi @Embbnux Ji, ya contacts list filter works fine in the contacts list tab.
But working in dial pad, using the name or telephone number.
Also, for incoming calls, most of the time getting as 'Unknown number'.
All these requests for the CRM databases.

Can you have a look Please?
(Edited)
Photo of Embbnux Ji

Embbnux Ji, Employee

  • 948 Points 500 badge 2x thumb
hi,Sharmilan Which version of widget are you using?  Do you register `contactMatchPath` into widget?  When widget shows incoming call page, it will request `/contact/match` path as '/contacts' to get user name. https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/third-party-service-in-widget...