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

# O3 Widget

Customize the [O3 Swap Widget](https://o3swap.com/widget) preset and integrate it into your website without any additional coding work, and allow your users to swap tokens across chains without leaving your dApp! 

#### See what you can customize below:

* Choose between a horizontal or vertical view that best fits your website UI.

<figure><img src="/files/PB7H3vcdEQ8AoHSSpUHz" alt=""><figcaption></figcaption></figure>

![](/files/XdHYRY8XtWyY4oUc4SPJ)

* Select the language for the widget. Currently, English and Chinese are supported.

<div align="left"><figure><img src="/files/f1IWqYownjxVnjozHyZZ" alt=""><figcaption></figcaption></figure></div>

* Pick a theme color that matches your project's branding style. You can customize any color or choose from a default set.

<figure><img src="/files/ZSikgZMlUTZG1TlBSJEl" alt=""><figcaption></figcaption></figure>

* Set the default option for the widget. You can paste the chain ID and token address to specify the default source chain, source token, destination chain, and destination token.

<div align="left"><figure><img src="/files/1rNSxj0ATnXCXrzaGhWL" alt=""><figcaption></figcaption></figure></div>

Once all the [Presets](https://o3swap.com/widget) are configured, simply copy the code by clicking the button in the upper-right corner. The widget can be integrated with ease, and you can also customize the settings directly in the code.

<figure><img src="/files/4ukHWwQKFUgkpduph9e6" alt=""><figcaption></figcaption></figure>