bitoftrade docs
  • 👋Welcome to the bitoftrade docs!
  • 🤖bitoftrade intro
  • 📨Contact Us
  • For traders
    • ✅Cross-Chain Swaps
      • How it works
        • Liquidity providers & validators
        • Security
      • User Guide
    • 🔄Trading platform
      • Features
        • Leverage trading
        • Token swaps
        • Buy crypto with fiat
        • Market screener
      • Quick start
        • How do I swap tokens on bitoftrade?
        • How to buy crypto with fiat?
        • How to trade with leverage on bitoftrade?
        • How to use the Markets page?
        • How to place limit order?
      • Fees
      • FAQ
  • For businesses
    • 🛒AllPay Widget
      • Use cases
        • Token Owners
        • Personal Exchange
        • Creators
        • GameFi, Metaverse
        • Crypto Payments (soon)
      • Quick start
        • Customization Panel
        • Swap and Sale Integration
        • NFT Widget Integration
          • NFT Listing
          • Code Integration
      • FAQ
  • For developers
    • 🔀Cross-Chain Messaging Protocol
      • How it works
        • Signer Service
          • Event Hash
          • Signer interface
        • Signers Registry Contract
      • Quick start
        • Emit event
        • Verify event
        • Receive event
      • Smart contracts
      • Advanced
        • Threshold Signature
        • Hosted TSS signer
      • Security
      • FAQ
  • Guides
    • 📚General
      • How to download and connect MetaMask for desktop?
      • How do I download and connect MetaMask for mobile?
      • How do I import ERC20 tokens to MetaMask?
      • How do I manage my funds in a volatile market?
      • How to invest in cryptocurrency
    • ⛓️Polygon
      • How to swap on the Polygon network
      • How to bridge my Polygon tokens
      • How to add Polygon to my MetaMask
    • ⛓️Binance Smart Chain
      • How to bridge my BSC tokens
      • How to swap on the BSC network
      • How to add BSC to my MetaMask
    • ⛓️Fantom
      • How to bridge my Fantom tokens
      • How to swap on the Fantom network
      • How to add Fantom to my MetaMask
    • ⛓️Avalanche
      • How to bridge my Avalanche tokens
      • How to swap on the Avalanche network
      • How to add Avalanche to my MetaMask
Powered by GitBook
On this page
  1. For businesses
  2. AllPay Widget
  3. Quick start
  4. NFT Widget Integration

Code Integration

First, c

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

Last updated 2 years ago

🛒