# 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.&#x20;

## Compatibility

* React 18&#x20;
* 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**](https://docs.xy.finance/bridge-aggregator-integration/xy-finance-widget-npm/install-the-widget)" section.
* [**Configure the Widget**](https://docs.xy.finance/bridge-aggregator-integration/xy-finance-widget-npm/configure-the-widget): 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**](https://docs.xy.finance/bridge-aggregator-integration/xy-finance-widget-npm/customize-the-theme): Modify the widget's **border-radius**, **color**, and **font-family** to match your website's style.
* Explore the full [**API Reference**](https://docs.xy.finance/bridge-aggregator-integration/xy-finance-widget-npm/widget-api-reference): Find detailed information about the configuration options we provide.
* Stay updated with the [**Change Log**](https://docs.xy.finance/bridge-aggregator-integration/xy-finance-widget-npm/change-log): Stay informed about the latest changes and updates we have made.
