QR Codes on NFT Drops

How do QR codes work with Wrapdapp NFT drops?

When creating a NFT drop for a song, select the "Generative" campaign type. Next, when creating a component for the campaign, select "QR Code" for the "Type" of drop. You will be presented with multiple options:

Redirect URL: This is where you would like to redirect users to after they've scanned the QR code.
Width: How wide the QR code should appear (in pixels) on the final NFT image. Remember that NFT images are 900x900 pixels, and each cell is 300x300, meaning you should rarely go above 300 pixels.
Link Type: Secure links require that the person scanning the QR prove ownership via their crypto wallet, such as Metamask. This is ideal for tickets, special offers, rewards, etc.. Public links can be scanned by anyone without proving ownership over the NFT.
Background Color: The color on which the QR code pattern will be placed. Note: selecting "Transparent" can cause issues with some backgrounds, so we recommend using a solid color most of the time.
Foreground Color: The color which will make up the QR Code pattern itself.

What is the difference between a "Secure" and an "Public" link for a QR code?

Public Link

When the QR code is scanned, we will not confirm that the user scanning the QR code owns the NFT on which it was scanned. The user will be redirected straight to the Redirect URL assigned to the QR code. This should only be used for public websites that anyone can visit, such as promotional pages and marketing pages.

Secure Link

Unlike a Public link, a secure link requires an additional two steps. First, when the user scans the QR code, they will be prompted to prove ownership over the NFT via a signing request from their wallet.

Once confirmed, WrapDapp's API will log the click and issue a confirmation code associated with the signed click. You can then use that confirmation code to ensure that the user scanning the QR code is the appropriate user.

Please see the next question for more details on how this flow works.

How do secure QR codes work and how can I ensure that the correct user scanned the code?

For this example, we will assume that your redirect url is https://yoursite.com/myInternalValidationScript.php, meaning that the user will be redirected here upon a successful QR code scanning.

User Scans the Secure QR Code

When the secure QR code is scanned by a user, that user will be prompted to prove that they own the NFT. They do this by signing a request using their crypto wallet.

Validating Ownership of the NFT

Once ownership has been confirmed, WrapDapp will redirect the user to the "Redirect URL", however it will add two additional query string components which you can use with the GET/qr/{nftId}/{confirmationCode}/confirm API endpoint to confirm that the scan is valid. These query string components are:

_wdcc: The confirmation code proving that the person who scanned the QR code owns the NFT. This replaces {confirmationCode} in the above URL. For this example, we will assume the confirmation code is ABC123.
_wcnid: The NFT ID. This is used in the above URL to replace {nftId}. For this example we will assume the NFT's ID is xxx-yyy-ccc.

In the above scenario, the user will be redirected to: https://yoursite.com/myInternalValidationScript.php?_wdcc=ABC123&_wcnid=xxx-yyy-ccc

Validating the Confirmation Code

Now, from your myInternalValidationScript.php page, you can make one more a request to WrapDapp's APIs at GET/qr/xxx-yyy-ccc/ABC123/confirm. If confirmed, the WrapDapp API will return the campaign information and a list of all components on the scanned NFT.

Please see the next question and the API documentation for more information.

How do I add QR codes to my generated NFTs?

When creating a component for your campaign, simply select "QR Code" for "Type" and follow the onscreen prompts. QR codes work the same as any generated component and will be rendered directly on your final NFT image, so make sure that you place them on the highest layer!

Can I have different QR codes with different links on generated NFTs?

Yes, a single component can have multiple QR code options. One common use case is the idea of using NFTs as a "sweepstakes": by creating multiple QR code components and having them render in the same quadrant on the NFT image, WrapDapp's servers will randomly select one of the options based on their rarity. This allows you to mix simple "public" links with "secure" links which can hold prizes, rewards, and more.

Can I connect my QR code to my internal systems?

Absolutely! Once a QR code has been scanned, we redirect the user to the "Redirect URL" your specified when setting up the QR Code component for the NFT. This means that you can link the user directly to a page on your website which does internal business logic against the request.

Please see "How do secure QR codes work and how can I ensure that the correct user scanned the code?" for more information on how you can ensure that QR code scans are safe and reliable, especially if you are offering something of value.

One common use case involves adding a "Secure" QR code link, which after validation returns a list of components on the user's NFT, which allows you to offer prizes/rewards based on the components that were rendered on the user's final NFT.

Does WrapDapp give me a way of determining which components were on an NFT that got QR code-scanned?

Yes! When you confirm a secure link click, WrapDapp's APIs will return all of the campaign's information, as well as an array of all components that were rendered onto the user's scanned NFT.

Please see API documentation under "QR Codes" for more information.