The Contact Picker API lets web apps on supported mobile browsers open the device’s native contact chooser so users can quickly share specific contact details—like name, phone, email, address, and avatar—without granting blanket access to their entire address book.
Important
As of today, the API is available on Chrome for Android (and some Chromium-based browsers on Android). It won’t work on desktop browsers.
Key benefits
- User-driven sharing: The system picker appears only after a user action (like a tap), and users explicitly choose which contact(s) to share.
- Field-level consent: Apps request specific fields, and only those approved are returned.
- Privacy-first: No background scanning or persistent access—just a one-time, scoped result.
- Mobile-native UX: Leverages the familiar contacts interface for fewer typos and faster form filling.
- Lower friction: Ideal for autofilling invite flows, shipping forms, emergency contacts, and referral features.
Availability and constraints
- Platform support is currently limited to Chrome for Android and some Chromium-based Android browsers.
- Not available on desktop browsers or iOS Safari at this time.
- Must be triggered by a user gesture (e.g., button click).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Picker API Demo</title>
<link data-wphbdelayedstyle="style.css" rel="stylesheet">
<script type="wphb-delay-type" src="contactPickerAPI.js" defer></script>
</head>
<body>
<h1>Contact Picker API Demo</h1>
<p>
<strong>Note:</strong> This demo only works on Chrome for Android (or compatible browsers on Android).<br>
It will <em>not</em> work on desktop browsers.
</p>
<button id="pickContactBtn">Pick a Contact</button>
<h2>Selected Contact:</h2>
<pre id="output">(none yet)</pre>
<script type="text/javascript" id="wphb-delayed-styles-js">
(function () {
const events = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
function wphb_load_delayed_stylesheets() {
document.querySelectorAll("link[data-wphbdelayedstyle]").forEach(function (element) {
element.setAttribute("href", element.getAttribute("data-wphbdelayedstyle"));
}),
events.forEach(function (event) {
window.removeEventListener(event, wphb_load_delayed_stylesheets, { passive: true });
});
}
events.forEach(function (event) {
window.addEventListener(event, wphb_load_delayed_stylesheets, { passive: true });
});
})();
</script></body>
</html>
body {
font-family: sans-serif;
margin: 2em;
}
button {
font-size: 1.2em;
padding: 0.5em 1em;
}
pre {
background: #f4f4f4;
padding: 1em;
border-radius: 5px;
}
// Get references to the button and output area
const pickContactBtn = document.querySelector('#pickContactBtn');
const output = document.querySelector('#output');
// Function to handle contact picking
const pickContact = async () => {
// Check if the Contact Picker API is available in this browser
if ('contacts' in navigator && 'ContactsManager' in window) {
try {
// Define which fields you want to request from the contact
const props = ['name', 'email', 'tel', 'address', 'icon'];
// Options: allow picking only one contact (multiple: false)
const opts = { multiple: false };
// Open the contact picker and wait for the user's selection
const contacts = await navigator.contacts.select(props, opts);
// Display the selected contact(s) in the output area
if (contacts.length > 0) {
output.textContent = JSON.stringify(contacts[0], null, 2);
} else {
output.textContent = '(No contact selected)';
}
} catch (err) {
// Handle errors (e.g., user cancels, permission denied)
output.textContent = 'Error: ' + err.message;
}
} else {
// API not supported in this browser
output.textContent =
'Contact Picker API not supported on this browser/device.';
}
};
// Attach the function to the button's click event
pickContactBtn.addEventListener('click', pickContact);
