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

# Use Case

<figure><img src="https://2063627461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJwl70QhiThzRDxb95zaX%2Fuploads%2FqWLedgZPx0UwG40HTB0L%2Fimage.png?alt=media&amp;token=b436c72a-49b3-4254-a59f-d382e755f08d" alt=""><figcaption></figcaption></figure>

## Installation

```
# yarn 
yarn add @vip3/vip3-benefit-widget

# npm
npm install add @vip3/vip3-benefit-widget
```

## Quickstart

```
import { VIP3Widget, LANG, THEME } from '@vip3/vip3-benefit-widget'

// in VUE
<VIP3Widget
  benefit-id={'benefitId'}
  lang={LANG.ZH}
  theme={THEME.Dark}
  open={true}
  @close={() => {
    // close Callback
  }}
/>

// in TSX
<VIP3Widget
  benefitId={'benefitId'}
  lang={LANG.ZH}
  theme={THEME.Dark}
  open={true}
  onClose={() => {
    // close Callback
  }}
/>
```

## props

**benefitId**

Specify the benefit information to be loaded in widget

benefit Id: `string`

***

## **lang**

The widget language

lang: `enum LANG`

`LANG.EN | LANG.EN`

***

## **theme**

The widget UI Color theme

theme: `enum THEME`

`THEME.Dark | THEME.Light`

***

## **open**

If `true`, the widget is shown.

open: `boolean`

***

## **onClose**

Callback fired when the widget requests to be closed.

open: `func`

<br>