No Login Data Private Local Save

Contact Picker API Demo - Online Select & Read Contacts

6
0
0
0
Checking API...
- properties Detecting...
Configuration

Select properties to read from contacts

At least one property must be selected. "Name" and "Phone" are most widely supported.
API not available. This browser doesn't support the Contact Picker API. Try Chrome on Android or use the simulated demo below.
HTTPS required. The Contact Picker API only works over HTTPS or localhost.
Results

No contacts selected yet.
Configure properties and click "Select Contact(s)" to begin.

JavaScript Usage
// Check if Contact Picker API is supported if ('contacts' in navigator && 'ContactsManager' in window) { // Get supported properties const props = await navigator.contacts.getProperties(); // Select contacts const contacts = await navigator.contacts.select( ['name', 'tel', 'email'], { multiple: true } ); // Process results contacts.forEach(contact => { console.log(contact.name, contact.tel, contact.email); }); }

Frequently Asked Questions

What is the Contact Picker API?
The Contact Picker API is a browser API that allows web applications to access contacts from the user's device address book. It provides a secure, user-granted way to select one or more contacts and retrieve their details (name, phone, email, address, icon). Unlike traditional approaches, the user maintains full control — they pick exactly which contacts to share via a native system dialog. The API is part of the Web Capabilities Project (Fugu) by Google.
Which browsers support the Contact Picker API?
As of 2024, the Contact Picker API is primarily supported on Chrome for Android (version 80+). It also works in Edge on Android and some Chromium-based mobile browsers. Desktop browsers (Chrome, Firefox, Safari, Edge) do not support this API because they lack access to a system contact database. The API requires HTTPS or localhost for security reasons. You can check Can I Use for the latest support data.
Is the Contact Picker API secure? What about privacy?
Yes, the API is designed with privacy-first principles. The website never gets access to your full address book — only the specific contacts you manually select through the native system picker dialog. Key security features include: (1) Requires a user gesture (click/tap) to trigger; (2) Only works over HTTPS; (3) The browser's native picker UI ensures the website cannot stealth-read contacts; (4) Users can cancel at any time; (5) Only the requested properties are returned. The API does not allow background or automatic contact access.
What contact properties can I request?
The API supports five property types: name (ContactAddress with givenName, familyName, etc.), tel (array of phone numbers), email (array of email addresses), address (array of physical addresses with country, city, street, postal code, etc.), and icon (array of contact photo Blobs). Not all devices support all properties — use navigator.contacts.getProperties() to dynamically discover what's available. "name" and "tel" have the widest support across devices.
Can I use Contact Picker API in a PWA (Progressive Web App)?
Absolutely! The Contact Picker API works great in PWAs. In fact, it's one of the key APIs that help bridge the gap between web apps and native apps. When your PWA is installed on Android via Chrome, the contact picker functions seamlessly. Make sure your PWA manifest is properly configured and the app is served over HTTPS. This enables use cases like inviting friends, sharing content, or filling forms with contact data — all within your PWA.
What happens if the user denies or cancels the contact picker?
If the user cancels the picker dialog or denies permission, the navigator.contacts.select() promise rejects with an error. You should always wrap the call in a try/catch block and handle this gracefully — for example, by showing a friendly message that no contacts were selected. The API does not expose whether the user explicitly denied or simply dismissed the dialog, which is intentional for privacy. Never assume the user will always grant access.
How is this different from the old navigator.contacts API or Cordova plugins?
The Contact Picker API (navigator.contacts.select()) is fundamentally different from older approaches: (1) It's a browser-native API — no plugin or Cordova required; (2) It uses a system picker UI so the website never sees the full contact list; (3) It's explicit opt-in per interaction — each select() call requires a fresh user gesture; (4) Older APIs like the deprecated navigator.contacts (Contacts API) allowed broader access and were removed due to privacy concerns. The new API is designed for the modern, privacy-conscious web.
🔧 Related Tools