Manifold Studio

Using Widgets with Squarespace

While using Gallery widgets does require some coding knowledge, we've provided this tutorial for users who want to create a page with Gallery Auctions and are fine to use basic styling. The following tutorial will show you how to create a gallery page of listings with Card Widgets, as well as a single listing page.

For more advanced customizations, please check out our developer docs.

Contents

  1. Getting Started

  2. Create an App

  3. Enable Squarespace page to use Marketplace Widgets

  4. Adding the Connect Widget

  5. Adding a Gallery Card Widget

  6. Adding a Gallery Listing Widget

Getting Started

Before creating your website - The tokens will need to be minted and listed on the Gallery app. A reminder to keep your ListingIDs handy!

Create an App

Before starting with the widgets you will need to create an App in the Manifold Developer tools here: developer.manifoldxyz.dev

Creating an App allows the Manifold widgets to “work” as a developer tool, as Manifold needs to be able to allow end users to read from and write to the blockchain.

Set up or log into your account, click Create App, and follow the instructions. You’ll need the App name and Client ID for the widget.

  • App Name: This can be any string of text that you want to name your app.

  • Description: Similarly, this can be any string of text.

  • Redirect URI: Put the URL that you are going to use for your website (this is used for app creation purposes)

  • Grant Type: Token Grant -Different grant types allow different functionalities; e.g. just connecting, versus signing a message, versus checking ownership of an asset. For this use case, all we need is to connect the wallet, so we can use Token Grant.

Enable Squarespace page to use Marketplace Widgets

On the page that you would like to post listings, you’ll need to add the following code to the page settings. This allows for the website to pull in the marketplace widgets. 

<script async src="https://connect.manifoldxyz.dev/3.1.2/connect.umd.min.js"></script>
<link rel="stylesheet" href="https://connect.manifoldxyz.dev/3.1.2/connect.css" />
<script async src="https://marketplace.manifoldxyz.dev/3.5.9/marketplace.umd.min.js"></script>
<link rel="stylesheet" href="https://marketplace.manifoldxyz.dev/3.5.9/marketplace.css" />

Adding a Marketplace Card Widget

The following will allow you to create a gallery page of listings similar to this:

Notice two different elements here:

  1. The Connect Widget

  2. The individual card listings

To add code snippets, click "+ ADD BLOCK" and select </> Code

The following elements below will need to be matched with your own corresponding values:

CLIENTID - This is a unique identifier for our backend to know which your app is. App Names are non-unique, so we use the ClientID so our servers can identify unique uses of the widget. This will appear once the App is created.

APPNAME - This is the name you’ve given the app when creating the app in the app portal

NETWORK - This will indicate the network your listings are on, in this case 1 for ETH, 10 for OP

LISTINGID - You’ll find this in the Gallery App beside your listing

1. Adding the Connect Widget

This code snippet will need to be placed once on the Main Page, and once on every unique listing page. This allows the user to connect their wallet and interact with the listings.

The data-network indicates which network your token was minted on

  • ETH {1}

  • OP {10}

  • Base {8453}

<div  
    data-widget="m-connect"
    data-client-id="{CLIENT ID}"  
    data-app-name="{APP NAME}"  
    data-network="{NETWORK}"
 ></div>
<style>
  #m-connection {
  --manifold-border--radius: 10px; // border radius (curve) of the button
  --manifold-text--font-size--body: 16px; // font size of button text
  --manifold-element--color--background: blue; // color of connect button
  --manifold-text--font-family--body: 'Times New Roman'; // font of button text
  }
</style>

2. Code Snippet for Marketplace Widget Cards

For each of the marketplace listings, you'll need to drop in the following code snippet. Add a </> Code Block and then paste the following. You'll need to match the LISTINGID/NETWORK here.

Colors looking ugly? No problem we've used these colors to make it easier for you to edit. Simply change the values in the code snippet and the changes will reflect immediately.

<div
  data-widget="m-card-catalog"
  data-id="{LISTING ID}"
  data-network="{NETWORK}"
  style="height:500px"
  class="manifold-scheme-dark"
></div>
<style>
  .manifold.m-marketplace {
    --manifold-theme--color--primary: yellow; // color of bid button
    --manifold-page--color--background: green; // background color of listing info section
    --manifold-text--color--body: blue; // primary color of listing info section
    --manifold-text--color--muted: red; // secondary color of listing info section
    --manifold-text--font-family--body: 'Futura'; // font of listing info section
  }
</style>

As it stands, all “cards” on this page will have the same styles - CSS works by applying styles across a whole page. In order to specify unique styles for different cards, you’ll need to add a class to the

block for a given card (e.g. class=”this-card”). Then, wrap the entire styles css inside of the class (e.g. .this-card { [all current CSS] } ). This will apply the styles to only that card.

Creating a Full Page Listing

This will help you create a full page listing similar to our Gallery Listing pages.

Similar to the Card Widget above, to create a full page listing, click + ADD BLOCK and then </> Code to paste the following information. Please note in order to retrieve your auction, it will require the:

  • CLIENT ID

  • APP NAME

  • NETWORK

  • LISTING ID

<div  
    data-widget="m-connect"
    data-client-id="{CLIENT ID}"  
    data-app-name="{APP NAME}"  
    data-network="{NETWORK}"
></div>
<div   
  data-widget="m-layout-complete-listing"
  data-id="{LISTING ID}"
  data-network="{NETWORK}"
  class="manifold-scheme-dark">
</div>
<style>
  .manifold.m-marketplace {
    --manifold-theme--color--primary: yellow; // color of bid button
    --manifold-page--color--background: green; // background color of listing info section
    --manifold-text--color--body: blue; // primary text color of listing info section
    --manifold-text--color--muted: red; // secondary text color of listing info section
    --manifold-text--color--disabled: purple; // color for disables actions on listing info section
    --manifold-text--font-family--body: 'Futura'; // font for text on listing info section
  }
</style>

Last updated