# Getting Started

### Things to keep in Mind

The syntax for working with Collectibles is relatively similar to that of working with smart contracts. We need to create an *instance* and *elements* which are connected via a `uniqueId` to link them both together.&#x20;

### Feature Collectibles vs Feature Custom Contract

Collectibles are managed by smart contracts deployed on the blockchain. This means you *could* access them directly using DappHero's Smart Contract Feature. For some uses cases it might be preferable to access the smart contracts directly, however for common uses Collectible smart contracts (most commonly ERC721 contracts) it will be easier to use the Collectible feature as we have simplified some of the more common use cases.&#x20;

The advantage of using the Collectibles feature is that DappHero simplifies the process of interacting with the JSON objects which are used to store the [metadata](https://docs.opensea.io/docs/metadata-standards) which represent individual collectible tokens in a standard way. Following these standards are important if you want your collectible token to be interoperable with public marketplaces.&#x20;

## General Concepts

### Unique ID

When you create an *instance* of a collectible object, you will be able to place the collectibles *elements* anywhere on your webpage. To link the correct instance with the correct elements, we have introduced a special tag,  `data-dh-property-method-id`, which has a custom unique value that you determine, and which should be used for all elements related to the same functionality.&#x20;

```markup
// This element creates our collectable instance
<div ...
data-dh-feature="nft"
data-dh-property-tag-id="myUniqueTag" 
....
/>

// This element is where we are going to be displaying a collectable item
<div ...
data-dh-property-tag-id="myUniqueTag" 
data-dh-property-asset-item="true"
...
/>

```

In the above example, all the elements for a `Collectable` integration are marked with the same unique tag id, `myUniqueTag` in this way, the DappHero Engine knows all these different elements, regardless of where they are on the page, belong together in the same functionality.&#x20;

### TokenId

In the ERC721 standard, each token is given a TokenId that represents it as a unique item. This TokenId is needed to identify the specific collectible.&#x20;

### Contract Address

As collectibles are governed by smart contracts, such as the [CryptoKitties](https://etherscan.io/address/0x06012c8cf97bead5deae237070f9587f8e7a266d#code) Contract or [BlockCities](https://etherscan.io/address/0x2f2d5aa0efdb9ca3c9bb789693d06bebea88792f#code) Contract, they each have a unique Ethereum Address. This address is what differentiates tokenId# 100 on CryptoKitties from tokenId# 100 for BlockCities. A good way to mentally think about this is; *TokenId# 100 for Contract Address: 0x0.....*

### JSON Path

When calling an ERC721 Collectible contract for a specific token, most standard tokens will return a *tokenURI.* This *tokenURI* generally is a link which points to a place on the internet that stores metadata *about the token* generally this is a JSON object with properties which describe what the token represents, such as a CryptoKitty name or a CryptoKitty picture.&#x20;

To access this metadata,  we use a special DappHero Tag: `data-dh-property-asset-json-path` followed by the item we are looking for such as `image_url` or `name`. This element will be defined on the JSON object returned by the metadata.&#x20;

```markup
//psuedo code

//Displaying a token's Image
<img data-dh-property-asset-json-path="image_url" />

//Getting a token name as H3 text                  
<h3 data-dh-property-asset-json-path="name"></h3>
```

Unfortunately while there are some [standards](https://docs.opensea.io/docs/metadata-standards) for how MetaData should be structured, they are not 100% standard. If connecting to a contract with non-standard meta-data you will need to contact the contract creators to understand the format returned by the collectible contract.

### Collectable Data Source and Networks

DappHero uses the [OpenSea API](https://opensea.io/) as a data source for Collectables, currently it does not pull the data directly from the blockchain network. This means that currently the `Collectable` feature only supports the Ethereum Mainnet.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dapphero.io/features/what-are-nfts/notes-about-collectables.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
