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>
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.
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.
Step4: Style your widget. Go to the 'Style' bar and customize the theme (light, or dark) and color scheme that you want.
Step5: Click the 'Get Code' button.
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!
Keen to join our community? Visit:
- Discord: https://discord.gg/GPWDsEAaE7
- Twitter: https://twitter.com/ArkenFinance
- Telegram: https://t.me/arkenfinance
- Facebook: https://www.facebook.com/arkenfinance
Top comments (0)