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.
The following code checks whether the Contact Picker API is supported.
const supported = "contacts" in navigator && "ContactsManager" in window;
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")) {
}
if (supportedProperties.includes("email")) {
}
if (supportedProperties.includes("tel")) {
}
if (supportedProperties.includes("address")) {
}
if (supportedProperties.includes("icon")) {
}
}
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) {
}
}
handleResults()
is a developer defined function.