# marketTutorial

By [laeght](https://paragraph.com/@laeght) · 2024-01-02

---

_for Manifold Gallery listings in html_

*   all `html`, `js`, and `css` below are already in the template `index.html` file
    
*   all styling is located in `<style>` inside `<head>`
    
*   all styling in `<style>` will be overwritten by `styles.css`
    

Part 1: CONNECT WIDGET
----------------------

_allows users to connect their wallet_

js     `https://connect.manifoldxyz.dev/latest/connect.umd.min.js`

css     `https://connect.manifoldxyz.dev/latest/connect.css`

**WIDGET EXAMPLE:**

    <div
      data-widget="m-connect"
      data-auto-reconnect="false"
      data-fallback-provider="wss://YOUR_WEBSOCKET_PROVIDER”
      data-client-id="CLIENT_ID”
      data-app-name=“YOUR_APP_NAME”
      data-multi="true"
      data-network=“1”
      data-wallet-connect-project-id="WALLETCONNECT_PROJECT_ID”
    ></div>
    

*   located inside `<div class=“collection”>` on line ~563
    

### STEP 1: GET FALLBACK PROVIDER

link     [https://www.alchemy.com/](https://www.alchemy.com/)

for     `data-fallback-provider="wss://YOUR_WEBSOCKET_PROVIDER”`

**1a. create new app**

**1b. click “API KEY”**

**1c. copy “WEBSOCKET”**

**1d. replace wss://YOUR\_WEBSOCKET\_PROVIDER**

### STEP 2: GET WALLET CONNECT PROJECT ID

link     [https://cloud.walletconnect.com/sign-in](https://cloud.walletconnect.com/sign-in)

for     `data-wallet-connect-project-id="WALLETCONNECT_PROJECT_ID”`

**2a. create a new app**

**2b. copy “PROJECT ID”**

**2c. replace WALLETCONNECT\_PROJECT\_ID in** `index.html`

### STEP 3: GET MANIFOLD “CLIENT ID”

link     [https://developer.manifoldxyz.dev/](https://developer.manifoldxyz.dev/)

for     `data-client-id="CLIENT_ID”`

`data-app-name=“YOUR_APP_NAME”`

**3a. create new app**

*   App Name: This name is customer facing and will be used for authentication messaging
    
*   App Description: This is a description only visible to you on the developer dashboard
    
*   Redirect URI: Put your domain url
    
*   Grant Type: Choose Signature Grant
    

**3b. copy client id**

**3c. replace CLIENT\_ID in** `index.html`

*   stay on page for step 4
    

### STEP 4: GET MANIFOLD “APP NAME”

**4a. copy app name**

**4b. replace YOUR\_APP\_NAME in** `index.html`

PART 2: MARKETPLACE WIDGETS
---------------------------

_retrieve NFT information / integration_

js     `marketplace.manifoldxyz.dev/latest/marketplace.umd.min.js`

css     `https://marketplace.manifoldxyz.dev/latest/marketplace.css`

**WIDGET EXAMPLE(S):**

*   retrieve artwork title
    

    <div
      data-widget="m-listing-name"
      data-id=“LISTING_ID”
      data-network="1"
    ></div>
    

*   retrieve place bid / buy section
    

    <div
      data-widget="m-listing-bid-form"
      data-id=“LISTING_ID”
      data-network="1"
    ></div>
    

*   retrieve artwork description
    

    <div
      data-widget="m-listing-description"
      data-id=“LISTING_ID”
      data-network="1"
    ></div>
    

*   retrieve artwork metadata (attributes)
    

    <div
      data-widget="m-listing-attributes"
      data-id=“LISTING_ID”
      data-network="1"
    ></div>
    

*   located inside each `<div class="nft-wrapper">` on lines ~596, ~650, & ~704
    

### STEP 5: GET “LISTING ID”

link     [https://studio.manifold.xyz](https://studio.manifold.xyz)

for     `data-id="LISTING_ID"`

**5a. mint NFT on manifold studio**

**5b. create manifold GALLERY LISTING**

**5c. copy “LISTING ID” from manifold studio gallery listing final page**

*   (or copy numbers from the end of the claim pages URL ex. [https://gallery.manifold.xyz/listing?listingId=0000](https://gallery.manifold.xyz/listing?listingId=0000))
    

**5d. replace LISTING\_ID in** `index.html`

PART 3: EXTRAS
--------------

_more things_

### STEP 6: EDIT SUBSCRIBE BUTTON

link     [https://app.ens.domains](https://app.ens.domains)

for      `data-creator-address=“YOURNAME.eth”`

_allows users to subscribe to YOURNAME.eth_

js     `https://subscribe.manifoldxyz.dev/0.2.0/widget.umd.min.js`

css     `https://subscribe.manifoldxyz.dev/0.2.0/widget.css`

**WIDGET EXAMPLE:**

    <div
    
      data-widget="m-widget-subscribe"
    
      data-creator-address=“YOURNAME.eth”
    
    ></div>
    

*   located inside `<div class=“collection”>` on line ~579
    

**6a. replace EDIT.eth with your ens name**

### STEP 7: ADDING URLS / LINKS

scroll to the `<script>` at the bottom of the `index.html` file

edit the links in each pre-prepared `function` or copy the `function` to make your own

**FUNCTION EXAMPLE:**

    function nftOne() {
      window.open("https://etherscan.io/token/...", "_blank");
    }
    

*   located inside the `<script>` on line ~794
    

**7a. go to your NFTs manifold gallery listing page**

*   copy url `https://gallery.manifold.xyz/listing?listingId=...` for “nftOne”
    

**7b. click “view original media”**

*   copy url `https://arweave.net/...` for “imgOne”
    

**7c. click “view on etherscan”**

*   copy url `https://etherscan.io/token/...` for “claimOne”
    

**7d. get the following URLs are for each contract**

*   **contract address**     `https://etherscan.io/address/...`
    
*   **wallet address**     `https://etherscan.io/address/...`
    

**7e. get the following URLs are for social media**

*   **twitter**     `https://twitter.com/...`
    
*   **instagram**     `https://www.instagram.com/...`
    
*   **FND**     `https://foundation.app/`
    
*   **OBJKT**     `https://objkt.com/profile/...`
    
*   **OPENSEA**     `https://opensea.io/...`
    
*   **ZEROONE**     `https://zeroone.art/profile/...`
    
*   **ZORA**     `https://zora.co/...`
    

### **FUNCTIONS:**

if functions are added or changed make sure you update `onclick="nftNumber()"` in both the `<script>` at the bottom of the `index.html` file and in the `<button>` that uses it so they match

**EXAMPLE:**

    <div class="details-block">
      <button onclick="imgNumber()">original media</button>
      <button onclick="nftNumber()">token id: EDIT</button>
      <h3 onclick="claimNumber()">view on Manifold</h3>
    </div>
    
    <script>
      function nftNumber() {
        window.open("https://etherscan.io/token/....", "_blank");
      }
      function imgNumber() {
        window.open("https://arweave.net/....", "_blank");
      }
      function claimNumber() {
        window.open("https://gallery.manifold.xyz/....", "_blank");
      }
    </script>
    

FINAL CHECKLIST:
----------------

_a few things to update in the_ `index.html` _file before you publish_

*   look for `EDIT` anywhere in the file and update as needed
    

### **TITLE:**

update site title `<title>EDIT</title>`

### **TOKEN ID:**

update the `<button>token id: EDIT</button>` for each nft

### **COPYRIGHT:**

update the copyright `<h3>2023 © EDIT. all rights reserved.</h3>`

### **RIGHT-CLICK:**

enable or disable right-click

**ENABLED:**

    <script>
      document.addEventListener('contextmenu', event => {
      event.preventDefault();
      });
    </script>
    

**DISABLED:**

    <!--
    <script>
      document.addEventListener('contextmenu', event => {
      event.preventDefault();
      });
    </script>
    -->
    

*   or just delete the `<script>`
    

D**EMO**
--------

all `html`, `js`, and `css` have been separated for ease of use in codepen

[https://codepen.io/laeght/pen/zYbrKbG](https://codepen.io/laeght/pen/zYbrKbG)

**DOWNLOAD**
------------

contains index.html, styles.css, satoshi.css (with fonts), & placeholder.png

[https://www.dropbox.com/scl/fo/kljltimh2mi93cmdaagqj/h?rlkey=bpm3n0ow59dhp5ti7lhfhkk2h&dl=0](https://www.dropbox.com/scl/fo/kljltimh2mi93cmdaagqj/h?rlkey=bpm3n0ow59dhp5ti7lhfhkk2h&dl=0)

*   **ver. 0.1.3**
    

made possible using [yungwknd.eth](https://twitter.com/yungwknd)’s Manifold Forum responses

and [rodrigobardin.eth](https://twitter.com/rbardin)’s documentation + demo

    https://forum.manifold.xyz/c/developers/
    
    https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/connect-widget/advanced-configuration
    
    https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/marketplace-widgets
    

    https://twitter.com/rbardin/status/1722708445692850548
    
    https://rodrigobardin.xyz/art/drop-page/drop-download/
    

_thank you for reading._

---

*Originally published on [laeght](https://paragraph.com/@laeght/markettutorial)*
