Skip to content

Customization

The White-label Marketplace allows several levels of customization to adapt to different client's needs. Customization is managed by simply tuning a JSON file. Listed below are all the fields that can be customized.

Note

Not all fields need to be set. Clients can set explicit values only for the fields required to overwrite the default values.

Base Customization

{
  "icon": "favicon.ico",
    "title": "Your Application Title",
    "logo": "https://your_server.com/your_logo.svg",
    "nav": { // top navigation menu
      "background_color": null,
      "font_color": null,
      "font_hover_color": null, // mouse over the font
      "font_active_color": null,
      "hide_metaverse": false, // nav menu option
      "hide_market": false, // nav menu option
      "hide_drops": false, // nav menu option
      "hide_my_assets": false, // nav menu option
      "hide_collections": false, // nav menu collections
      "custom_pages": [{ // list with extra tabs showing html provided
         "title": "Extra Tab Title",
         "url": "https://your_server.com/to-be-shown-in-tab.html"
       }],
    },
    "body": {
      "font_color": null,
      "font_family": null, // "https://your_server.com/font_name.woff2",
      "headings_font_color": null,
      "headings_font_family": null, // "https://your_server.com/font_name.woff2",
      "muted_font_color": null, // used to display faded text, usually in grey
    },
    "card": { // square or rectangle container that contains each asset
      "background_color": null,
      "font_color": null,
      "headings_font_color": null,
      "font_muted_color": null, // used to display faded text, usually in grey
    },
    "settings": { // square or rectangle CARD container that contains each of the settings elements (web3addresses, cryptocurrencies, ...)
      "background_color": null,
      "font_color": null,
      "headings_font_color": null,
      "font_muted_color": null, // used to display faded text, usually in grey
    },
    "button": { // application bootstrap buttons
      "primary": {
        "font_color": null,
        "background_color": null,
        "border_color": null,
      },
      "secondary": {
        "font_color": null,
        "background_color": null,
        "border_color": null,
      },
      "success": {
        "font_color": null,
        "background_color": null,
        "border_color": null,
      },
      "danger": {
        "font_color": null,
        "background_color": null,
        "border_color": null,
      },
      "warning": {
        "font_color": null,
        "background_color": null,
        "border_color": null,
      },
      "info": {
        "font_color": null,
        "background_color": null,
        "border_color": null,
      },
    },
    "homepage": {
      "image": "https://your_server.com/bnr1.png", // if no "iframe" field is set, it shows this image...
      "image_link": "https://your_server.com", // ...which redirects here on click.
      "iframe": { // if "iframe" is set, it displays it instead of an image (the image field/link will be ignored), see more info below
        "url": null,
        "keys": null,
        "publicKey": null, // "43c...6b", // Public key used to encrypt the "keys" parameters.
      },
    },
    "footer": {
      "company_name": "Your Company",
      "copyright": "© 2022 Your Company",
      "links": [
        {
          "title": "About Your Company",
          "url": "https://www.your_server.com/en/about",
        },
        {
          "title": "Docs",
          "url": "https://docs.your_server.com/",
        },
        {
          "title": "Contact",
          "url": "https://www.your_server.com/en/contact",
        },
      ],
      "social": [
        {
          "site": "twitter",
          "url": "https://twitter.com/your_twitter",
        },
        {
          "site": "linkedin",
          "url": "https://www.linkedin.com/company/your_linkedin/",
        },
        {
          "site": "medium",
          "url": "https://medium.com/your_medium",
        },
      ],
    },
  }

Using an IFrame

If the attribute iframe.url is not null, the values of image and image_link are disregarded, and the iframe is shown instead. The keys attribute can be left empty [], or specify both or one of the following keywords: "email", "freeverseId". If specified, the parameters will be dynamically hashed, encrypted and added to the iframe URL when a user is logged. The encryption is done with the recipient's public key specified in publicKey. Check this example for further reference. Here's an example of iframe customization:

{
"homepage": {
      "image": "./img/bnr1.png",
      "image_link": "https://www.your_server.com/",
      "iframe": { // display an iframe instead of an image:
        "url": "https://your_server.com",
        "height": "500px", //optional
        "width": "100%", //optional
        "keys":  ["email", "freeverseId"], // both are optional: ["email", "freeverseId"] are parameters dynamically encrypted and added to the iframe URL when a user is logged...,
        "publicKey":  "43c...6b", // Public key used to cipher the "keys" parameters.
      },
    },
}

Adding Custom Tabs

To configure custom pages that will be shown as tabs in the menu, just set the items in custom_pages. Here's and example:

{

"custom_pages": [
        {
          "title": "Custom Page 1",
          "url": "https://link-to-your-iframe.com",
        },
        {
          "title": "Custom Page 2",
          "url": "https://link-to-your-iframe.com",
          "height": "900px", // optional, it sets the height of the iframe to a fixed height 
        },
        {
          "title": "Custom Page 3",
          "url": "https://link-to-your-iframe.com",
          "scroll": "yes" // optional, if scroll is set to yes, the Iframe will have the height of the page and have a internal scroll
        },
      ]
}