📡NFC connection

This NFC feature enable you to communicate with an NFC device, read its content and use that content in an API call.

This feature is available with the Advanced and Business add-ons.

Requirements

  1. An NFC tag with content.

  2. A published app in able to test.

  3. A device with NFC.

The tag

📍Where to add the tag: Any layer except top-level.

To create the NFC action, use the following tag in the UI element that should open the NFC sensor upon pressing it.

[action:remote-nfc]

Once you do that, you'll be able to bind a request to send the code data to your backend. In this request, there will be two variables available to use:

  • ${nfcResult} -> contains the value of the NFC.

  • ${nfcFormat} -> contains the format of the NFC used. If there isn't any specification, it will return NFC.

How to set it up

  1. Add the [action:remote-nfc] tag to the UI element that will trigger the NFC scanner.

  1. Create an API request that communicates with your backend. Use ${nfcResult} in the request to send the data read by NFC.

  2. Bind the request to the NFC remote action

How to test

  1. Open the app and tap on the component with the action [action:remote-nfc]

  2. In Android, if the device has no NFC, an alert will be displayed. If it has NFC but disabled, another alert will be displayed with a link to enable NFC. If it has NFC and it is enabled, a modal will show up.

  1. Approach your device to an NFC tag/anything contactless, and it should show the string read in the next page.

In Android, NFC works on final apps. In able to test in the final app, you will need to ask for a build and install it. You can use a debug APK to test it without publishing it to Google Play.

Example app

Duplicate the files below to see how to set it up!

Last updated