---
title: "Contact Picker API"
description: "Access device contacts from the web with the Contact Picker API. Practical notes and code examples on Contact Picker API by."
url: "https://h3manth.com/scribe/contact-picker-api/"
canonical_url: "https://h3manth.com/scribe/contact-picker-api/"
markdown_url: "https://h3manth.com/scribe/blog/contact-picker-api.md"
publishDate: "2020-03-11T00:00:00.000Z"
author: "Hemanth HM"
category: "web"
tags: ["javascript","web-api","mobile"]
word_count: 144
reading_time_minutes: 1
x_markdown_tokens: 338
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# Contact Picker API

> Access device contacts from the web with the Contact Picker API. Practical notes and code examples on Contact Picker API by.

Native mobile apps always had this privilege of using the contact picker with ease and now web can do that too!

## Check Browser Support

First up, check if the browser supports this API:

```javascript
const hasContactPicker = "contacts" in navigator && "ContactsManager" in window;

## Invoke Select Method
javascript
const properties = "name, tel, email, address, icon".split(",");
const options = { multiple: true };

const fetchContact = async (evt) => {
  try {
    const contacts = await navigator.contacts.select(properties, options);
    // ^ [{},{}]
  } catch (err) {
    // Handle error
  }
};

contactButton.addEventListener("click", (evt) => fetchContact(evt));
```

The `contacts` would be an array of objects with keys being the requested properties and values being the corresponding contact details.

## Important Notes

- This API works only on top level window
- User gesture is required before invoking the `select` method!

View the [demo here](https://contact-api.glitch.me/).