# NFC connection

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

{% hint style="info" %}
This feature is available with the [Advanced and Business add-ons](https://www.bravostudio.app/pricing).
{% endhint %}

## Requirements

1. An NFC tag with content.
2. A published app in able to test.
3. A device with NFC.

## The tag

:round\_pushpin:**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.

<mark style="color:red;">`[action:remote-nfc]`</mark>

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:

* <mark style="color:red;">`${nfcResult}`</mark> -> contains the value of the NFC.
* <mark style="color:red;">`${nfcFormat}`</mark> -> 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 <mark style="color:red;">`[action:remote-nfc]`</mark> tag to the UI element that will trigger the NFC scanner.

<figure><img src="/files/VcUpNz2FgUAPjqT9BmsI" alt=""><figcaption></figcaption></figure>

2. Create an API request that communicates with your backend. Use <mark style="color:red;">`${nfcResult}`</mark> in the request to send the data read by NFC.&#x20;
3. Bind the request to the NFC remote action

<figure><img src="/files/ej8tuUaQZWHImEOzqsQu" alt=""><figcaption></figcaption></figure>

## How to test

1. Open the app and tap on the component with the action <mark style="color:red;">`[action:remote-nfc]`</mark>
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.

<figure><img src="/files/Jfn2D8NbDCM8KpiZgwL2" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
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.
{% endhint %}

## Example app

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

{% embed url="<https://www.figma.com/file/hj6owF1XYhTYwb5vJzonkO/Bravo-Sample%3A-NFC-connect?node-id=0-1&t=O4FPXMwibb6Pq47V-0>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/integrations/nfc-connection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.