Data Attributes

These are the other data-* attributes that can be passed to an HTML element with a data-widget prop.

Attributes marked as “required” need to be provided, otherwise the widget will error.

Basic / Web3

data-widget (required)

Specifies what kind of widget to render. See the list of accepted values in the later pages.

data-id (required)

Specifies the ID of the listing, returned by the marketplace sdk/web interface.

data-network

The network id of the blockchain the listing is on.

• "1": Ethereum mainnet

• "5": Goerli testnet (deprecated)

• "10": Optimism

• "8453": Base

• "11155111": Sepolia

Defaults to "1" (mainnet).

data-version

The version of the marketplace sdk to target. One of “1” or “2”. Defaults to “2”.

data-address

Automatically determined based on the network id and the provided version.

Specifies the contract address that owns the token for the purpose of the listing. Unless you have a custom marketplace contract, you should not need to use this attribute.

data-fallback-provider

Specifies the websocket/http address to a fallback ETH node. Used when initiating the EthereumProvider for the widgets. We fallback to the specified address when the widget is loaded:

1. On a browser with no wallet (incognito browsing mode for example).

2. On Mac's Safari.

3. On a mobile device for all cases except when navigating with a built-in browser within the MetaMask app.

Set this value to wss://mainnet.infura.io/ws/v3/YOURAPIKEY (for mainnet) or wss://goerli.infura.io/ws/v3/YOURAPIKEY to ensure that the listing details can read from an accurate link without depending on an external Ethereum provider's network.

data-referral-address

The wallet address / ENS of a referrer. For a successful referral for a listing that supports this feature, the referrer gets a portion of the listing's sale price.

Make sure to include this data-prop in all widgets for a same listing on the same page.

data-widget-key

[Updated name] In versions < 3.0.0: data-key.

A string identifier given to the widget. If this data attribute exists on the HTML element and is a non-empty string, the element will emit a m-marketplace_widget_injected event when it has been replaced in the DOM tree.

data-view-link-platform

Supported in CDN version: >= 3.3.0.

Specifies to which platform a listing will link out. Accepts one of the following string values:

• "blur": links to the token's Blur page (only available for Ethereum Mainnet);

• "looksrare": links to the token's LooksRare page;

• "opensea": links to the token's OpenSea page;

• "rarible": links to the token's Rarirble page.

Minting

Data attributes that relate to the minting process.

data-max-per-purchase

Sets the maximum amount a user can mint/purchase in one transaction. Expects a number value.

Make sure to include this data-prop in all widgets for a same listing on the same page.

data-merkle-tree-campaign-id

The id of a campaign against which purchases will check the merkle tree.

Make sure to include this data-prop in all widgets for a same listing on the same page.

data-allow-list-file

A URL to a CSV file used when the listing type is a fixed or variable price purchase. Limits the number of mints per address. If a wallet address is not on the list, it will not be able to mint/purchase the listing.

The first line of the CSV should be the ownerAddress,value header.

The contents should be n lines of 0xAllowListedAddress,0 ... 0xAllowListedAddress,n-1 for every allow listed address, where n is the number of tokens an address can mint.

Make sure to include this data-prop in all widgets for a same listing on the same page.

data-allow-list-file-no-values

A URL to a CSV file used when the listing type is a fixed or variable price purchase. Limits who can mint, without limiting the amount an address can mint. If a wallet address is not on the list, it will not be able to mint/purchase the listing.

The first line of the CSV should be the ownerAddress header.

Make sure to include this data-prop in all widgets for a same listing on the same page.

data-emits-identity-verify

Supported in CDN version: >= 2.4.0.

Useful for deferring the identity verification process to an external party. If this data attribute is "true" (string value of true) on the HTML element and the listing in question has an identity verifier address, the element will emit a m-marketplace_tx_id_verify event with the relevant transaction information to defer the identity verification process.

This also means that the listing represented by this widget will defer the identity verification process and wait for a m-marketplace_tx_id_complete event with the appropriate data to resume the transaction.

Display

Data attributes that change how a listing is displayed visually.

data-no-media

Used by Layout and Card widgets (will not affect listing widgets). Hides the media element of the token if set to "true".

data-no-countdown

Used by Layout widgets (will not affect listing widgets). Hides the countdown (if there is one) if set to "true".

data-no-inventory

Used by Layout widgets (will not affect listing widgets). Hides the inventory/minted counter for the listing if set to "true".

data-media-background

Used by Layout widgets to specify the backdrop for the token media. Is a JSON string of the following format:

interface MediaBackgroundConfig {
  /** angle in degrees representing from which direction the gradient (linear/conic) flows */
  angle?: number;
  /** string array of colors for the media background */
  colors?: string[];
  /** URI to the background image. takes precedence over the background color/gradient */
  image?: string;
  /** if two or more color values are provided, specifies the type of background */
  type?: 'linear' | 'conic' | 'radial';
}

The colour can be represented using any acceptable CSS colour value.

It is suggested to provide a backup colour value in the case that the image does not load.

Example

• To display an image as a background for the token media:

<div
  data-widget="m-layout-complete-listing"
  data-id="LISTING_ID"
  data-network="NETWORK"
  data-media-background='{"image":"<image uri here>", "colors":["<backup color>"]}'
></div>

• To display a flat colour as the background for the token media:

<div
  data-widget="m-layout-complete-listing"
  data-id="LISTING_ID"
  data-network="NETWORK"
  data-media-background='{"colors":["<flat color>"]}'
></div>

• To display a gradient as a background for the token media:

<div
  data-widget="m-layout-complete-listing"
  data-id="LISTING_ID"
  data-network="NETWORK"
  data-media-background='{"colors":["<first color>","<second color>", "<third color>"],"type":"<gradient type>","angle":<numeric angle value if type is linear/conic>}'
></div>

This property is also available directly for m-listing-image-expandable. For versions < 3.0.0, see the widget for more details.

Widget messaging

Data attributes to override text used in widgets.

data-bidding-starts-at-override

Sets the label text next to a listing's reserve price when the listing has no bids yet.

Default: "Bidding Starts At".

Make sure to include this data-prop in all widgets for a same listing on the same page.

data-current-bid-text-override

Sets the label text next to a listing's current bid price when the listing has at least one bid.

Default: "Current Bid".

Make sure to include this data-prop in all widgets for a same listing on the same page.

data-identity-verifier-message-override

Supported in CDN version: >= 2.4.0.

Sets the message displayed for a failed identity verification.

Default message: "You are not an approved buyer for this listing".

Make sure to include this data-prop in all widgets for a same listing on the same page.

data-minimum-bid-text-override

Sets the label text next to a listing's minimum bid price in bid forms.

Default: "MIN.".

Make sure to include this data-prop in all widgets for a same listing on the same page.

data-winning-bid-text-override

Sets the label text next to a listing's final price when the listing has closed.

Default: "Winning Bid".

Make sure to include this data-prop in all widgets for a same listing on the same page.

data-fixed-price-buy-button-override

Supported in CDN version: >= 3.4.0.

Sets the message displayed for the buy button of a fixed price listing.

Default message: "Buy <price of token> <currency> per token" (if a user is only buying 1 token) or "Buy <price of token x number of tokens to buy> <currency>".

Make sure to include this data-prop in all widgets for a same listing on the same page.