{"id":248807,"date":"2020-05-15T09:02:05","date_gmt":"2020-05-15T09:02:05","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=248807"},"modified":"2024-01-03T10:11:27","modified_gmt":"2024-01-03T10:11:27","slug":"ecommerce-nfc-integration","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/","title":{"rendered":"Product NFC Tags for Magento 2"},"content":{"rendered":"\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Introduction<\/h3>\n<\/div><\/div>\n\n\n\n<p>Magento 2 PWA NFC tag integration allows store management to be more efficient. With the help of this short-range wireless connectivity service the products are added to cart in a go. Thus, this small yet highly efficient technology can add to a lot of advantages for the customers and store owners.<\/p>\n\n\n\n<p>Henceforth, this technology is best for any POS outlet to quickly add the product to the cart. It can even give an edge to the e-Commerce website users as they can even scan the NRC tag and add it to the cart.<\/p>\n\n\n\n<p>With the much recognized PWA the store owner can easily increase the user experience with a lighting fast technology. Additionally the app efficiently performance even in a slow internet connection.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Features<\/h3>\n<\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>More user-friendly than a web application.<\/li>\n\n\n\n<li>Works lightning fast if compared to the website.<\/li>\n\n\n\n<li>Supports push notification for Android devices.<\/li>\n\n\n\n<li>Completely responsive on all the platforms.<\/li>\n\n\n\n<li>Launches without the internet or low-quality internet.<\/li>\n\n\n\n<li>It looks and feels like a native application.<\/li>\n\n\n\n<li>Users do not need to update the progressive web application.<\/li>\n\n\n\n<li>No app store requires managing the application.<\/li>\n\n\n\n<li>Increases user engagement in the store.<\/li>\n\n\n\n<li>Increases store revenue due to user engagement.<\/li>\n\n\n\n<li>The application name can be entered by the admin.<\/li>\n\n\n\n<li>Admin can upload and change the application icon.<\/li>\n\n\n\n<li>The splash background color of the Progressive Web Application can also be changed by the admin.<\/li>\n\n\n\n<li>Admin can set the theme color of the&nbsp;Progressive Web Application and manage the NFC settings.<\/li>\n\n\n\n<li>The products are added to the cart by just tapping the respective NFC tag with the help of the smartphones.<\/li>\n\n\n\n<li>Additional quantities can be added to the cart by scanning the same tag multiple times.<\/li>\n\n\n\n<li>The admin can create\/update NFC tags for the products from the code end.<\/li>\n\n\n\n<li>Easy checkout with the desired product using PWA.<\/li>\n\n\n\n<li>Managed long ques in the physical store.<\/li>\n\n\n\n<li>It makes the POS management much easy.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Important<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The device browser must support the NFC feature.<\/strong><\/li>\n\n\n\n<li><strong>The functionality works on HTTPS only.<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Usage Of Product NFC Tags Magento 2 PWA In e-Commerce and Physical Store<\/h3>\n<\/div><\/div>\n\n\n\n<p>This feature is a utility for both e-Commerce and the physical store owners. Using this extension in PWA can add a divergent benefit for users. Thus, increasing the sales on both type of stores and increment in revenue. <\/p>\n\n\n\n<p>The addition of the product to cart saves time of the user in fetching the product on a complete store. Thus, allowing the decrementing the bounce rate.<\/p>\n\n\n\n<p>Note &#8211; If you want to create an NFT Marketplace use our <a href=\"https:\/\/webkul.com\/blog\/magento2-nft-marketplace-documentation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 NFT Marketplace<\/a> extension for digital assets tarding.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Installation<\/h3>\n<\/div><\/div>\n\n\n\n<p><strong>Product NFC Tags for Magento 2<\/strong>&nbsp;module installation is super easy. You need to move the app &amp; pub folder in Magento2 root directory that\u2019s it as per the screenshot.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png\"><img decoding=\"async\" width=\"1302\" height=\"411\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png\" alt=\"Progressive Web Application For Magento2\" class=\"wp-image-65341\" title=\"Progressive Web Application For Magento2\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png 1302w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1-250x79.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1-300x95.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1-768x242.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1-1200x379.png 1200w\" sizes=\"(max-width: 1302px) 100vw, 1302px\" loading=\"lazy\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>After the successful installation, you have to run these commands in the&nbsp;Magento2 root directory.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">First command- php bin\/magento setup:upgrade<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Second Command \u2013 php bin\/magento setup:di:compile<br><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/command2-compile-2.png\"><\/a><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Third Command \u2013 php bin\/magento setup:static-content:deploy<br><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/command3-deploy-1.png\"><\/a><\/pre>\n\n\n\n<p>After running the commands, you have to log in to the admin panel and you have to clear the Cache. You can refer to the below screenshot.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/cache-1.png\"><img decoding=\"async\" width=\"1254\" height=\"1023\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/cache-1.png\" alt=\"Progressive Web Application For Magento2\" class=\"wp-image-65344\" title=\"Progressive Web Application For Magento2\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/cache-1.png 1254w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/cache-1-250x204.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/cache-1-300x245.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/cache-1-768x627.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/cache-1-1200x979.png 1200w\" sizes=\"(max-width: 1254px) 100vw, 1254px\" loading=\"lazy\" \/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"language-translation\">Language Translation<\/h3>\n\n\n\n<p>For translation of the module language, navigate through&nbsp;<strong>src\/app\/code\/Webkul\/Pwa\/i18n<\/strong>&nbsp;and edit the en_US.csv file.<\/p>\n\n\n\n<p>Now,&nbsp;<strong>translate&nbsp;<\/strong>the words on the&nbsp;<strong>right&nbsp;<\/strong>and&nbsp;<strong>upload&nbsp;<\/strong>the&nbsp;<strong>modified file&nbsp;<\/strong>to the&nbsp;<strong>same&nbsp;<\/strong>location. The filename of the translated file should be according to the&nbsp;<strong>language&nbsp;<\/strong>and&nbsp;<strong>region<\/strong>&nbsp;code like<strong>&nbsp;de_DE.csv<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1114\" height=\"716\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18111948\/translation.png\" alt=\"translation\" class=\"wp-image-187365\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18111948\/translation.png 1114w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18111948\/translation.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18111948\/translation.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18111948\/translation.png 768w\" sizes=\"(max-width: 1114px) 100vw, 1114px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creating-firebase-product-credentials\">Creating Firebase Product Credentials<\/h3>\n\n\n\n<p>In order to use this module, you need to have&nbsp;<strong>Firebase Project Credentials,&nbsp;<\/strong>which will be used in the Magento configuration. So, please visit&nbsp;<a href=\"https:\/\/console.firebase.google.com\/\">this<\/a>&nbsp;link&nbsp;and create a new project with your Gmail account.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1280\" height=\"652\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png\" alt=\"firebase\" class=\"wp-image-187121\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png 1280w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18063413\/firebase.png 1200w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>1.<\/strong>&nbsp; After opening the<strong>&nbsp;Firebase<\/strong>&nbsp;website, please click&nbsp;<strong>CREATE NEW PROJECT<\/strong>&nbsp;button as shown in the above screenshot.<\/p>\n\n\n\n<p><strong>2.&nbsp;<\/strong>A small pop-up window will appear with the name of&nbsp;<strong>Create a project<\/strong>, here you have to enter your&nbsp;<strong>Project Name<\/strong>&nbsp;and then select your&nbsp;<strong>Country\/Region<\/strong>.<\/p>\n\n\n\n<p><strong>3<\/strong>. Hence, after completing the details click&nbsp;<strong>CREATE PROJECT<\/strong>&nbsp;button<strong>.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1284\" height=\"670\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064333\/add-a-new-project-1.png\" alt=\"add-a-new-project-1\" class=\"wp-image-187129\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064333\/add-a-new-project-1.png 1284w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064333\/add-a-new-project-1.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064333\/add-a-new-project-1.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064333\/add-a-new-project-1.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064333\/add-a-new-project-1.png 1200w\" sizes=\"(max-width: 1284px) 100vw, 1284px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>4.<\/strong>&nbsp;So, after creating your new project click on the Storage and create a new bucket. You can also find the default bucket here.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1298\" height=\"669\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074029\/add-bucket.png\" alt=\"add-bucket\" class=\"wp-image-187188\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074029\/add-bucket.png 1298w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074029\/add-bucket.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074029\/add-bucket.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074029\/add-bucket.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074029\/add-bucket.png 1200w\" sizes=\"(max-width: 1298px) 100vw, 1298px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Thus, post creating bucket now go to, Settings&nbsp;menu icon and select&nbsp;Project Settings&nbsp;option. Please view the below-attached screenshot. A new Settings page will be opened.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1283\" height=\"614\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064821\/project-setting.png\" alt=\"project-setting\" class=\"wp-image-187131\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064821\/project-setting.png 1283w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064821\/project-setting.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064821\/project-setting.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064821\/project-setting.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18064821\/project-setting.png 1200w\" sizes=\"(max-width: 1283px) 100vw, 1283px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>5.<\/strong>&nbsp;In the General tab find the project ID, web API key, etc. under the&nbsp;<strong>setting<\/strong>&nbsp;page.<\/p>\n\n\n\n<p>Now click on the button as shown in the image below. This will be used to add the firebase to the web app.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1284\" height=\"666\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074852\/generate-app.png\" alt=\"generate-app\" class=\"wp-image-187192\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074852\/generate-app.png 1284w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074852\/generate-app.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074852\/generate-app.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074852\/generate-app.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18074852\/generate-app.png 1200w\" sizes=\"(max-width: 1284px) 100vw, 1284px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Henceforth, clicking on the button above Register the app by entering the app nickname and click on register app-<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"893\" height=\"619\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075350\/register-app.png\" alt=\"register-app\" class=\"wp-image-187200\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075350\/register-app.png 893w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075350\/register-app.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075350\/register-app.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075350\/register-app.png 768w\" sizes=\"(max-width: 893px) 100vw, 893px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now after successful registration you can get the credentials which are required for the module configuration.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1208\" height=\"669\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png\" alt=\"firebase-config\" class=\"wp-image-187203\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png 1208w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png 1200w\" sizes=\"(max-width: 1208px) 100vw, 1208px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now, click&nbsp;<strong>CLOUD MESSAGING<\/strong>&nbsp;tab, here you will find your&nbsp;<strong>Project Credentials<\/strong>, copy and save your&nbsp;<strong>Server Key&nbsp;<\/strong>and<strong>&nbsp;Sender ID, Web Push Certificates\/ Public Key&nbsp;<\/strong>as displayed below.<\/p>\n\n\n\n<p>These credentials will be used in the Magento configuration.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1020\" height=\"1265\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18093452\/PWA.png\" alt=\"cloud messaging\" class=\"wp-image-187279\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18093452\/PWA.png 1020w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18093452\/PWA.png 201w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18093452\/PWA.png 242w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18093452\/PWA.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18093452\/PWA.png 826w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configuration-progressive-web-application-for-magento2\">Configuration <\/h3>\n\n\n\n<p>After installation of the module, admin can configure the module settings. <\/p>\n\n\n\n<p>Henceforth, for this, the admin will navigate to&nbsp;<strong>Stores &gt; Configuration &gt; Progressive Web Application&nbsp;<\/strong>as per the below image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1022\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/PWA_adminConfiguration-1022x1024.png\" alt=\"PWA_adminConfiguration\" class=\"wp-image-249206\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/PWA_adminConfiguration-1022x1024.png 1022w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/PWA_adminConfiguration-300x300.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/PWA_adminConfiguration-250x249.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/PWA_adminConfiguration-768x769.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/PWA_adminConfiguration-1533x1536.png 1533w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/PWA_adminConfiguration.png 1738w\" sizes=\"(max-width: 1022px) 100vw, 1022px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Here, the admin can:<\/p>\n\n\n\n<p><strong>Settings<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Status:<\/strong>&nbsp;enable or disable the module.<\/li>\n\n\n\n<li><strong>Application Name:<\/strong>&nbsp;set the application name.<\/li>\n\n\n\n<li><strong>Application Short Name:<\/strong>&nbsp;set the application short name.<\/li>\n\n\n\n<li><strong>Web API Key:<\/strong>&nbsp;The admin can get the Web API key from the firebase in the General tab under the project setting.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1208\" height=\"669\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png\" alt=\"firebase-config\" class=\"wp-image-187203\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png 1208w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18075801\/firebase-config.png 1200w\" sizes=\"(max-width: 1208px) 100vw, 1208px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>FCM<\/strong>&#8211;\n<ul class=\"wp-block-list\">\n<li><strong>Auth Domain:<\/strong>&nbsp;enter the auth domain name here from the firebase web app.<\/li>\n\n\n\n<li><strong>Database URL:&nbsp;<\/strong>enter the FCM database URL here<\/li>\n\n\n\n<li><strong>Project Id:&nbsp;<\/strong>enter the generated FCM Project ID here.<\/li>\n\n\n\n<li><strong>Storage Bucket:&nbsp;<\/strong>enter the FACM storage bucket here.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Messaging Sender Id:<\/strong>&nbsp;enter the sender ID here.<\/li>\n\n\n\n<li><strong>FCM App Id:<\/strong>&nbsp;enter the FCM App ID here.<\/li>\n\n\n\n<li><strong>Server Key:&nbsp;<\/strong>Server key which is generated using the firebase web app and it can be found in cloud messaging under the project setting.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1020\" height=\"532\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18110224\/server-key.png\" alt=\"server-key\" class=\"wp-image-187337\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18110224\/server-key.png 1020w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18110224\/server-key.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18110224\/server-key.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18110224\/server-key.png 768w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Public Key:<\/strong>&nbsp;enter the public key here and it can be find in cloud messaging under the project setting as web push certificates as shown in the image below-<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1006\" height=\"355\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18095859\/web-push-certificates.png\" alt=\"web-push-certificates\" class=\"wp-image-187296\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18095859\/web-push-certificates.png 1006w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18095859\/web-push-certificates.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18095859\/web-push-certificates.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/18095859\/web-push-certificates.png 768w\" sizes=\"(max-width: 1006px) 100vw, 1006px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Application Icon:<\/strong>&nbsp;upload application icon.<\/li>\n\n\n\n<li><strong>Splash Background Color:<\/strong>&nbsp;set the splash background color.<\/li>\n\n\n\n<li><strong>Theme Color:<\/strong>&nbsp;set the theme background color.<\/li>\n<\/ul>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">NFC Settings<\/h3>\n<\/div><\/div>\n\n\n\n<p>Thus, the admin can now enable or disable the NFC setting in the PWA. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"544\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/NFC-settings-1200x544.png\" alt=\"PWA Magento 2 NFC _admin-settings\" class=\"wp-image-249267\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/NFC-settings-1200x544.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/NFC-settings-300x136.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/NFC-settings-250x113.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/NFC-settings-768x348.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/NFC-settings-1536x696.png 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/NFC-settings.png 1717w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Push Notifications<\/h3>\n<\/div><\/div>\n\n\n\n<p>Admin can manage the Push Notifications by going to&nbsp;<strong>PWA &gt; Manage Push Notifications.&nbsp;<\/strong><\/p>\n\n\n\n<p>From here admin can add\/edit or delete any push notification. Admin can also enable or disable any push notification and can \u2018Push\u2019 the notification message by clicking on \u201c<strong>Send<\/strong>\u201c.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1200\" height=\"604\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webpush-notification.png\" alt=\"webpush notification\" class=\"wp-image-197973\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webpush-notification.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webpush-notification.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webpush-notification.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/webpush-notification.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>For adding or editing a Push Notification Message, the admin has to provide the Title, Message Body, Target URL, and the message icon image.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/save-1.png\"><img decoding=\"async\" width=\"1349\" height=\"862\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/save-1.png\" alt=\"PWA Magento 2 NFC_push notification message\" class=\"wp-image-65544\" title=\"Progressive Web Application For Magento2\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/save-1.png 1349w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/save-1-250x160.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/save-1-300x192.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/save-1-768x491.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/11\/save-1-1200x767.png 1200w\" sizes=\"(max-width: 1349px) 100vw, 1349px\" loading=\"lazy\" \/><\/a><\/figure>\n<\/div>\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">How Does  Magento 2 PWA NFC Tap Purchase work?<\/h3>\n<\/div><\/div>\n\n\n\n<p>The  <a rel=\"noreferrer noopener\" href=\"https:\/\/store.webkul.com\/magento2-progressive-web-app.html\" target=\"_blank\">Magento 2 Progressive Web Application (PWA)<\/a> enabled website while browsing will open up as below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"485\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-174122-485x1024.jpg\" alt=\"PWA Magento 2 NFC_tap_tag_introduction\" class=\"wp-image-249263\" style=\"width:289px;height:610px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-174122-485x1024.jpg 485w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-174122-142x300.jpg 142w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-174122-118x249.jpg 118w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-174122-768x1621.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-174122-728x1536.jpg 728w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-174122-970x2048.jpg 970w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-174122.jpg 1080w\" sizes=\"(max-width: 485px) 100vw, 485px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Hence, the POS user or website user will get a pop-up requesting permission to send Push Notification to the customer. <\/p>\n\n\n\n<p>Following this, the user can see the<strong>&nbsp;Add to home screen button (Plus Sign)<\/strong>&nbsp;near to the cart, and on the bottom of the page as shown in the image below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"485\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150442-2-485x1024.jpg\" alt=\"PWA Magento 2 NFC_Add_to_home_screen\" class=\"wp-image-248936\" style=\"width:253px;height:534px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150442-2-485x1024.jpg 485w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150442-2-142x300.jpg 142w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150442-2-118x249.jpg 118w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150442-2-768x1621.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150442-2-728x1536.jpg 728w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150442-2-970x2048.jpg 970w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150442-2.jpg 1080w\" sizes=\"(max-width: 485px) 100vw, 485px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>Hence, the customer can click on the \u201c<strong>Plus Sign<\/strong>\u201d button near to the cart or click on the bottom of the webpage to add the app to the home screen. Now a pop window will appear as shown in the image below \u2013<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"485\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150455-2-485x1024.jpg\" alt=\"PWA Magento 2 NFC_Pop_up_add_to_homescreen\" class=\"wp-image-248949\" style=\"width:259px;height:546px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150455-2-485x1024.jpg 485w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150455-2-142x300.jpg 142w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150455-2-118x249.jpg 118w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150455-2-768x1621.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150455-2-728x1536.jpg 728w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150455-2-970x2048.jpg 970w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150455-2.jpg 1080w\" sizes=\"(max-width: 485px) 100vw, 485px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Add To Homescreen<\/h3>\n<\/div><\/div>\n\n\n\n<p>Henceforth, the PWA is visible on the homescreen of the device which launches with a click.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"485\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150521-1-485x1024.jpg\" alt=\"PWA Magento 2 NFC_PWA_icon\" class=\"wp-image-248956\" style=\"width:253px;height:534px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150521-1-485x1024.jpg 485w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150521-1-142x300.jpg 142w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150521-1-118x249.jpg 118w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150521-1-768x1621.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150521-1-728x1536.jpg 728w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150521-1-970x2048.jpg 970w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150521-1.jpg 1080w\" sizes=\"(max-width: 485px) 100vw, 485px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p>The app opens up to a launch screen which is a Splash Screen. Moreover, splash screen shows the application name and icon. The application launches in the same way as the native app.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"485\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150533-1-485x1024.jpg\" alt=\"PWA Magento 2 NFC_Splashscreen\" class=\"wp-image-248961\" style=\"width:265px;height:560px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150533-1-485x1024.jpg 485w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150533-1-142x300.jpg 142w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150533-1-118x249.jpg 118w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150533-1-768x1621.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150533-1-728x1536.jpg 728w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150533-1-970x2048.jpg 970w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150533-1.jpg 1080w\" sizes=\"(max-width: 485px) 100vw, 485px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Add To Cart<\/h3>\n<\/div><\/div>\n\n\n\n<p>The app opens up with the list of multiple products from which the customer can process the purchase. Hence, using this plugin the user can tap the NFC tag to add products to the cart.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"485\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150655-1-485x1024.jpg\" alt=\"PWA Magento 2 NFC_Add_to_cart\" class=\"wp-image-248980\" style=\"width:301px;height:635px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150655-1-485x1024.jpg 485w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150655-1-142x300.jpg 142w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150655-1-118x249.jpg 118w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150655-1-768x1621.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150655-1-728x1536.jpg 728w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150655-1-970x2048.jpg 970w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150655-1.jpg 1080w\" sizes=\"(max-width: 485px) 100vw, 485px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<p><strong>Note:<\/strong> We need the enable the NFC in their device.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"485\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150713-485x1024.jpg\" alt=\"PWA Magento 2 NFC_device_Settings\" class=\"wp-image-248986\" style=\"width:206px;height:435px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150713-485x1024.jpg 485w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150713-142x300.jpg 142w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150713-118x249.jpg 118w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150713-768x1621.jpg 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150713-728x1536.jpg 728w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150713-970x2048.jpg 970w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_20200514-150713.jpg 1080w\" sizes=\"(max-width: 485px) 100vw, 485px\" loading=\"lazy\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Video<\/h3>\n<\/div><\/div>\n\n\n\n<p>To get more clear idea on the Magento 2 NFC, kindly review the video below-<\/p>\n\n\n\n<div class=\"wp-block-wk-block-youtube-video wk-block--yt-video\"><div class=\"wk-block--yt-video-frame\"><div class=\"wk-block--yt-video-frame-request\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"gJksrwlJavw\"><\/div><\/div><\/div>\n\n\n\n<p>So, that\u2019s all for the&nbsp;<strong>Magento 2 PWA NFC Tap Purchase<\/strong>&nbsp;module, still, have any issue feel free to add a ticket and let us know your views to make the module better&nbsp;<a href=\"http:\/\/webkul.uvdesk.com\/\">http:\/\/webkul.uvdesk.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento 2 PWA NFC tag integration allows store management to be more efficient. With the help of this short-range wireless connectivity service the products are added to cart in a go. Thus, this small yet highly efficient technology can add to a lot of advantages for the customers and store owners. Henceforth, this technology is <a href=\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":166,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2032,9121,8931],"tags":[],"class_list":["post-248807","post","type-post","status-publish","format-standard","hentry","category-e-commerce-2","category-magento-2","category-pwa"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ecommerce NFC integration | Magento 2 PWA Shop and GO<\/title>\n<meta name=\"description\" content=\"Magento 2 PWA NFC integration is a package solution for the e-Commerce store owners and POS users to add the product to the cart with a tap.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ecommerce NFC integration | Magento 2 PWA Shop and GO\" \/>\n<meta property=\"og:description\" content=\"Magento 2 PWA NFC integration is a package solution for the e-Commerce store owners and POS users to add the product to the cart with a tap.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-15T09:02:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-03T10:11:27+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png\" \/>\n<meta name=\"author\" content=\"Zeba Hakim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zeba Hakim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/\"},\"author\":{\"name\":\"Zeba Hakim\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/a5142a66e70018e4f4ddb35b1ed3d318\"},\"headline\":\"Product NFC Tags for Magento 2\",\"datePublished\":\"2020-05-15T09:02:05+00:00\",\"dateModified\":\"2024-01-03T10:11:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/\"},\"wordCount\":1455,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png\",\"articleSection\":[\"E-commerce\",\"Magento 2\",\"PWA\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/\",\"url\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/\",\"name\":\"Ecommerce NFC integration | Magento 2 PWA Shop and GO\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png\",\"datePublished\":\"2020-05-15T09:02:05+00:00\",\"dateModified\":\"2024-01-03T10:11:27+00:00\",\"description\":\"Magento 2 PWA NFC integration is a package solution for the e-Commerce store owners and POS users to add the product to the cart with a tap.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#primaryimage\",\"url\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png\",\"contentUrl\":\"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Product NFC Tags for Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/a5142a66e70018e4f4ddb35b1ed3d318\",\"name\":\"Zeba Hakim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93978c970cf7709418c7bb3ae396d2ffcec717d2dcd44d81c7b9b970b57c31e6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93978c970cf7709418c7bb3ae396d2ffcec717d2dcd44d81c7b9b970b57c31e6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Zeba Hakim\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/zebahakim-magento157\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ecommerce NFC integration | Magento 2 PWA Shop and GO","description":"Magento 2 PWA NFC integration is a package solution for the e-Commerce store owners and POS users to add the product to the cart with a tap.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/","og_locale":"en_US","og_type":"article","og_title":"Ecommerce NFC integration | Magento 2 PWA Shop and GO","og_description":"Magento 2 PWA NFC integration is a package solution for the e-Commerce store owners and POS users to add the product to the cart with a tap.","og_url":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2020-05-15T09:02:05+00:00","article_modified_time":"2024-01-03T10:11:27+00:00","og_image":[{"url":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png","type":"","width":"","height":""}],"author":"Zeba Hakim","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Zeba Hakim","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/"},"author":{"name":"Zeba Hakim","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/a5142a66e70018e4f4ddb35b1ed3d318"},"headline":"Product NFC Tags for Magento 2","datePublished":"2020-05-15T09:02:05+00:00","dateModified":"2024-01-03T10:11:27+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/"},"wordCount":1455,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#primaryimage"},"thumbnailUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png","articleSection":["E-commerce","Magento 2","PWA"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/","url":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/","name":"Ecommerce NFC integration | Magento 2 PWA Shop and GO","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#primaryimage"},"thumbnailUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png","datePublished":"2020-05-15T09:02:05+00:00","dateModified":"2024-01-03T10:11:27+00:00","description":"Magento 2 PWA NFC integration is a package solution for the e-Commerce store owners and POS users to add the product to the cart with a tap.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#primaryimage","url":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png","contentUrl":"http:\/\/webkul.com\/blog\/wp-content\/uploads\/2016\/11\/Magento2-Blog-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/ecommerce-nfc-integration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Product NFC Tags for Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/a5142a66e70018e4f4ddb35b1ed3d318","name":"Zeba Hakim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/93978c970cf7709418c7bb3ae396d2ffcec717d2dcd44d81c7b9b970b57c31e6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93978c970cf7709418c7bb3ae396d2ffcec717d2dcd44d81c7b9b970b57c31e6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Zeba Hakim"},"url":"https:\/\/webkul.com\/blog\/author\/zebahakim-magento157\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/248807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/166"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=248807"}],"version-history":[{"count":40,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/248807\/revisions"}],"predecessor-version":[{"id":416404,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/248807\/revisions\/416404"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=248807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=248807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=248807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}