Custom third-party settings and preferences

This feature requires you to register your app as a service first.

For some features that support user to customize, widget supports to add settings into widget's setting page.

Register settings

First, register service with settings and settingsPath:

document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
  type: 'rc-adapter-register-third-party-service',
  service: {
    name: 'TestService',
    settingsPath: '/settings',
    settings: [
      {
        "id": "openContactPageAtCall",
        "type": "boolean",
        "name": "Open Contact Page at Call",
        "value": true
      },
    ],
  }
}, '*');

Register button and section

2.0.0

document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
  type: 'rc-adapter-register-third-party-service',
  service: {
    name: 'TestService',
    settingsPath: '/settings',
    settings: [
      {
        "id": "goToAppSettings",
        "type": "button",
        "name": "Go to App settings",
        "buttonLabel": "Open",
      },
      {
        "id": "crmSetting",
        "type": "section",
        "name": "CRM settings",
        "items": [
          {
            "id": "defaultRecordType",
            "type": "option",
            "name": "Default record type",
            "options": [{
              "id": "Lead",
              "name": "Lead"
            }, {
              "id": "Contact",
              "name": "Contact"
            }],
            "value": "",
            "required": true,
            "placeholder": "Select default record type"
          },
          {
            "id": "defaultContactName",
            "type": "string",
            "name": "Default contact name",
            "value": "John Doe",
            "required": true,
            "placeholder": "Input default contact name"
          },
          {
            "id": "defaultNote",
            "type": "text",
            "name": "Default note",
            "value": "",
            "placeholder": "Input default note"
          },
          {
            "id": "noLogWhenCallIsMissed",
            "type": "boolean",
            "name": "Don't log when call is missed",
            "value": true
          },
        ]
      }
    ],
    buttonEventPath: '/button-click', // required if you have button type in settings
  }
}, '*');

In settings root items, it only supports boolean, button and section type. In section's items, it supports boolean, string, option and text type.

After registering, you can get your setting in settings page:

Add a message event to listen settings updated event:

window.addEventListener('message', function (e) {
  var data = e.data;
  if (data && data.type === 'rc-post-message-request') {
    if (data.path === '/settings') {
      // add your codes here to save settings into your service
      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' },
      }, '*');
    }
  }
});

Listen for setting button click

2.0.0

window.addEventListener('message', function (e) {
  var data = e.data;
  if (data && data.type === 'rc-post-message-request') {
    if (data.path === '/button-click') {
      // add your codes here to handle button click event
      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' },
      }, '*');
    }
  }
});

Set settings item order

2.0.0

You can set settings item order by adding order field in settings item:

document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
  type: 'rc-adapter-register-third-party-service',
  service: {
    name: 'TestService',
    settingsPath: '/settings',
    settings: [
      {
        "id": "goToAppSettings",
        "type": "button",
        "name": "Before noise reduction",
        "buttonLabel": "Open",
        "order": 999, // before noise reduction setting (order: 1000)
      },
      {
        "id": "beforeAutoLog",
        "type": "button",
        "name": "Before auto log",
        "buttonLabel": "Open",
        "order": 2999 // before auto log setting (order: 3000)
      },
      {
        "id": "afterAuth",
        "type": "boolean",
        "name": "After auth setting",
        "value": true,
        "order": 10000 // after auth setting (order: 9000)
      },
    ],
    buttonEventPath: '/button-click', // required if you have button type in settings
    // ...
  }
}, '*');

Order value is a number, the smaller the number, the higher the priority.

Update settings

2.0.0

You can update settings by sending rc-adapter-update-third-party-settings message:

  document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
    type: 'rc-adapter-update-third-party-settings',
    settings: [
      {
        "id": "openContactPageAtCall",
        "type": "boolean",
        "name": "Open Contact Page at Call",
        "value": true,
      },
      {
        "id": "openCRMPage",
        "type": "button",
        "name": "Go to app settings",
        "buttonLabel": "Open",
        "order": 10000,
      },
    ],
  }, '*');