Plasma.Finance - DeFi & NFT Metaverse
  • 👋Welcome to Plasma.Finance - DeFi & NFT Metaverse
  • 🚀What is Plasma Finance dApp?
  • 💡Plasma Team Vision
  • 👨‍💻Plasma Team
  • 📚DeFi Glossary
  • 💎Platform Overview
    • DeFi/NFT Portfolio Management
    • Market, News and Media
      • How to add your token to Market Page
    • Token Page
    • HyperDEX Swap
      • Limit Orders on HyperDEX
      • Using Limit Orders on HyperDEX
    • PlasmaSwap AMM
    • Liquidity Pools
    • Savings and Strategies
    • SpacePort IDO Launchpad
    • Innovation IDO Hub
    • Blockchain Support
    • Global Fiat On-ramp System
    • Plasma Gas Station
    • Wallet Management
    • Cross-chain Bridge
  • 🏰Plasma Governance
    • 🏛️PPAY Tokenomics
    • 🏛️xPPAY Community Token
    • ⚙️Governance Process
    • ⚙️Governance Venues
    • 🏛️gPPAY Govenance Token
    • ✨Plasma DNA and Web3 Financial DAO
  • ⚙️Development Roadmap
    • 0xPlasma Labs Roadmap
    • Features and protocols development status
  • ❔Guideline - How To
    • How to Add a New Token to Your Wallet
    • How to Connect Your Wallet to Plasma.Finance
    • How to stake PPAY
    • How to trade/swap erc20 tokens on Plasma.Finance?
    • How to create a liquidity pool for a new token?
    • How to add liquidity to the pool?
    • How to migrate liquidity (LP tokens) to PlasmaSwap from SushiSwap and Uniswap with Rebalancer Tool
  • 💻Polygon (Matic)
    • How to switch network in MetaMask on Polygon
    • How to get a MATIC token to sign cheap transactions on Polygon
    • How to add Plasma $PPAY token from Polygon network to your MetaMask
    • How to move Plasma $PPAY from Ethereum to Polygon and back. Cross-chain bridge
    • Polygon Explorer
    • Polygon Bridge
  • 🚀SpacePort Launchpad
    • How to launch IDO (for projects)
    • How to participate in IDO (for users)
    • SpacePort Landing
  • ⚙️HyperDEX Widget
    • About HyperDEX Widget
    • HyperDEX Widget Integration
  • 🔊Socials
  • Discord
  • Twitter
  • Telegram Eng
  • Github
  • Medium
Powered by GitBook
On this page
  • HypeDEX widget code for iframe integration
  • HyperDEX widget code for Button integration
  • Widget Customization and Fee setup
  • Widget Integration Example
  1. HyperDEX Widget

HyperDEX Widget Integration

No-code integration of DEX widget

HypeDEX widget code for iframe integration

Copy paste the widget code to your website <body> or app.

<iframe
      style="box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.08); background: #fff; border-radius: 8px; min-width: 400px; max-width: 430px"
      frameborder="0"
      width="100%"
      height="552px"
      src="https://widget.plasma-bank.com/"
    >
 </iframe>

HyperDEX widget code for Button integration

Copy paste the widget code to your website <body> or app.

With Button "Swap":

<link rel="stylesheet" href="https://widget.plasma-bank.com/modalWidget/style.css" />
<script async src="https://widget.plasma-bank.com/modalWidget/script.js"></script>
	
<button class="hyperdex-widget__swap-btn" onclick="showIframe()">
<img class="hyperdex-widget__swap-icon" src="https://widget.plasma-bank.com/images/two-white-arrows.svg" alt="" />
      Swap
</button>
<div id="hyperdex-widget" class="hyperdex-widget">
<iframe
        frameborder="0"
        width="100%"
        height="100%"
        src="https://widget.plasma-bank.com/?closeBtn=1"
      >
</iframe>
<div class="hyperdex-widget__close-area" onclick="closeIframe()"></div>
</div>

Widget Customization and Fee setup

Optional parameters of the DEX widget

r= string - referral address for fees from each Swap

chainId= string - Network Id (Ethereum: 1; Polygon: 137; BNB chain: 56; Avalanche: 43114; Fantom: 250; Celo: 42220; Optimism: 10 )

fromTokenId= string - Token Contract Address

toTokenId= string - Token Contract Address

darkTheme= boolean - theme mode (1 - dark mode, 0 - light mode)

closeBtn= boolean - close button for iframe (1 - yes, 0 - no, modal window)

Example of parameters in the src link:

// Example 1
https://widget.plasma.finance/?closeBtn=1&darkTheme=1

// Example 2
https://widget.plasma.finance/?chainId=56&toTokenId=0x8AC76a51cc950d9822D68b83fE1Ad97B32Cd580d&fromTokenId=0xfb288d60D3b66F9c3e231a9a39Ed3f158a4269aA

// Example 3
https://widget.plasma.finance/?chainId=56&r=0xba579c9b6a7b178edbcdc158b8eae260491871c8

Widget Integration Example

PreviousAbout HyperDEX Widget

Last updated 2 years ago

To call the Tab just use its name (Swap, Bridge, Portfolio) in the URL ()

Iframe SWAP button

⚙️
https://widget.plasma.finance/bridge
https://plasma.finance/widg
https://plasma.finance/widg2