Code Integration

First, create a <div> tag where you want to locate the widget: 

<div id="widget"></div>

To initialize the widget add this to the script tag at the bottom of the<body> tag:

<script>
  const configuration = {
    paletteOverrides: {
      paper: "#1A1F23",
      secondary: "#2B363B",
      "text-primary": "#fff",
      "text-secondary": "#C5C9C9",
      primary: "#38D9C0",
      "text-primaryButton": "#fff",
      paperSecondaryBackground: "undefined",
    },
    widgetType: "nft",
  };

  const script = document.createElement("script");
  script.src =
    "https://bofdevstorage.blob.core.windows.net/blobcontainer/crypto_trading_widget_sdk/index.js";
  document.head.appendChild(script);
  script.onload = () => {
    window.CryptoTradingWidget.initNftWidget("widget", configuration);
  };
</script>

If you'd like to place an 'Open order' button to trigger the widget you can add an 'onClick' event:

Finally, place the following script in the <body> with and replace the orderHash with your copied listing ID:

This is the full code :)

PreviousNFT ListingNextFAQ

Last updated