Widget

Empower Your Users to Buy & Sell Crypto Directly From Your Platform

Orion Widget is an application that can be added to any web page or dApp that allows people to place swaps using Orion's CEX and DEX liquidity by simply connecting their own wallet. Rather than having projects build out trading features or use up resources with SDKs, Orion Widget is the quickest and easiest way to provide token accessibility to any ecosystem. It is a simple UI integration allowing developers and platform hosts to implement the widget with hardly any coding needed.

---

Customizations

The widget is easily customizable according to your needs using the following parameters.

Parameter	Description
defaultTheme	Allows to specify the default color style of the widget. Light and dark themes available. For example, defaultTheme=dark.
assetFrom	Allows to specify an asset that will be available for sale by default. For example, assetFrom=ORN.
assetTo	Allows to specify an asset that will be available for purchase by default. For example, assetTo=USDT.
allowedAssets	Allows to specify a list of assets available for selection. For example, allowedAssets=USDT,BNB,ORN,ETH.
amount	Allows to specify the amount of the asset available for sale by default. For example, amount=10.
feeAsset	Allows to specify the default fee asset. Available assets for commission: ORN, BNB, USDT. For example, feeAsset=ORN.

Token Listing

If your project token isn’t one of the hundreds listed on Orion, we may use your token liquidity from any one of our 11 liquidity sources to be sure your token is supported.

Widget Integration

Fill out the application found at orion.xyz to receive a Partner ID by email along with the instructions below. Be sure to store the email and your number for your records. Here are the simple steps to add the Orion widget to your platform.

Initialization

We have several integration options for the widget: using a script (recommended) or an iframe.

Integration via script (recommended)

Copy and paste this code into your web-page's head.

<script src="https://trade.orionprotocol.io/widget/integration-iframe.js"></script>

Use your Partner ID and paste this code to your web-page where you'd like the widget to be placed.

<div id="orion-widget"></div>
<script>
  initOrionWidgetInIframe({ partnerId: '132' ... });
</script>

The full widget parameters object and widget customizations.

{
    partnerId: string,  // your partnerId, see above (required)
    containerSelector: string,  // widget container css-selector on your page (optional, default '#orion-widget')
    iframeClass: string,  // iframe will be created with this class inside widget container (optional, default none)
    height: number | string,  // iframe height (optional, default 389)
    width: number | string,  // iframe width (optional, default 314)
    options: {  // widget configurable options (optional, default none)
    defaultTheme: 'light' | 'dark',  // widget initial theme (optional, default 'light')
    assetFrom: string,  // spending asset name (optional, default 'ORN')
    assetTo: string,  // receiving asset name (optional, default 'USDT')
    allowedAssets: string,  // asset names separated by comma which will be available for swap (optional, example 'ORN,USDT,BNB', by default all Orion assets)
    feeAsset: string,  // default fee asset (optional, accepts 'ORN' | 'BNB' | 'USDT', default 'ORN')
    priceDeviation: number, // price deviation (optional, default 1, max 10)
}

Example #1: single widget instance integrated using the script method on a page

<script>
    initOrionWidgetInIframe({
        partnerId: '1',
        containerSelector: '#orion-widget',
        iframeClass: 'w-full',
        height: 389,
        width: 314,
        options: {
            defaultTheme: 'dark',
            assetFrom: 'USDT',
            assetTo: 'ORN',
            allowedAssets: 'ORN, USDT',
            feeAsset: 'ORN',
            priceDeviation: 2,
            },
        });
</script>

Example #2: multiple widget instances integrated using the script method on a page

<script>
    initOrionWidgetInIframe({
        partnerId: '1',
        containerSelector: '.orion-widget-mobile',
        width: '100%',
        });

    initOrionWidgetInIframe({
        partnerId: '1',
        containerSelector: '.orion-widget-desktop',
        });
</script>

Integration via iframe

Use your Partner ID and insert an iframe in any section of your app.

<body>
       ...
       <div>
            <iframe>
                   id="orion-widget"
                   title="orion-widget"
                   height="389px"
                   width="314px"
                   scrolling="no"
                   allow="clipboard-write"
                   partner-id="132"
                   loading="lazy"
                   src="https://trade.orionprotocol.io/widget?partnerId=132&..."
            </iframe>
       </div>
       ...
</body>

You can easily customize the widget according to your needs using the following options:

defaultTheme: 'light' | 'dark'  // widget initial theme (optional, default 'light')
assetFrom: string  // spending asset name (optional, default 'ORN')
assetTo: string  // receiving asset name (optional, default 'USDT')
allowedAssets: string  // asset names separated by comma which will be available for swap (optional, example 'ORN,USDT,BNB', by default all Orion assets)
feeAsset: string  // default fee asset (optional, accepts 'ORN' | 'BNB' | 'USDT', default 'ORN')
priceDeviation: number // price deviation (optional, default 1, max 10)

The value of the src attribute of an iframe can look like this:

src="https://trade.orionprotocol.io/widget?partnerId=132&defaultTheme=dark&assetFrom=usdt&assetTo=orn&allowedAssets=orn,bnb,eth,ftm,matic&amount=100&feeAsset=orn&priceDeviation=2"

Example: a single widget instance integrated using the iframe method on a page

<iframe
      id="orion-widget",
      title="orion-widget",
      height="389px",
      width="314px",
      scrolling="no",
      allow="clipboard-write",
      partner-id="132",
      loading="lazy",
      src="https://trade.orionprotocol.io/widget?partnerId=132&defaultTheme=dark">,
</iframe>