Add third-party authorization button

For some CRM API, they requires user to authorize firstly. This feature allows developer to add a third party authorization button and sync status into widget.

First you need to pass authorizationPath, authorizedTitle, unauthorizedTitle and authorized when you register service.

document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
  type: 'rc-adapter-register-third-party-service',
  service: {
    name: 'TestService',
    displayName: 'TestServiceDisplayName', // Optional, supported from 2.0.1
    info: 'Some description about this service', // Optional, supported from 2.0.0
    authorizationPath: '/authorize',
    authorizedTitle: 'Unauthorize',
    unauthorizedTitle: 'Authorize',
    authorized: false,
    authorizedAccount: 'test@email.com', // optional, authorized account email or id
    authorizationLogo: 'https://your_brand_picture/logo.png', // optional, show your brand logo in authorization section, recommended: height 30px, width < 85px.
    // showAuthRedDot: true, // optional, this will show red dot at settings page when need to auth
  }
}, '*');

After registered, you can get a TestService authorization button in setting page:

Add a message event to response authorization button event:

window.addEventListener('message', function (e) {
  var data = e.data;
  if (data && data.type === 'rc-post-message-request') {
    if (data.path === '/authorize') {
      // add your codes here to handle third party authorization
      console.log(data);
      // response to widget
      document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
        type: 'rc-post-message-response',
        responseId: data.requestId,
        response: { data: 'ok' },
      }, '*');
    }
  }
});

Update authorization status in widget:

document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
  type: 'rc-adapter-update-authorization-status',
  authorized: true,
  authorizedAccount: 'test@email.com', // optional, authorized account email or id
}, '*');

If you register an authorization service into Embeddable, the contacts-related service above will work only after the user's status has changed to authorized.