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.

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" />

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

Notice two different elements here:

The Connect Widget
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

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>

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>