/Web APIs


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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

Instance methods

select() Experimental

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() Experimental

Returns a Promise which resolves with an Array of strings indicating which contact properties are available.


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);
  } catch (ex) {
    // Handle any errors here.

handleResults() is a developer defined function.


Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
ContactsManager No No No No No No 80 80 No 57 14.5 13.0
getProperties No No No No No No 80 80 No 57 14.5 13.0
select No No No No No No 80 80 No 57 14.5 13.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.