> For the complete documentation index, see [llms.txt](https://docs.xy.finance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.xy.finance/bridge-aggregator-integration/xy-finance-widget-npm.md).

# XY Finance Widget (NPM)

XY Finance team has been wracking our brains just to come up with a powerful engagement tool to help strengthen your user retention, making them want to come back more for a satisfying user experience that this widget provides for your website and reducing friction by letting them fast-forward into your app's/site's key functionality. Note that this XY Finance Widget will be constantly renewed as we're also gathering more resources and collecting feedback from users along the way. 

## Compatibility

* React 18 
* Vite ([Example](https://github.com/XY-Finance/examples/tree/main/widget-npm/v4/vite))
* Next.js ([Example](https://github.com/XY-Finance/examples/tree/main/widget-npm/v4/nextjs))

{% hint style="info" %}
If you have specific compatibility requirements or need further assistance, please [reach out to us](https://docs.google.com/forms/d/e/1FAIpQLSeJamZPxZm2oDyMGUFcEqlSHfy_WjIpuAYEqwu98rPg5xAedA/alreadyresponded).
{% endhint %}

## Let's get started!

* Begin by installing the widget using the example provided in the "[**Getting Started**](/bridge-aggregator-integration/xy-finance-widget-npm/install-the-widget.md)" section.
* [**Configure the Widget**](/bridge-aggregator-integration/xy-finance-widget-npm/configure-the-widget.md): Customize the **default settings** that appear on the widget, including **disabling undesired tokens/chains** and **featuring the tokens** you want to promote.
* [**Customize the Theme**](/bridge-aggregator-integration/xy-finance-widget-npm/customize-the-theme.md): Modify the widget's **border-radius**, **color**, and **font-family** to match your website's style.
* Explore the full [**API Reference**](/bridge-aggregator-integration/xy-finance-widget-npm/widget-api-reference.md): Find detailed information about the configuration options we provide.
* Stay updated with the [**Change Log**](/bridge-aggregator-integration/xy-finance-widget-npm/change-log.md): Stay informed about the latest changes and updates we have made.