Showing your NFT collection on your projects website should be a given thing to do IMO. Your website is often the first thing users find, and showcasing your NFTs is important. However, manually adding them all and handling that might be a lot of overhead that you don't always have time to do. Therefor, it make sense to dynamically load them directly from the chain and show your latest created templates, so any user can explore.

The goal with this article is to give you an idea of how you can add your templates to your website, may that be in wordpress, squarespace or some custom built solution. 

Perhaps you are building it yourself, someone in your team, a friend or some consultant. They might not be aware of how WAX works, and you might not know how to find all this information. So let's try to break down the basics and show a working example of how to list your latest 6 templates. The code can easily be customized, taken as is, or used for inspiration of how to build a more complete solution. You probably don't want to load graphics for more than 20 templates within one page, or the load time will be very slow, specially if it's video graphics. So you likely want to change page (pagination) to show more, or load more in sections. 

The Basics of how to fetch the data

The WAX Blockchain has a bunch of different types of APIs, and for you that are new to developments, an API is a service that you can ask for data. So if you need any info from the blockchain, either for yourself or your application. The API is like the support person you call with your questions. 

For a current list of available and up to date WAX APIs, you can check the EOS Nation Validator - https://validate.eosnation.io/wax/reports/endpoints.html

Chain API - Native API to get the current state of accounts or contracts. Also for pushing transactions. (api_https)
Account API - Most (all?) Chain APIs has this enabled, which allows for detailed account information queries. (account_https)
Hyperion API - History solution, to get the past. Often paired with Chain API to handle all your requests. (hyperion_https)
Atomic API - Customized for NFT based information, many also offer the atomic market endpoint to get market data. (atomic_https)

You also have a few other APIs, but I won't complicate this further for now. To fetch your NFT collection, we will be using the Atomic API. You can find an Atomic API documentation page from the api endpoint + /docs.

The Atomic API Endpoint

We will be using "/atomicassets/v1/templates?collection_name=anyo.b1&page=1&limit=20&order=desc&sort=created"
Which will return a json with the latest 6 templates created in the "anyo.b1" NFT collection. You can find all options for that endpoint here: https://wax-atomic-api.eosphere.io/docs/#/templates/get_atomicassets_v1_templates

For the example, we will have one default endpoint, but allow a user to change which one is currently used. Which allows us to have a working page, even if the API endpoint fails.

You can find the code for this example here: https://github.com/coachbjork/anyo-academy/blob/main/wax-modules/collection_templates.html

Summary

Adding your WAX NFT collection to your website is super simple. For many it's not more difficult than just copy pasting the above code into your site, changing the collection to yours, and it will work. If you don't want that button and option to change collection, you can just remove that from the code. 

You can use the same code, with a small adjustment to fetch a users inventory of NFTs, instead of the latest templates. Something I can show in a future post. 

If you enjoy these style of articles, with real showcase of how easy it is to add integration with web3 for your web2 application, let me know through Twitter or Telegram.