Start codelab

Codelab Flow

What you will learn

L W Contacts Picker API

Contacts Picker API allows a PWA to access contacts from the device's native contacts manager. Chrome 77 or higher running on Android M or later required.

Setting up the API

In your App, create an empty contactPicker.js file and copy and paste the code snippet below to it. Then save your changes!

Example....

./your-project/some-folder/contactPicker.js

Next thing to do is to copy the code below to the empty contactPicker.js.

Your web app will have access to your contacts' names, emails, and telephone numbers.
Copy the code snippet below...
   
const getContactsButton = document.getElementById("contact-picker");
const props = ["name", "email", "tel"];
const opts = { multiple: true };

getContactsButton.addEventListener("click", async () => {
  try {
    const contacts = await navigator.contacts.select(props, opts);
    console.log(contacts);
  } catch (error) {
    // Handle any errors here.
    alert(error);
  }
});
    

Add to your Page

In your page, add the following code at the bottom just before the end of the body tag

<script src="./some-folder/contactPicker.js"></script>

Add button

Remember to add the contact picker button to your web page.

<!-- Add this button to your App -->
<button id="contact-picker"> Pick Contacts </button>

Code sandbox

Feel free to play with the live demo app below on Glitch.

view source

What's next?

Have a look at more of currently existing codelabs here for you to take. Donate a Star and Contribute in any way. Be sure to follow us on Twitter.

Feel free to learn more on the detailed Contacts Picker API documentation available here.

FORK ON GITHUB