# NFC

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

{% content-ref url="../../natively-platform/features/nfc" %}
[nfc](https://docs.buildnatively.com/natively-platform/features/nfc)
{% 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](https://docs.buildnatively.com/natively-platform/features/nfc#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]: