Idea

sharmilan-a avatar image
sharmilan-a Posted ·

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

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...
topic-default
1 |1000 characters needed characters left characters exceeded

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

1 Comment

· Write a Comment
Embbnux Ji avatar image
Embbnux Ji Posted ·
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',
            }]
          }
        ]
      }
    });
  }
14 comments
1 |1000 characters needed characters left characters exceeded

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

You don't need to pass creds and domain to it. But you need to implement message event listener to response the data by 'postMessage' out of widget.
0 Likes 0 · ·
Yes. Document is very important. We are working on building better tutorials and documents.
1 Like 1 · ·
Hi, Sharmilan You should just set response.nextPage = page + 1 if has next page data
'''
private getContacts(request: any) {
    return getData('/contacts', false, {itemCount: 50, page: request.body.page}).then((res: any) => {
        const _links = res.data._links;
        let response = {
            data: res
        };

        if (_links.next) {
            response.nextPage = page + 1;
        }

        return this.responseMessage(request, response);
    });
}
'''
the widget will repeat contacts request to your message event listener with page = 2.
You don't need to implement recururion. Just return correct paging data to widget.

Now it hasn't support lazy loading. We save contacts data in memory. So now it only fresh data when user refreshes page. I think 5M data is ok for it. I have created a issue to follow this problem  https://github.com/ringcentral/ringcentral-embeddable/issues/148
1 Like 1 · ·
Hi,Sharmilan. When user searches in dial callee input area, widget will call '/contacts/search'. You need to implement the search logics in '/contacts/search' response. For '/contacts/match' is used to match phone number with contacts to show in call history and messages list. We can get detail document in here  https://github.com/ringcentral/ringcentral-embeddable/blob/master/docs/third-party-service-in-widget...
1 Like 1 · ·
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.
1 Like 1 · ·
Show more comments

Write a Comment

Up to 8 attachments (including images) can be used with a maximum of 1.0 MiB each and 10.0 MiB total.

Your Opinion Counts

Share your great idea, or help out by voting for other people's ideas.