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:

<button id="orderButton">Open order</button>

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

<script>
  const button = document.getElementById("orderButton");
  const openOrder = () => {
    const orderHash =
      "0xa35d92dad8c08d24b46ab0a8204768d4a5acbeb4dee21a04fd2616c7d0a5dfac";
    const chainId = 137;
    window.CryptoTradingWidget.openOrder(orderHash, chainId);
  };

  button.onclick = openOrder;
</script>

This is the full code :)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Widget Demo</title>
  </head>
  <body>
    <div id="widget"></div>

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

    <button id="orderButton">Open order</button>
 
    <script>
      const button = document.getElementById("orderButton");
      const openOrder = () => {
        const orderHash =
          "0xa35d92dad8c08d24b46ab0a8204768d4a5acbeb4dee21a04fd2616c7d0a5dfac";
        const chainId = 137;
        window.CryptoTradingWidget.openOrder(orderHash, chainId);
      };

      button.onclick = openOrder;
    </script>
  </body>
</html>

PreviousNFT Listing NextFAQ

Last updated 2 years ago