Web/API/ContactsManager

Draft This page is not complete.

Secure contextThis feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The ContactsManager interface of the Contact Picker API allows users to select entries from their contact list and share limited details of the selected entries with a website or application.

The ContactsManager is available through the global navigator.contacts property.

Methods

select(): Returns a Promise which, when resolved, presents the user with a contact picker which allows them to select contact(s) they wish to share.
getProperties(): Returns a Promise which resolves with an Array of strings indicating which contact properties are available.

Examples

Feature Detection

The following code checks whether the Contact Picker API is supported.

const supported = ('contacts' in navigator && 'ContactsManager' in window);

Checking for Supported Properties

The following asynchronous function uses the getProperties method to check for supported properties.

async function checkProperties() {
  const supportedProperties = await navigator.contacts.getProperties();
  if (supportedProperties.includes('name')) {
    // run code for name support
  }
  if (supportedProperties.includes('email')) {
    // run code for email support
  }
  if (supportedProperties.includes('tel')) {
    // run code for telephone number support
  }
  if (supportedProperties.includes('address')) {
    // run code for address support
  }
  if (supportedProperties.includes('icon')) {
    // run code for avatar support
  }
}

Selecting Contacts

The following example sets an array of properties to be retrieved for each contact, as well as setting an options object to allow for multiple contacts to be selected.

An asynchronous function is then defined which uses the select() method to present the user with a contact picker interface and handle the chosen results.

const props = ['name', 'email', 'tel', 'address', 'icon'];
const opts = {multiple: true};

async function getContacts() {
  try {
      const contacts = await navigator.contacts.select(props, opts);
      handleResults(contacts);
  } catch (ex) {
      // Handle any errors here.
  }
}

handleResults() is a developer defined function.

Specifications

Specification	Status	Comment
UnknownThe definition of 'ContactsManager' in that specification.	Unknown	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`ContactsManager` Experimental'Non-standard'	Chrome Full support 80	Edge Full support 80	Firefox No support No	IE No support No	Opera Full support Yes	Safari No support No	WebView Android Full support 80	Chrome Android Full support 80	Firefox Android No support No	Opera Android Full support Yes	Safari iOS No support No	Samsung Internet Android Full support 13.0
`getProperties` Experimental'Non-standard'	Chrome Full support 80	Edge Full support 80	Firefox No support No	IE No support No	Opera Full support Yes	Safari No support No	WebView Android Full support 80	Chrome Android Full support 80	Firefox Android No support No	Opera Android Full support Yes	Safari iOS No support No	Samsung Internet Android Full support 13.0
`select` Experimental'Non-standard'	Chrome Full support 80	Edge Full support 80	Firefox No support No	IE No support No	Opera Full support Yes	Safari No support No	WebView Android Full support 80	Chrome Android Full support 80	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support 13.0

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.': Non-standard. Expect poor cross-browser support.