Embeddable Configuration
Gallery ¶
Introduction
The Monegraph auction gallery allows you to display your auctions in grid format.
Configuration
| Parameter | Path | Description |
|---|---|---|
| Width | width | Controls the width of the embeddable, input is a css valid width |
| Height | height | Controls the height of the embeddable, input is a css valid height |
| Background Color | config.theme.backgroundColor | Controls the background color of the embeddable, input is a css valid color |
| Primary Color | config.theme.primaryColor | Controls the primary color of elements in the embeddable, input is a css valid color |
| Secondary Color | config.theme.secondaryColor | Controls the secondary color of elements in the embeddable, input is a css valid color |
| Custom Stylesheet | config.theme.stylesheet | The provided stylesheet will be injected into the embeddable, allowing full control for customization. |
| Filter type | config.gallery.filters.type | Filter the auctions in the gallery by "artist" or "collection" |
| Filter Include | config.gallery.filters.include | Specify the artist/collection ids that you would like to include in the gallery |
| Filter Exclude | config.gallery.filters.exclude | Specify the artist/collection ids that you would like to exclude in the gallery |
| Side Navigation Visibility | config.gallery.filters.hidden | If true the side navigation for the filters will not be visible |
| Side Navigation Title | config.gallery.filters.title | Provide a custom side navigation title |
| Grouping | config.gallery.groupBy | The gallery can be grouped by either "artist" or "collection" |
| Custom Ordering | config.gallery.orderBy | When grouping is enabled, you can specify the order in which they should be grouped by, using the auction ids |
Example
{
url: 'https://app.monegraph.com/gallery/6',
width: "100%",
height: "100%",
config: {
theme: {
global: {
backgroundColor: "#f0f2f5",
primaryColor: "#95107f",
secondaryColor: "#000000",
},
stylesheet: "https://www.example.com/style.css"
},
gallery: {
filters: {
"type": "artist",
"include": ["0x123..."],
"exclude": ["0x345..."],
"hidden": true,
"title": ""
},
groupBy: "collection",
orderBy: ["0x123...","0x345..."]
}
},
}Style Customization
-
.auction-card-title
-
.auction-card-seller-username
-
.auction-card-bottom-row
-
.auction-card-bottom-row-title
-
.auction-card-bottom-row-price
-
.auction-card-bottom-row-button
Auctions ¶
Introduction
The Monegraph auction embeddable allows you to embed individual auction detail pages.
Configuration
| Parameter | Path | Description |
|---|---|---|
| Width | width | Controls the width of the embeddable, input is a css valid width |
| Height | height | Controls the height of the embeddable, input is a css valid height |
| Background Color | config.theme.backgroundColor | Controls the background color of the embeddable, input is a css valid color |
| Primary Color | config.theme.primaryColor | Controls the primary color of elements in the embeddable, input is a css valid color |
| Secondary Color | config.theme.secondaryColor | Controls the secondary color of elements in the embeddable, input is a css valid color |
| Custom Stylesheet | config.theme.stylesheet | The provided stylesheet will be injected into the embeddable, allowing full control for customization. |
| Hide Seller Information | config.auction.hideSeller | Hide the seller information on the bottom of the auction details page |
Events
| Name | Description | Usage |
|---|---|---|
| connectWallet | Iframe emits event when an auction is viewed with a connected wallet |
|
| signMessage | Parent requests the iframe sign a message |
|
| signedMessage | Parent receives the signed message |
|
Example
{
url: 'https://app.monegraph.com/auctions/0x123...',
width: "100%",
height: "100%",
config: {
theme: {
global: {
backgroundColor: "#7085a4",
primaryColor: "#b455a4",
secondaryColor: "#672222",
},
stylesheet: "https://www.example.com/style.css"
},
auction: {
hideSeller: true
}
},
}Style Customization
-
.auction-button-container
-
.auction-button-inner
-
.auction-button-price-label
-
.auction-button-price
-
.auction-button-price-usd
-
.auction-date-ending-divider
-
.action-button-message
-
.buy-button
-
.user-button
-
.auction-date-ending
-
.auction-date-ending-label
-
.auction-date-ending-days
-
.auction-date-ending-hours
-
.auction-date-ending-minutes
-
.auction-buy-button-container
-
.auction-details-title
-
.auction-detalis-artist
-
.auction-detalis-artist-name
-
.auction-detalis-description-label
-
.auction-detalis-description
-
.auction-detalis-edition-label
-
.auction-detalis-edition
-
.auction-detalis-total
-
.auction-detalis-avatar
-
.auction-detalis-seller
-
.auction-detalis-history
-
.auction-detalis-history-container
-
.bid-row
-
.bid-row-avatar
-
.bid-row-container
-
.bid-row-title
-
.bid-row-username
-
.bid-row-date
