πŸ“’
Native Docs
  • 🦎About Native
    • πŸ—ΊοΈRoadmap
    • πŸ“žContact Us
    • πŸ”Security Audit
    • πŸ–ΌοΈBrand Assets
  • πŸŽ‰Campaigns
    • πŸ–ΌοΈOfficial NFTs
  • INTRODUCTION
    • πŸ”€Flexible Market Making
      • Pricing Models
        • On-chain Pricing
          • Constant Sum
          • Uniswap V2
        • Off-chain Pricing
          • Fixed Price
          • RFQ - Private Market Maker
    • πŸŽ’Self Custody
      • Externally Owned Account (EOA)
      • Hardware Wallet
      • Multi-signature Wallet
    • πŸ’ΉProject Owned DEX
  • GETTING STARTED
    • πŸš€Product Overview
    • πŸŽ“Tutorial
      • Accessing Native Portal
      • Creating A Private Pool
      • Adding Allowance
      • Creating A Public LP Pool
      • Adding LP Rewards
      • Getting Started with the Swap Widget
      • Changing Swap Widget Settings
    • πŸ™‹β€β™‚οΈFAQ
  • DEVLOPERS
    • 🧩Native V1
    • πŸ“±Widget
Powered by GitBook
On this page
  1. GETTING STARTED
  2. Tutorial

Getting Started with the Swap Widget

PreviousAdding LP RewardsNextChanging Swap Widget Settings

Last updated 1 year ago

This guide walks you through the steps to embed the swap widget in your website in 2 minutes. With the swap widget, your users can trade ERC-20 tokens on the Native without leaving your site!

Here’s a live preview of the swap widget.

Example use cases include:

  • Swapping assets in a DeFi application

  • Acquiring a token to participate in your web3 community (e.g. FWB or a gaming token)

  • Converting to the required currency for an NFT purchase (e.g. WETH)

You can make the widget feel like a native part of your app by customizing the colors, font, and token list to match your app theme. This will teach you how.

Integrating the Native Swap Widget is simple. Simply copy and paste the code snippet in the Swap widget page (Widgets > Swap) into desired locations of your website. Alternatively, you can use for more customizability.

If you do not have a website and still want your own DEX, you can click on "Preview" button to get the URL of your own DEX.

πŸŽ“
guide
Native's SDK