# NFC

Before reading this page, please make sure you've set up you've enabled NFC.

{% content-ref url="/pages/vqhO4kRQIiC0vxxBE0hh" %}
[NFC](/natively-platform/features/nfc.md)
{% endcontent-ref %}

* [Bubble.io Plugin](#bubble.io-plugin)
* [JavaScript SDK](#javascript-sdk)

NFC Bubble Examples:

1. NFC - <https://bubble.io/page?type=page&name=nfc&id=nativelyqa&tab=Design>

### 🧋 Bubble.io Plugin

#### \[Element] Natively - NFC

**Fields:**

* Read Alert Message
* Write Alert Message
* Read Detected Message
* Write Detected Message
* nfcresponse - it's a predefined (by plugin) bubble type that needs to be selected (Natively - NFCResponse type)

**Events:**

* NFC Read Failed
* NFC Write Failed
* NFC Write Success
* NFC Read Success
* NFC Ready To Use - mean you've received 'NFC Is Available' state (Usable for Android)

**States:**

* Error
* Result
* NFC Tag ID
* NFC Tag Type
* NFC Is Available - yes/no (For Android, you need to ask the user to enable it in device settings)

**Actions:**

* Read Data
* Write Data
  * Record Data - text (can be url or just text)To open app with card you can use your bundle id (Like this: com.bundle.id://open?url={url you wanna open}
  * Record ID - text (better to use a shorter ID, for now, it's not usable, so you can hardcode it to some value, but in the future Natively will allow to Write/Read more than 1 data)
  * Record Data Type - text, uri. When the data type is set to 'uri', scanning a NFC cord will automatically open the link specified in the Record Data field in the device's default web browser.

**How to use?**

1. Make sure you've [set up NFC](/natively-platform/features/nfc.md#how-to-set-up-nfc) for your app
2. (Do not forget to rebuild app)
3. Add Natively - NFC element on the page
4. Fill element fields (Alert messages, etc.)
5. The Banner will set up automatically on the page load
6. Call Read or Write actions

### 🛠 JavaScript SDK

#### NativelyNFCService

<pre class="language-javascript" data-overflow="wrap" data-line-numbers><code class="lang-javascript">const readAlertMessage = "readAlertMessage";
const writeAlertMessage = "writeAlertMessage";
const readDetectedMessage = "readDetectedMessage";
const writeDetectedMessage = "writeDetectedMessage";

const nfcService = new NativelyNFCService(
    <a data-footnote-ref href="#user-content-fn-1">readAlertMessage</a>,
    writeAlertMessage,
    readDetectedMessage,
    writeDetectedMessage
);


// All available methods (It doesn't mean you need to call them like this):
nfcService.read(read_callback);
nfcService.write(recordId, recordData, recordDataType, write_callback); //from v2.15.21 - recordDataType can be 'text' or 'uri'.
nfcService.available(available_callback);
// write response
// {
//  "type_format": "nfcWellKnown",
//  "type": "123",
//  "id": "123",
//  "length": 0,
//  "payload_content": "recordData",
//  "payload_raw": ""
//}

// How to use?
// 1. Call nfcService.available method (you will receive resp.status == true)
// 2. Call nfcService.read (you will receive resp.
// 3. Call nfcService.write (you need to pass ``recordId (can be hardcoded to "123", we don't use it for now. In the future updates it will be used to Read/Write more than 1 data ), `recordData` (string, can be url or just text), 'recordDataType' (string, can be 'text' or 'uri'). To open app with card you can use your bundle id (Like this: com.bundle.id://open?url={url you wanna open} 
// 4. Check response resp.status (if it was SUCCESS or FAILED (with error)
// resp.status (resp.message if status is FAILED)
</code></pre>

[^1]:


---

# 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.buildnatively.com/guides/integration/nfc.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.