Try Best-Rate-Swap Feature on Your Web3.0 Site

arkenfinance

Arken Finance

Posted on July 11, 2022

Try Best-Rate-Swap Feature on Your Web3.0 Site

Header

Today I'd like to show you how to implement the Arken widget on your site, giving a seamless swapping experience for token holders in a few lines of code.

<html>
  <head></head>
  <body>
    <div
      id="arken-root"
      data-chain="bsc"
      data-mode="dark"
      data-theme_color=""
      data-theme_text_color=""
      data-base_token_address=""
      data-quote_token_address=""
      data-external_top_token_address="[]"
      data-custom_image_token="{}"
      data-widget_type=""
      data-graph_range="1"
      data-max_width="637px"
      data-height="42.39%"
      data-background_color_light=""
      data-background_color_dark=""
    ></div>
    <script async src="https://widget.arken.finance/widget.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Arken Finance aims to contribute to and work on ambitious initiatives, and to advance the DeFi sector for the benefit of everyone. We want to see our fellow DeFi projects providing easy and simple user experiences to your users too!

Thus, you can now get Arken's "charts and swapbox widget" to integrate it directly on your website at no cost. Our widget is simple, beautiful, and customizable, giving a seamless swapping experience to your users. Here are the steps:

Or, Try It Yourself here.

How to Get Arken's WIDGET on Your Site

Step1: Go to Arken's Widget Customization Dashboard.

Step2: Customize the display type of the widget. There are 3 options available: 1) Graph Only, 2) Swapbox Only, and 3) Graph and Swapbox. Select the widget type and the default graph range that you prefer. You can also adjust the width and height of the widget to fit your site.

Step2

Step3: Select default tokens. Click on the 'Swap' bar at the top. Choose the network of your token. Then, select the default quote token and default base token by typing the token name or inserting the token contract address and clicking the 'add item' option. You can also use the custom image by pasting the image URL directly into the CUSTOM IMAGE URL box.

Step3

Step4: Style your widget. Go to the 'Style' bar and customize the theme (light, or dark) and color scheme that you want.

Step4

Step5: Click the 'Get Code' button.

Step5

Step6: 2 sets of codes are available; in HTML and React. Now, you can use the codes for your landing page or designated place. Now you are all set!

Step6


Keen to join our community? Visit:

💖 💪 🙅 🚩
arkenfinance
Arken Finance

Posted on July 11, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related