# 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="https://2716640129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXAKmZe7xwxY5ncn6xM-1703796690%2Fuploads%2FCkQTm0vgevwY2ceiRYW7%2Fimage.png?alt=media&#x26;token=7808e6fb-5098-4d7b-aa94-8b3515e2eda2" alt=""><figcaption></figcaption></figure>

![](https://2716640129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXAKmZe7xwxY5ncn6xM-1703796690%2Fuploads%2FQW8JaQ09RKd26YmizCLE%2Fimage.png?alt=media\&token=1e8270cd-ecd1-42f1-8a94-033f3fcd77f3)

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

<div align="left"><figure><img src="https://2716640129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXAKmZe7xwxY5ncn6xM-1703796690%2Fuploads%2F9tz0XxG0Tv1CAUGkd3FS%2Fimage.png?alt=media&#x26;token=cc694696-9311-4926-9222-10f6394ff3bd" 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="https://2716640129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXAKmZe7xwxY5ncn6xM-1703796690%2Fuploads%2FtkUY57Gfb99OCN9smtZy%2Fimage.png?alt=media&#x26;token=90c6d280-4b9e-403a-aa12-4834cec42b1d" 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="https://2716640129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXAKmZe7xwxY5ncn6xM-1703796690%2Fuploads%2Fw12gvtDxvuFN7xlDuOEH%2Fimage.png?alt=media&#x26;token=2088a87b-d301-4154-a2cf-3bfad161f297" 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="https://2716640129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXAKmZe7xwxY5ncn6xM-1703796690%2Fuploads%2F27cRv2KEpDVYHFg7P8Qd%2Fimage.png?alt=media&#x26;token=6a0ebc1a-3f0d-4c8b-8eca-ed18f0cb654e" alt=""><figcaption></figcaption></figure>