NFT, Redirect & CodeLink

Overview

By combining ixkio's Redirect Response Mode with NFT data and CodeLink, users can easily secure the link between the physical tag scan and the display of the NFT.

CodeLink requires a single line of javascript code to be placed onto your website. We will shortly be publishing short tutorials on how to do this on Shopify, etc. The CodeLink code then secures the link between ixkio and your website and also provides the ability to delivery the NFT metadata.

With an additional few lines of simple javascript code, you can display the NFT name, description, image and so on directly on the page.

Note that you cannot mint NFT through ixkio. Many of our customers use crossmint, opensea or similar to do this and then upload the data into ixkio.

Example Configuration

As with all ixkio configurations, there's a lot of different options and settings available. Here we will give the basics to get you started. To start, you will need to have set up at least one Tag Code, Batch, Tag Group and Active Folder and be using the Redirect Response Mode. You also need to have your NFT data ready - Contract, Token, Blockchain (Etherium or Polygon) and Owner.

For this example, we will go through every step - adding the NFT data, creating the CodeLink code, enabling the NFT information and example of how you might use the code.

The Tag Group needs to be of Tag Type 'Authentication' but you don't need actually use authentication tags (or any tags at all) to test. Just don't use any Authentication Rules.

Step 1 : Enable NFT Status

Make sure that NFT is enabled at the Tag Group level. Navigate to your Tag Group and then Group Detail Panel > Settings Tab. Make sure 'NFT Status' is set to 'NFC Enabled'.

Step 2 : Add NFT Data

Navigate to your Tag Code then Tag Data Panel > NFT Tab. Add your NFT Contract, Blockchain and Token data. You can also add Owner data if you have it available.

Step 3 : Create CodeLink Code

The CodeLink Code will be the javascript code that you need to place on your landing page. The code will prevent a direct hit on the page but will also supply the NFT data that you can use on the page.

On the main menu, select Control > CodeLink. Click on 'Add CodeLink Code'. There's a full set of instructions on CodeLink but we are going to set just the basics here.

Leave Fail URL blank, set Default Display HTML to Include, enter 'Authentication Check<br>In Progress..' in the Authentication Text box, change Authentication Text Pause to 1 second and leave 'Do not add' on Error Codes. Click Create.

You now need to add the CodeLink Code to your page. We will assume here that you are creating a website from basics rather than using a builder (we will add Shopify, Wordpress, Wix, etc examples shortly).

Add the following javascript code to your page :

<script defer src="https://t.ixkio.com/s/traceback.js?code=<yourcode>"></script>

Replacing the <yourcode> with the six character CodeLink Code that was generated.

Step 4 : Set CodeLink Settings

Navigate back to your Tag Group and then Tag Group Function Panel > CodeLink Tab. There's two settings here - CodeLink Protection and NFT Data. We are going to enable both but for general testing you might want to temporarily disable CodeLink Protection. Set both to 'Enabled' and then click Update.

Step 5 : Add a Redirect

Staying on the Tag Group level, go to Tag Group Function Panel > Ruleset Tab. We aren't going to add any Rules here for the moment but if you are going live with authentication tags, you need to enable Authentication Rules.

For the moment, we will just add a link through to your website landing page where you added the javascript CodeLink Code. Enter the full URL in the 'Rule Set Default URL' box and Save Changes.

Step 6 : Test

There's a number of ways of testing the links and clearly you could encode the link directly onto an NFC tag and start scanning. If you are using authentication, then you must do this or it will always fail authentication. However, in this example, we haven't set up authentication rules so can just test directly.

Instead of encoding a tag, we will just simulate this from the URL. Go to the Tag Code level and Tag Detail Panel > Info Tab. Click on the little down arrow next to the XUID to get the URL for this tag.

Now open a new incognito tag in your browser and paste into here. The tag should redirect directly through to your landing page. (You may want to set the screen to mobile on your browser developer tools and you may also want to bookmark the Tag Code link so you can easily click to test).

Test 1 : Check the link

First step as described above is to test that the link to your site is working. If you paste the Tag Code link into the browser and it's not showing your page, either the URL is wrong or there's a step missed.

At this stage, you should see a message saying Authentication in progress for 1 second before seeing your page.

Test 2 : CodeLink test

Enter the Tag Code link in the browser as before and wait 10 seconds. Now refresh the page (don't add the Tag Code, just refresh). You should see an authentication fail message. This is because the 'hit' on the page didn't arrive from the ixkio link - by refreshing the page, you effectively entered the destination page.

Step 7 : NFT Data

At this stage, the CodeLink should be functioning and sending data to your page. As you enabled NFT data to be sent on CodeLink (Step 4), ixkio will also be checking the NFT data you have entered for the Tag Code on the blockchain and sending the metadata.

To use the NFT data sent back, you need to have some knowledge of both javascript and html. As much as we always like to help, we cannot provide specific advice on setting up your website or page beyond telling you how the data is sent.

This is how to access it.

When the CodeLink code finishes the checking routines, it will call a function 'codelinkConf' and pass a javascript object containing information about the CodeLink setup and the NFT metadata. For example, the object might contain (shortened as example) :

{
	"status": "key_pass",
	"nftTokenID": "0x2",
	"nftContractID": "0x1a54BBA36F03Ba568719103bfE6DA991b4e75bD0",
	"nftBlockchain": "Polygon",
	"nftOwner": "0x05acd5069605ae437c3aeb7749a23f7c06a02ecc",
	"nftData": {
		"contract": {
			"address": "0x1a54bba36f03ba568719103bfe6da991b4e75bd0"
		},
		"id": {
			"tokenId": "0x2",
			"tokenMetadata": {
				"tokenType": "ERC721"
			}
		},
		"title": "Ixkio NFT Robot",
		"description": "The Ixkio NFT Demonstration Robot",
		"media": [{
			"gateway": "https://authnfc.com/exampleimg.jpg",
			"format": "jpeg",
			"bytes": 55000
		}]
	},
	"qserror": "",
	"error": ""
}

The "status" indicates that the CodeLink Key passed. The "nft.." information is as added to your Tag Code. The "nftData" is the NFT metadata taken from the blockchain.

You can create this javascript codelinkConf function and then handle the object as you need to populate and create your page.

Step 8 : Using this Data

To use the NFT data sent back, you need to have some knowledge of both javascript and html.

As much as we always like to help, we cannot provide specific advice on setting up your website or page beyond telling you how the data is sent.

We will add some example code here shortly.