Using CodeLink with Wix
It's recommended that you have Wix open on your Desktop as you follow this guide
Last updated
It's recommended that you have Wix open on your Desktop as you follow this guide
Last updated
Copyright TabDesk Ltd 2024
If you are using Wix with standard NFC tags (such as NTAG213 or iCODE SLIX) then the process is similar to authentication NFC tags. You can still :
Dynamically pass and display data from ixkio to Wix
Protect the page so that it can only be viewed from ixkio
CodeLink can help protect the page from views that haven't come from ixkio. This can be useful to prevent a view of the landing page if someone hasn't scanned your NFC tag. However, the page protection wouldn't stop someone sharing the link from the NFC tag itself. If you need full tag > page protection then you need to use authentication NFC tags.
First step is to set up CodeLink on Wix and ixkio.
Navigate to Main Menu > Control > CodeLink.
Click 'Create New CodeLink Code'.
For this example, we will just use CodeLink to transfer data from ixkio to Wix. So, give the CodeLink a name (just used internally for your reference), change 'Default Display HTML' to 'Do Not Include' and leave everything else. Then click Add.
The next step is to add CodeLink to your Wix Page. For this example, let's create a product landing page called 'product-page'. To start with, just add some simple text, perhaps like this:
Now navigate to the Setting page on your Wix dashboard and scroll down to custom code, in the advanced section.
From here click the 'Add Custom Code' button, and paste your JavaScript code from codelink into the space at the top. Choose a name e.g. Codelink, select the option marked 'Choose Specific Pages' and chose the page(s) you want to enable Codelink on. This will then add the CodeLink code specifically to that page. Note that CodeLink is only added to the pages you specify. Don't add CodeLink to your whole website - just the landing page from the tag scan. Select 'Head' as the codes location and keep Code Type as 'Essential'.
Now we need to redirect our tags through to this page. In our example, our landing page is 'https://demo-ixkio-codelink.wix.com/pages/product-page'.
Within ixkio, we have created a Wix Folder, a Wix Tag Group, Batch and a Tag Code. Navigate to the Tag Group level and add the destination URL into the Rule Set Default URL and Save Changes:
This will redirect all scans on all tags within this Tag Group to this page.
CodeLink can be enabled and disabled for each Tag Group. In this same Tag Group, we want to enable CodeLink so navigate to Tag Group Function Panel > CodeLink Tab
Change Status to Enabled, Data Link to Core & Extended and leave NFT Data as off (if you are on Alpha plan).
The Data Link part is allowing Tag Code Core data (Tag Name, UID, CUID) and Extended Data (that you create) to be dynamically passed through to your Wix landing page.
At this stage, we recommend testing the link. Dynamic data will not yet be displayed on your Wix page but it's worth testing the link now. Navigate down to your Tag Code level (or create a Batch and Tag Code now under this Tag Group if you haven't already).
You can copy the link from the NFC Encoding URL and paste this directly into a Browser. This should automatically redirect through to your Wix Product Page.
In the example below, we've got a Tag Code URL of 'https://t.ixkio.com/kerf5dda'.
Testing links in this way only works for Standard NFC tags not Authentication NFC tags. Auth tags generated a unique link on each scan and while you can test the link, you won't be testing authentication.
To test auth tags, you can use the 'virtual tag' generator to create the unique links for testing in this way.
Now we need to add dynamic data to your landing page. This will enable data stored in ixkio to be dynamically displayed on your Wix Product Page.
In this simple example, we will use a 'CUID' (Customer Unique ID). Add an ID into your Tag Code for testing. We've used 'ID123457' :
Within Wix, open your product page for editing. Add some additional text to indicate the Product ID, perhaps something like :
Now we need to edit the HTML code for this page to allow the dynamic entry of the data. Click on the <> button on the Content menu and add the code :
So the result looks like this :
And save.
What you are doing here is telling Wix to add the 'CUID' from ixkio between the 'span'. This can be formatted however you like and you can also dynamically add links, images and more. For the moment, we'll just do simple text.
Now copy the Tag Code URL again into a browser and check that the data is being passed through correctly. If it's all working, then you should see :
Where the 'ID123457' is now being dynamically taken from the Tag Code and placed into the page.
And you are done !
CodeLink is a powerful system and all Tag Code related data can be dynamically transferred via Core and Extended data fields (including Digital Product Passport Data, Scan Counts, Assignment Dates, System Data, Action Data, etc, etc).
