Draft This page is not complete.
Secure contextThis feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
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 Contact Picker API should not be confused with the depreciated Contact API.
Contact Picker API Concepts and Usage
Access to contacts has long been a feature available within native applications. The Contacts Picker API brings that functionality to web applications.
Use cases include selecting contacts to message via an email or chat application, selecting a contacts phone number for use with voice over IP (VOIP), or for discovering contacts who have already joined a social platform. User agents can also offer a consistent experience with other applications on a users device.
When calling the select
method of the ContactsManager
interface, the user is presented with a contact picker, whereby they can then select contact information to share with the web application. User interaction is required before permission to display the contact picker is granted and access to contacts is not persistent; the user must grant access every time a request is made by the application.
This API is only available from a secure top-level browsing context and very carefully considers the sensitivity and privacy of contact data. The onus is on the user for choosing data to share and only allows specific data for selected contacts, with no access to any data for other contacts.
Interfaces
ContactsManager
- The
ContactsManager
interface provides a way for users to select and share limited details of contacts with a web application. Navigator.contacts
- Returns a
ContactsManager
object instance, from which all other functionality can be accessed.
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 |
Unknown | Unknown | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 | |
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 | |
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.
See also:
Contact Picker API by Mozilla Contributors is licensed under CC-BY-SA 2.5.