# Swap and Sale Integration

Place this script tag on the `<body>` of your page:

```html
<script src="https://unpkg.com/@bitoftrade/crypto-trading-widget-sdk/build/index.js"
type="text/javascript"></script>
```

[Create a `<div>` tag where you want to locate the widget:](#user-content-fn-1)[^1]

<pre class="language-html"><code class="lang-html"><strong>&#x3C;div id="widget">&#x3C;/div>
</strong></code></pre>

Add this to the \<script> tag at the bottom of the \<body> tag:

<pre class="language-html"><code class="lang-html">&#x3C;script>
  const <a data-footnote-ref href="#user-content-fn-2">configuration</a> = {
    palletOverrides: { 
      "primary": "#38D9C0",
      "secondary": "#2B363B",
      "paper": "#1A1F23",
      "text-primary": "#fff",
      "text-secondary": "#C5C9C9",
      "text-primaryButton": "#fff",
      "text-secondaryButton": "#C5C9C9",
      "secondaryButton": "#255558",
      "success": "#38D9C0",
      "error": "#FF6666",
      "warning": "#FF7A2A",
    },
    chainOptions: { 
      '<a data-footnote-ref href="#user-content-fn-3">0x1</a>': {
        enabled: true,
        defaultTokenAddress: "<a data-footnote-ref href="#user-content-fn-4">0x111111111117dc0aa78b770fa6a738034120c302</a>",
      },
      '0x89': {
        enabled: true,
        defaultTokenAddress: "0x5ceebb0947d58fabde2fc026ffe4b33ccfe1ba8b",
      },
      '0xfa': {
        enabled: true,
        defaultTokenAddress: "0x6a07a792ab2965c72a5b8088d3a069a7ac3a993b",
      },
      '0x38': {
        enabled: true,
        defaultTokenAddress: "0x3ee2200efb3400fabb9aacf31297cbdd1d435d47",
      },
      '0xa86a': {
        enabled: true,
        defaultTokenAddress: "0x60781c2586d68229fde47564546784ab3faca982",
      },
    },
    widgetType: "swap",
  };
<a data-footnote-ref href="#user-content-fn-5">  CryptoTradingWidget.tradingWidget('widget', configuration); </a>
&#x3C;/script>
</code></pre>

Here is the full code :smile:

```html
<!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>
<script src="https://unpkg.com/@bitoftrade/crypto-trading-widget-sdk/build/index.js"
type="text/javascript"></script>
<div id="widget"></div>
<script>
  const configuration = {
    paletteOverrides: { 
      "primary": "#38D9C0",
      "secondary": "#2B363B",
      "paper": "#1A1F23",
      "text-primary": "#fff",
      "text-secondary": "#C5C9C9",
      "text-primaryButton": "#fff",
      "text-secondaryButton": "#C5C9C9",
      "secondaryButton": "#255558",
      "success": "#38D9C0",
      "error": "#FF6666",
      "warning": "#FF7A2A",
    },
    chainOptions: { 
      '0x1': {
        enabled: true,
        defaultTokenAddress: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
      },
      '0x89': {
        enabled: true,
        defaultTokenAddress: "0x2791bca1f2de4661ed88a30c99a7a9449aa84174",
      },
      '0xfa': {
        enabled: true,
        defaultTokenAddress: "0x04068da6c83afcfa0e13ba15a6696662335d5b75",
      },
      '0x38': {
        enabled: true,
        defaultTokenAddress: "0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d",
      },
      '0xa86a': {
        enabled: true,
        defaultTokenAddress: "0xb97ef9ef8734c71904d8002f8b6bc66dd9c48a6e",
      },
    },
    widgetType: "swap",
  };
  CryptoTradingWidget.tradingWidget('widget', configuration); 
</script>
</body>
</html>
```

[^1]: is this div actually necessary tech-wise? The widget will be displayed as an overlay anyway, right? Why we don't inject it into the body transparently/automatically?&#x20;

[^2]: default customization without showing here if not necessary

[^3]: chnage to decimals / name

[^4]: is it necessary to add defaultTokenAddress?&#x20;

[^5]: it doesn't explain how I make the widget appear upon clicking on some button. This instruction rather explains how do I display the widget upon page render
