Dialpad Mini Dialer (CTI)

🚧

Under Construction

Dialpad is constantly updating this feature. Please reach out to us at [email protected] should you encounter any issues

"hid" access will need to be added to your Dialpad iframe by end of Jan 2023. Please refer to the Loading the CTI section for more details.

As Google phased out third-party cookies, we have changed the way of login on CTI. Please reach out to us if you have any issue.

Introduction

Dialpad's CTI (mini dialer) provides key features of Dialpad's desktop app - calling and messaging - in a version that can be rendered on Google Chrome. The CTI can be opened in an iframe inside a logged in site. This section describes the steps in which the CTI can be setup and the JavaScript methods that can be used for communicating between your application and the CTI iframe.

Setting up the CTI

The CTI will be hosted on Dialpad and instantiated in an iframe on your logged in website. To setup the CTI, please submit this form and include the following details

Allowed Origins

These are URLs that Dialpad would add to its allow list for accepting Javascript commands. For instance, if the CTI would be rendered in an iframe within example.com, then the domain example.com would need to be specified. Wildcards are also accepted on the left and rightmost position of the uri.

Additional Headers

Specify custom headers for the iframe using a JSON body.

Loading the CTI

Once the CTI instance is setup by the Dialpad team, a client ID would be provided to you. This ID will be used to load the CTI at the URL https://dialpad.com/apps/<ClientID>. While loading the CTI, please allow microphone, autoplay, camera, display capture and hid accesses.

For example

<iframe src="https://dialpad.com/apps/clientID" title="Dialpad" allow="microphone; speaker-selection; autoplay; camera; display-capture; hid" sandbox="allow-popups allow-scripts allow-same-origin" frameborder=0 style="width:400px; height:520px;"></iframe>

When a user would have to login to Dialpad when the CTI is first loaded or after every time the user logs out of Dialpad.

Note: "hid" access will need to be added to your Dialpad iframe by end of Jan 2023.

Supported JavaScript Methods

We support a few JS methods through the window.postMessage() method by using the postMessage API.

Field definition for the window.postMessage() method:

The methods supported by Dialpad at this time are listed below

user_authentication

This message is posted by Dialpad when the authentication state of a user in the Dialpad CTI changes. The payload parameters of this message are:

Example: Dialpad will post such message to the component that embeds the CTI through this way

window.parent.postMessage({
  'api': 'opencti_dialpad',
  'version': '1.0',
  'method': 'user_authentication',
  'payload': {
    'user_authenticated': true,
    'user_id': 1234567
  }
}, '*');

enable_current_tab

This message is posted to Dialpad. Dialpad allows only one CTI tab to be enabled at a time to make and receive calls. This method allows the tab to enable the CTI for calling. There is no payload for this method.

Example:

<CTI_iframe>.contentWindow.postMessage({
  'api': 'opencti_dialpad',
  'version': '1.0',
  'method': 'enable_current_tab'
}, 'https://dialpad.com');

initiate_call

This message is posted to Dialpad. The initiate_call method opens up the dial prompt in the CTI window and an outbound call will be made automatically if the CTI tab is enabled. If the CTI tab is disabled, this method will enable this tab. The following parameters are supported with this method

Example:

<CTI_iframe>.contentWindow.postMessage({
  'api': 'opencti_dialpad',
  'version': '1.0',
  'method': 'initiate_call',
  'payload': {
    'enable_current_tab': false,
    'phone_number': '+15555555555',
    'identity_type': 'CallCenter',
    'identity_id': 1234567,
    'custom_data': 'any string'
    'outbound_caller_id': '+18005550970',
  }
}, 'https://dialpad.com');

call_ringing

This message is posted by Dialpad when an inbound call starts or finishes ringing. Use this message to open the CTI window for the user to answer the call. The payload of this method has the following parameter:

Example: Dialpad will post such message to the component that embeds the CTI.

window.parent.postMessage({
  'api': 'opencti_dialpad',
  'version': '1.0',
  'method': 'call_ringing',
  'payload': {
    'state': 'on',
    'id': 5747322335264768,
    'contact': {
        'id': 'http://www.google.com/m8/feeds/contacts/[email protected]/base/21042cfc8b367347',
        'phone': '+16043111111',
        'type': 'Google',
        'name': 'test contact',
        'email': '[email protected]'
    },
    'target': {
        'id': 5908860123456789,
        'phone': '+16010123456"',
        'type': 'User',
        'name': 'exampe user',
        'email': '[email protected]'
    },
    'internal_number': '+16010123456',
    'external_number': '+16043111111'
  }
}, '*');

end_all_calls

This message is posted to Dialpad. It will end all ongoing calls targeting the user. There is no payload for this method.

Example:

<CTI_iframe>.contentWindow.postMessage({
  'api': 'opencti_dialpad',
  'version': '1.0',
  'method': 'end_all_calls',
}, 'https://dialpad.com')