Lesson 21 / 30

Contacts Picker API

Let users pick contacts with the Contacts Picker API while keeping privacy, and detect support before using it.

Contact access permission

The Contacts Picker API lets users choose which contacts to share with your app, which protects privacy. It is available mainly in Chrome on Android, so always feature-detect it.

Access contacts

Use the Contacts Picker API to access device contacts with user selection.

const contactsButton = document.getElementById('select-contact');
contactsButton.addEventListener('click', async () => {
  try {
    const [contact] = await navigator.contacts.select(['name', 'email'], { multiple: false });
    console.log('Selected contact:', contact);
  } catch (err) {
    console.error('Contacts Picker error:', err);
  }
});

Output:

User can select contacts from device; app receives selected contact info.