Embed the 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.

Unizen Playground URL: https://www.unizen.io/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: Trade params

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

   Theme params

   • primaryTextColorLight: Primary text color in light mode.

   • primaryTextColorDark: Primary text color in dark mode.

   • secondaryTextColor: Secondary text color.

   • interactiveColorLight: Interactive color in light mode.

   • interactiveColorDark: Interactive color in dark mode.

   • accentColorLight: Accent color in light mode.

   • accentColorDark: Accent color in dark mode.

   • containerCardColorLight: Container card color in light mode.

   • containerCardColorDark: Container card color in dark mode.

   • dialogColorLight: Dialog background color in light mode.

   • dialogColorDark: Dialog background color in dark mode.

   • cardRadius: Border radius for cards.

   • buttonRadius: Border radius for buttons.

   • tokenLogoShadowSize: The size of the shadow applied to token logos, for example: '0 0 0 0'

   • font: The font used in the widget. It should match one of the available font classes. This is available font list: 'fira-code', 'baloo', 'poppins', 'lato', 'nunito', 'raleway', 'montserrat', 'oswald', 'playfair', 'barlow', 'rubik', 'cormorant', 'noto', 'alegreya', 'inter'

   

   Other params

   • networkSelector: Represents the UI option for selecting a network, usually a dropdown or selector. (string: 'true' or 'false')

   • categorySelector: Represents the UI option for selecting a category currency: (string: 'true' or 'false')

   • networks: A comma-separated list of supported networks. For example: 137,56

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

   const params = {
       uuid: 'your uuid',
       apiKeyId: 'your apiKeyId',
       themeName: 'dark',
       inputCurrency: '0xdac17f958d2ee523a2206206994597c13d831ec7', // USDT address
       outputCurrency: '0x0000000000000000000000000000000000000000', // ETH address (native currency)
       inputChainId: '1', // Ethereum mainnet chain ID
       outputChainId: '1', // Ethereum mainnet chain ID
       tokenFromAmount: '1000', // Exact in amount of 1000 USDT
       tokenToAmount: '', // Leave empty for exact in trade
       primaryTextColorLight: 'red',
       primaryTextColorDark: 'blue',
       secondaryTextColor: 'blue',
       interactiveColorLight: 'orange',
       interactiveColorDark: 'purple',
       accentColorLight: 'pink',
       accentColorDark: 'cyan',
       containerCardColorLight: 'yellow',
       containerCardColorDark: 'yellow',
       dialogColorLight: 'green',
       dialogColorDark: 'green',
       cardRadius: '10px',
       buttonRadius: '5px'
     };

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>