# Vesting Widget

Welcome to the Vesting Widget Integration Guide!

This guide will walk you through the steps to integrate the Vesting Widget into your project, enabling your community and investors to see and claim their tokens directly from your platform.

Follow these steps to set up and customize the widget according to your needs.

### Step 1: Prerequisites

Before you begin, make sure you have the following:

* Access to the project’s codebase where you intend to integrate the Vesting widget.
* Familiarity with JavaScript/TypeScript and frontend development frameworks (e.g., React, Vue).

*Note: This library is written in React.*

### Step 2: Install the Vesting Widget

#### Option 1: Using NPM package

To get started, you'll need to include the Vesting Widget in your project. You can install it using npm or yarn:

```bash
npm install @trustswap/web-widgets
```

or

```bash
yarn add @trustswap/web-widgets
```

#### Option 2: Use the widget as a Web Component

You can embed the widget using the following script in your HTML. It is [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) compliant, so please check the browser compatibility before using.

```tsx
<script src="https://widgets.team.finance/assets/js/vesting-widget.js" type="module"></script>

// Then in somewhere of your code:
<teamfinance-vesting-widget
  api-key={YOUR_API_KEY}
  token-address="0xb091b669..."
/>
```

{% hint style="info" %}
💡 Unlike NPM props, the Web Component uses hyphen-separated for attributes, just like other HTML elements. So `apiKey` is equivalent to `api-key` , `tokenAddress` is equivalent to `token-address` and so on.
{% endhint %}

### Step 3: Widget Configuration

To import and configure the widget in your project, you will need to specify the blockchain network and the addresses of the smart contracts.

If you are using *NPM package* with React app, it should look like this:

```jsx
import { VestingWidget } from "@trustswap/web-widgets";

const chainId = 97;
const tokenAddress = "Ox";
const apiKey = "Your_API_Key";

export default function App() {
  return (
    <VestingWidget
      chainId={chainId} // Number format
      tokenAddress={tokenAddress}
      customTokenImageUrl="TOKEN_IMAGE_URL"
      apiKey={apiKey}
    />
  );
}
```

If you are using embeddable JS script, it will look like this:

```jsx
<script src="https://widgets.team.finance/assets/js/vesting-widget.js" type="module"></script>
<teamfinance-vesting-widget
  api-key="YOUR_API_KEY"
  token-address="0xb091b669f3f..."
  chain-id="97"
  custom-token-image-url="TOKEN_IMAGE_URL"
/>
```

The widget exposes several “attributes” (or “props” in React):

| Prop                | WebComponent Attribute | Usage                                                                                                         | Required |
| ------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------- | -------- |
| apiKey              | api-key                | The provided API Key for the widget, [contact](https://www.team.finance/contact) our support team to get one. | Yes      |
| tokenAddress        | token-address          | The token address to filter the list of vestings.                                                             | No       |
| chainId             | chain-id               | Default chain ID, in number format.                                                                           | No       |
| customTokenImageUrl | custom-token-image-url | Replace the default token image with this.                                                                    | No       |

### Step 4: Widget Customization

We use Mantine with Vanilla Extract as the styling solution. They are TypeScript-based and fully typed.

You can use your own CSS file and override the existing styling with class / id selectors. We have several pre-defined classes for easier customization:

* Generic/wrapper classes:
  * `tf-vesting-widget-wrapper`
  * `tf-widget-container`
* Button classes:
  * `tf-button-root`
  * `tf-button-inner`
  * `tf-button-label`
  * `tf-button-section`
  * `tf-button-loader`

Alternatively you can also use regular CSS selector, or globally import a css file to customize the widget:

```jsx
import "./your_style.css";
```

Please note, due to large number of sub-components, we cannot expose all the custom class names, so the CSS selector would be the best way if you want the widget’s style to be heavily modified.

{% hint style="warning" %}
Only whitelisted domains can use this widget. Please contact Team Finance on <info@team.finance> or reach out in our [Telegram community](https://www.notion.so/Team-Finance-Onboarding-Handbook-471985b4012d4b2292268ab3223184ed?pvs=21) to acquire a key.
{% endhint %}

### FAQ

Have a question? If you don’t find the answer below, please reach out to our support team.

**The widget shows "Authentication error”**

Only whitelisted domains can use this widget, if you are seeing the ‘Authentication error’ message it means your domain has not been whitelisted. Please reach out to the Team Finance team to perform the whitelisting.

**The font/styling are not correct! How can I customize them?**

The Vesting widget is distributed with minimal styling attached. You're free to modify the styling through regular CSS. See "Step 4: Widget Customization" for the pre-defined CSS classes that can be useful for customization.


---

# Agent Instructions: 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:

```
GET https://handbook.team.finance/enterprise/white-label-solutions/vesting-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.