> For the complete documentation index, see [llms.txt](https://docs.arken.ag/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.arken.ag/for-developers/arken-widgets.md).

# Arken Widgets

[Arken Finance](https://go.arken.finance/YToGhH) 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!

![](/files/lRSoTNtkLgjMiZg41QL5)

Thus, projects can now get Arken's 'charts and swapbox widget' and 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, get the widget [here](https://widget.arken.finance/widget-preview?).

### How to Get Arken's WIDGET on Your Site

**Step1**: Go to Arken's [Widget Customization Dashboard](https://widget.arken.finance/widget-preview?)

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

![Arken swap feature](/files/xdtUdVwHzXbo2wDZB2wJ)

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

![Arken swap box](/files/sNm7yngQtBW8oqn6MKr2)

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

![Arken swap widget - style](/files/LWxJycQlUW1uWN0syQkn)

**Step5**: Click the 'Get Code' button.

![Arken swap widget - get code](/files/jkvjwOft1rAujpyvs9YO)

**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!

![](/files/XDb5CaX4WRR98WvOC8A7)

If you need any support, please do not hesitate to [contact us](https://t.me/arkenfinance).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.arken.ag/for-developers/arken-widgets.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.