Natively Docs
Join our community 🔥
  • 👩‍🚀Getting Started
    • What is Natively?
    • Why Natively?
    • FAQ
    • Create Your First App
  • 🚀Natively Platform
    • 🚉Releases
    • 🖌️Appearance
      • 😼App Icon
      • 📱Loading Screen
      • 📱Error Screen
      • 🎨Style
    • 🎬Preview
    • ⭐Features
      • 🛳️Bottom Bar
      • 🚇Deeplinks
        • 🔥Firebase
        • 🔗Universal Links
        • 🌱Branch.io
      • 📍Geolocation
      • 🔔Notifications
        • 📲OneSignal Notifications
        • 🔥Firebase Notifications (Advanced)
      • 📒Contacts
      • 👩‍🎨Social Auth
        • 🍏Sign In with Apple
      • 💟HealthKit
      • 💰Purchases
      • 🤑Admob
      • 💳NFC
      • 📷Camera
      • 📂Photo Library
      • 🎤Microphone
      • 📈Analytics
        • 🕊️AppsFlyer
        • 😛Facebook
    • 🚚Publish
      • 🍏iOS App
      • 🤖Android App
    • ⚙️Settings
    • 🙈Subscription Plans
  • Guides
    • 🧋Integration (Native Features)
      • 🏅How to get started?
      • ℹ️Device
      • ℹ️Browser Info
      • 🛳️Bottom Bar
      • ✂️Clipboard
      • 🚦Push Notifications - OneSignal
      • 🚦Push Notifications - Firebase (Advanced)
      • 📍Geolocation
      • 📦App Storage
      • 🗝️Biometrics & Credentials
      • 📧Native SMS/Email
      • 📅Native Date Picker
      • 📸Native Camera
      • 🎙️Native Audio Recorder
      • 🈁Native Scanner (QR/Barcode)
      • 📔Contacts
      • 🍏Apple Sign In
      • ❤️HealthKit
      • 💸In-App Purchases
      • 🤑Admob
      • 💳NFC
      • 🥑Show Toast/Banner
      • ⏳Show/Hide Loading Screen
      • 🥑Haptic Feedback
      • 🖼️Share Media/Files
      • 📱Open an external App/URL
      • ✍️Request User's review
      • ↔️getInsets
      • 🎨Control Style & Colors
    • 🔍Troubleshooting
    • 🐈Setup RevenueCat App
    • 🚑Setup Admob App
    • 🚥Setup One Signal App
    • 🧑‍🤝‍🧑Setup website Universal Links (Deeplinks)
    • 🍕Testing & Submitting your app
    • 🔑Generate iOS Push Key (NEW)
    • 🔑Generate iOS Push Certificate (Legacy)
    • 🤝Affiliate program
    • 📕For Partners: Natively Brand Book.
Powered by GitBook
On this page
  • 🧋 Bubble.io Plugin
  • 🛠 JavaScript SDK

Was this helpful?

  1. Guides
  2. Integration (Native Features)

NFC

minimum version is v2.10.0

PreviousAdmobNextShow Toast/Banner

Last updated 20 days ago

Was this helpful?

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

NFC Bubble Examples:

  1. NFC -

🧋 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. (Do not forget to rebuild app)

  2. Add Natively - NFC element on the page

  3. Fill element fields (Alert messages, etc.)

  4. The Banner will set up automatically on the page load

  5. Call Read or Write actions

🛠 JavaScript SDK

NativelyNFCService

const readAlertMessage = "readAlertMessage";
const writeAlertMessage = "writeAlertMessage";
const readDetectedMessage = "readDetectedMessage";
const writeDetectedMessage = "writeDetectedMessage";

const nfcService = new NativelyNFCService(
    ,
    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)

Make sure you've for your app

🧋
💳
💳NFC
https://bubble.io/page?type=page&name=nfc&id=nativelyqa&tab=tabs-1
Bubble.io Plugin
JavaScript SDK
set up NFC