Native Contacts

This guide demonstrates how to access native device contacts in your Webflow application using Wized and Despia, enabling you to build powerful mobile applications with native functionality.

Prerequisites

  • A Webflow project integrated with Wized

  • A Despia project set up and published to TestFlight/Google Play (can be in draft)

  • The Despia app running on your test device via TestFlight

Clone the Example Projects

To get started quickly, you can clone the example projects:

Overview

Despia allows your Webflow + Wized application to:

  • Be published as a native mobile app on App Store and Google Play Store

  • Access native device functionalities through simple JavaScript snippets

  • Implement features like contact access, push notifications, in-app purchases, and more

Implementation Steps

1

Set Up Permission Request Button

First, create a button in Webflow to request contact access permission:

  1. Add a button element to your Webflow page

  2. Label it "Request Contact Access"

  3. Add a custom attribute:

    • Attribute name: wized

    • Attribute value: despia-request-contact-access

2

Configure Permission Request in Wized

  1. Refresh the Wized canvas to detect the new button

  2. In X-ray mode, click on the request button

  3. Add a new action:

    • Event: On Click

    • Action Type: Run Function

    • Function code:

    window.despia = "requestcontactpermission://"

Note: window.despia will show as undefined in the editor - this is normal as it's injected by the native Despia application.

3

Create Contact Reading Interface

Add elements to read and display contacts:

  1. Add another button labeled "Read Contacts"

  2. Add custom attribute:

    • Attribute name: wized

    • Attribute value: despia-read-contacts

  3. Add a text element to display contact data (optional for testing):

    • Add custom attribute: wized = contact-data-sample

4

Set Up Contact Storage Variable

In Wized, create a variable to store contacts:

  1. Go to Variables tab

  2. Create new variable:

    • Name: contacts

    • Initial value: [] (empty array)

5

Configure Contact Reading Function

On the "Read Contacts" button, add an action:

  1. Event: On Click

  2. First Action - Run Function:

    window.despia = "readcontacts://"

  3. Second Action - Run Function (to handle the response):

    function observeDespiaVariable(variableName, callback, timeout = 5000) {
    const startTime = Date.now();
    
    function checkVariable() {
        if (window[variableName] !== undefined) {
            callback(window[variableName]);
        } else if (Date.now() - startTime < timeout) {
            setTimeout(checkVariable, 100);
        } else {
            console.error(`Despia timeout: ${variableName} was not set within ${timeout} ms`);
        }
    }
    
    checkVariable();
}

observeDespiaVariable("contacts", function(contacts) {
    // Convert object to array format for Wized
    const result = Object.entries(contacts).map(([name, numbers]) => ({
        name,
        number: numbers[0]
    }));

    // Set Wized Variable with Native Contact Data
    v.contacts = result;
});

6

Display Contacts in a List

To render contacts as a list:

  1. Create List Structure in Webflow:

    • Add a div container

    • Inside, add another div for the list item

    • Add two text elements inside the list item div (for name and number)

  2. Add Wized Attributes:

    • On list item div: wized = contact-list-item

    • On name text: wized = contact-list-item-name

    • On number text: wized = contact-list-item-number

  3. Configure List Rendering in Wized:

    • Create an iterator variable i with initial value 0

    • On the list item element, set:

      • List Value: v.contacts

    • On the name text element:

      • Text > Plain Text: v.contacts[v.i].name

    • On the number text element:

      • Text > Plain Text: v.contacts[v.i].number

Important Considerations

Permission Handling

  • Users can grant full contact access or select specific contacts

  • If no permission is granted, the contacts array will be empty

  • Consider implementing fallback UI for when permission is denied

Privacy Features

  • Users can modify contact permissions in device settings anytime

  • Despia respects iOS/Android privacy guidelines

  • Users can choose to share only specific contacts with your app

Best Practices

  1. Onboarding Flow: Request contact permission during user onboarding alongside other permissions

  2. Error Handling: Check if contacts array is empty and guide users to settings if needed

  3. Testing: Always test on real devices through TestFlight/Google Play beta

  4. Real-time Updates: Changes in Wized are reflected immediately in your test app - just close and reopen through TestFlight

Testing Your Implementation

  1. Publish your changes in Webflow

  2. Publish in Wized

  3. Open your app through TestFlight on your test device

  4. Click "Request Contact Access" (permission dialog appears on first use)

  5. Click "Read Contacts" to fetch and display contact data

Data Format

The contacts data returned by Despia follows this structure:

[
  {
    "name": "John Doe",
    "number": "+1234567890"
  },
  {
    "name": "Jane Smith", 
    "number": "+0987654321"
  }
]

Sample Data for Testing

You can use this sample data in your Wized variables for testing the list rendering before connecting to real device contacts:

[
  {
    "name": "John Doe",
    "number": "+1234567890"
  },
  {
    "name": "Jane Smith",
    "number": "+0987654321"
  },
  {
    "name": "Apple Inc.",
    "number": "+1-800-APL-CARE"
  }
]
Need Help?

For additional support or questions, please contact our support team at support@despia.com

Updated on
How it Works?
Background Location