Unizen Widget

Integrating the Unizen Widget into Your WebApp

To integrate the Unizen widget into your web application using an iframe, follow these steps. This guide will walk you through the process of embedding the widget and customizing its parameters.

Important Notice: Please notify us to whitelist your site before integrating our widget.

Step-by-Step Guide

  1. Set Up Parameters:

    You can customize the widget by changing the values in the params object. Here’s a brief explanation of each parameter:

    • uuid: Your uuid

    • apiKeyId: Your API key ID

    • themeName: The theme of the widget (dark or light).

    • inputCurrency: The input currency address, for native currency, use Zero Address.

    • outputCurrency: The output currency address, for native currency, use Zero Address.

    • inputChainId: The chain ID of the input currency.

    • outputChainId: The chain ID of the output currency.

    • tokenFromAmount: The amount of the input currency, if you want to trade exact in. For example, if you want to trade 1.1 ETH => tokenFromAmount = '1.1'. NOTE: if exact out trade, leave it empty.

    • tokenToAmount: The amount of the output currency, if you want to trade exact out. NOTE: if exact in trade, leave it empty.

    • primaryTextColorLight: Primary text color in light mode.

    • primaryTextColorDark: Primary text color in dark mode.

    • secondaryTextColor: Secondary text color.

    • containerColorLight: container background color in light mode.

    • containerColorDark: container background color in dark mode.

    • cardColorLight: Card background color in light mode.

    • cardColorDark: Card background color in dark mode.

    • modalColorLight: Modal background color in light mode.

    • modalColorDark: Modal background color in dark mode.

    Example params for trade from 1000 USDT to ETH on Ethereum:

    const params = {
        uuid: 'your uuid',
        apiKeyId: 'your apiKeyId',
        themeName: 'dark',
        inputCurrency: '0xdac17f958d2ee523a2206206994597c13d831ec7',
        outputCurrency: '0x0000000000000000000000000000000000000000',
        inputChainId: '1',
        outputChainId: '1',
        tokenFromAmount: '1000',
        tokenToAmount: '1',
        primaryTextColorLight: 'red',
        primaryTextColorDark: 'blue',
        secondaryTextColor: 'blue',
        containerColorLight: 'yellow',
        containerColorDark: 'yellow',
        cardColorLight: 'green',
        cardColorDark: 'green',
        modalColorLight: 'green',
        modalColorDark: 'green'
      };
  2. Generate Widget URL: Construct the URL for the widget by appending the parameters to the base URL. const WIDGET_URL = `https://zcx.com/widget?${new URLSearchParams(params)}`;

  3. Embed the Widget in an iframe:

      <iframe
            src={WIDGET_URL}
            title='Unizen Exchange Widget'
            className={clsx(
              'w-[600px]',
              'h-[600px]',
              'border-2'
            )}>
          </iframe>

Last updated