---
# System prepended metadata

title: Grapa

---

# Grapa

### Plugin Options Interface

```typescript
export interface PluginOptions {
    onReturnRepairPositions?: (repairPositions: RepairPosition[]) => void;

    selector?: string;
    token?: string;
    credentials?: {
        customerNumber: string;
        user: string;
        password: string;
    };
    // optional if you know interfacePartnerSignature
    credentialsWithPartnerSignature?: {
        interfacePartnerNumber?: string;
        interfacePartnerSignature?: string;
        customerNumber: string;
        customerLogin: string;
        password?: string;
        customerSignature?: string;
    };

    settings?: {
        locale?: {
            country: string;
            datCountryIndicator: string;
            language: string;
        };

        languageCode?: string; // for graphic request
    };

    pluginSettings: {
        DATECode: string;
        maxWidth?: string;
        height?: string;
        maxMobileWidth: number;
        repairPositions: RepairPosition[];
        graphicDamageFormId?: string; // currrent availabel values: 'ModalFastButton' 'BottomDrawerFastButton'
        debugingMode: boolean;
    };
}
```

### Example

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- load plugin style -->
        <link href="http://dat.icwt.space/grapa/plugin.css" rel="stylesheet" />
    </head>
    <body>
        <!-- this place where plugin will render -->
        <div class="plugin"></div>

        <!-- load plugin JS synchronously -->
        <script src="http://dat.icwt.space/grapa/plugin.js"></script>

        <!-- init plugin options on your JS file or inline JS like this -->
        <script>
            window.GRAPA.init({
                selector: '.plugin',
                onComplete: form => {
                    // make what your want :)
                    console.log(form);
                }
            });
        </script>
    </body>
</html>
```


# Valuate Finance

### Plugin options interface

```typescript
interface PluginOptions {
    token?: string;
    selector?: string;
    onComplete?: (data: DAT2.Response.GetVehicleEvaluation['VXS']) => void;
    requestData: {
          datECode: string,
          container: string,
          mileage: string,
          constructionTime: number,
          registrationDate: string | date,
          restriction: string // APPRAISAL,
          save: string,
          vatType: string,
          equipment: {
            equipmentPosition: [
              { datEquipmentId: number },
            ]
          }
    };
    settings?: {};
};
```

### Example

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- load plugin styles -->
        <link href="https://plugins.wedat.eu/valuate-finance/plugin.css" rel="stylesheet" />
    </head>
    <body>
        <!-- element to which plugin will be rendered -->
        <div class="plugin"></div>

        <!-- load plugin JS synchronously -->
        <script src="https://plugins.wedat.eu/valuate-finance/plugin.js"></script>

        <!-- init plugin options in your JS file or inline JS like this -->
        <script>
            window.VALUATE_FINANCE_API.init({
                selector: ".plugin",
                requestData: {
                  datECode: "012851200090002",
                  container: "IT008",
                  mileage: 4e4,
                  constructionTime: 4728,
                  registrationDate: "2010-02-26",
                  restriction: "APPRAISAL",
                  save: "TRUE",
                  vatType: "D",
                  equipment: {
                    equipmentPosition: [
                      { datEquipmentId: 24085 },
                      { datEquipmentId: 68703 },
                      { datEquipmentId: 47518 }
                    ]
                  }
                },
                onComplete: form => {
                    // make what your want :)
                    console.log(form);
                }
            });
        </script>
    </body>
</html>
```

# Auth

### Plugin options Interface

```typescript
interface PluginOptions {
    token?: string;
    onLogin: () => void;
    onTokenExpire: () => void;
    selector?: string;
    authMode?: 'form' | 'page'; // "page" by defualt
}
```

### Example

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- load plugin style -->
        <link href="https://plugins.wedat.eu/auth/plugin.css" rel="stylesheet" />
    </head>
    <body>
        <!-- this place where plugin will render -->
        <div class="plugin"></div>

        <!-- load plugin JS synchronously -->
        <script src="https://plugins.wedat.eu/auth/plugin.js"></script>

        <!-- init plugin options on your JS file or inline JS like this -->
        <script>
            window.AUTH_API.init({
                selector: ".plugin",
                onLogin: () => {},
                onTokenExpire: () => {}
            });
        </script>
    </body>
</html>
```


# Vehicle Selection

## Plugin Options Interface

```typescript
type ClassificationGroupsNames = "engine" | "bodywork" | "model" | "transmission" | "wheelbase" | "typeOfDrive" | "numberOfAxles" | "driversCab" | "vehicleWeight" | "suspensionType" | "equipmentLine"

interface CurrentFormikValues {
    country: string;
    repairType: string;
    numberPlate: string;
    vin: string;
    freeTextSearch: string;
    datECode: string;
    alternativeModelDatECode: string;
    nationalCode: string;
    kba: string;
    baseNumber: string;
    typeNoteNumber: string;
    kilometers: string;
    cnit: string;
    firstRegistration: Date | undefined;
    firstRegistrationFilter: boolean;
    constructionPeriod: string;
    vehicleSelects: {
        vehicleType: string;
        manufacturer: string;
        baseModel: string;
        subModel: string;
    };
    equipmentSelects: {
        [K in ClassificationGroupsNames]: string;
    };
    container: string;
    paintType: string;
    alternativeModelSelects: {
        vehicleType: string;
        manufacturer: string;
        baseModel: string;
        subModel: string;
    };
    multipleVariantSelects: {
        manufacturer: string;
        baseModel: string;
        subModel: string;
        equipmentSelects: {
            [K in ClassificationGroupsNames]: string;
        };
    };
};

interface PluginOptions {
    selector: string;
    onComplete: (values: CurrentFormikValues) => void;
    token?: string;

    // TODO: add settings for modify button
    settings?: {
        country?: string; // IT by default
        language?: string; // IT by default
        restriction?: DAT.Restriction; // REPAIR by default
        paintMethod?: DAT.PaintMethod; // MANUFACTURER_SPECIFIC by default
        withEquipment?: boolean; // TODO: default
        repairIncomplete?: boolean; // by default true
        vehicleImages?: boolean; // by default true
        firstRegistrationFilter?: boolean; // by default true
        VINQueryAutomatic?: boolean; // by default false
        NumberPlateSearchAutomatic?: boolean; // by default false
        freeTextSearchAutomatic?: boolean; // by default false
        DATECodeDisplayedOnModel?: boolean; // by default true
        AZMainModel?: boolean; // by default false
        initialEditMode?: boolean;
    };

    inputFields?: {
        firstRegistration?: string; // Date
        DATCode?: string;
        VIN?: string;
        NumberPlate?: string;
        freeTextSearch?: string;
        paintType?: string;
        vehicleColor?: string;
        vehicleCode?: string;
        VINQueried?: boolean; // show icon
        PlateQueried?: boolean; // show icon
        BrandAdditionalLabel?: string;
        ModelAdditionalLabel?: string;
        SubModelAdditionalLabel?: string;
        AlternativeModelECode?: string;
        Approvalnumber?: string;
        EngineCode?: string;
        LastInspection?: string;
        listOfEquipments?: string;
    };

    styles?: {
        fontSize?: {
            commonText?: number; // Text in error modal, multiple selection modal
            modalsTitles?: number;
            inputs?: number;
            selectsLabels?: number;
            selectsOptions?: number;
            fieldsTitles?: number;
            alternativeModelTitle?: number;
            alternativeModelText?: number;
        };
        modal?: {
            borderColor?: string;
            borderWidth?: number;
            borderRadius?: number;
            backgroundColor?: string;
        };
        icons?: {
            search?: string;
            calendar?: string;
            edit?: string;
            repairIncomplete?: string;
            numberPlate?: string;
            vin?: string;
            constructionTime?: string;
            paintType?: string;
        };
    };
}

```

### Example of Vehicle

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- load plugin style -->
        <link href="https://plugins.wedat.eu/vehicle-selection-modal/plugin.css" rel="stylesheet" />
    </head>
    <body>
        <!-- this place where plugin will render -->
        <div class="plugin"></div>

        <!-- load plugin JS synchronously -->
        <script src="https://plugins.wedat.eu/vehicle-selection-modal/plugin.js"></script>

        <!-- init plugin options on your JS file or inline JS like this -->
        <script>
            window.VEHICLE_API.init({
                pluginSettings: {
                    selector: '.plugin',
                    completeFormCallback: form => {
                        // make what your want :)
                        console.log(form);
                    }
                }
            });
        </script>
    </body>
</html>
```

### Renderless example
```htmlembedded=
<!DOCTYPE html>
<html lang="en">


<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
  <!-- load plugin style -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
  <link href="https://plugins.wedat.eu/vehicle-selection-modal/plugin.css" rel="stylesheet" />
</head>
<style>
  .json {
    white-space: pre;
    background: #dedede;
    font-family: monospace;
  }
</style>

<body>
  <div style="white-space: pre" class="json" id="response"></div>
  <div id="plugin"></div>
  <!-- this place where plugin will render -->
  <!-- <code language="json" id="response" style="display:block; white-space:pre-wrap"></code> -->

  <!-- load plugin JS synchronously -->
  <script src="https://plugins.wedat.eu/vehicle-selection-modal/plugin.js"></script>

  <!-- init plugin options on your JS file or inline JS like this -->
  <script>
    function print_r(object, html) {
      if (html) return '<pre>' + JSON.stringify(object, null, 4) + '</pre>';
      else return JSON.stringify(object, null, 4);
    }

    window.VEHICLE_API.init({
      // selector: '#plugin',
      onComplete: form => {
        const hlt = hljs.highlight('json', print_r(form))
        const output = document.getElementById('response')
        output.innerHTML = hlt.value
      },
      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJkYXQiLCJpYXQiOjE2MDQ5MTg3NDk5NTksImNsbnQiOiIzMTMxNDExIiwidXNlciI6ImZlcnJzaW1vIn0.RVWFCTAStZ4eH2fn6ujfXKCzWWgztairBG1tVoKtqqM',
      inputFields: {
        VIN: 'WF0JXXWPJJ9P21439',
      },
      settings: {
        VINQueryAutomatic: true
      }
    });
  </script>
</body>

</html>

```

# Vehicle Selection UK

Plugin for searching vehicle by its `registration number` or `VIN`.  
  
Plugin can work in two modes: with UI or without. To enable rendering of UI you should provide `selector` property to plugin's options: 

```typescript
selector: '.your-selector'
```

In this case, UI will be rendered to the element with the given selector. After receiving the vehicle and pressing "Finish" button, the `onComplete` callback will be called with received vehicle's object.  

Otherwise, if you have not passed `selector` property, plugin will automatically request vehicle by registration number or VIN, if you provide one of them to `inputFields` property. After *successfully* receiving the vehicle, the `onComplete` callback will be called with received vehicle's object.

### Plugin options interface

```typescript
interface PluginOptions {
    clientId: string;
    clientSecret: string;
    onComplete: (vehicle: Vehicle) => any;
    selector?: string;
    inputFields?: {
        numberPlate?: string;
        vin?: string;
    };
}
```

## Vehicle interface

```typescript
interface Vehicle {
    identifiers?: {
        vrm?: string;
        vin?: string;
        gcode?: {
            id?: string;
        };
    };
    dvladata?: {
        registrationdate?: {
            firstregistration?: string;
            firstregistrationuk?: string;
        };
        manufacturer?: string;
        model?: string;
        description?: string;
        engine?: {
            code?: string;
            number?: string;
            size?: {
                cc?: string;
            };
            power?: {
                kw?: string;
            };
        };
        colour?: {
            current?: string;
            previous?: string;
            original?: string;
            lastcolourchangedate?: string;
            previouscolourcount?: string;
        };
        fuel?: string;
        bodystyle?: string;
        history?: {
            export?: {
                marker?: string;
            };
            import?: {
                northernireland?: {
                    marker?: string;
                };
                marker?: string;
            };
            scrap?: {
                unscrapped?: {
                    marker?: string;
                };
                date?: string;
                marker?: string;
            };
            vin?: {
                marker?: string;
            };
            keeperacquisitiondate?: string;
            previousownercount?: string;
            priorregistrationuse?: string;
            previouskeeper?: {
                acquisitiondate?: string;
                disposaldate?: string;
            };
            v5cchangedate?: string;
            victest?: {
                date?: string;
                result?: string;
            };
        };
        manufacturedate?: string;
        manufactureyear?: string;
        vinbuildmonth?: string;
        seatcount?: string;
        co2emissionsgkm?: string;
        weightkg?: {
            gross?: string;
            unladen?: string;
            fullyladen?: string;
            maxtowingbraked?: string;
            maxtowingunbraked?: string;
        };
        powertoweightratio?: string;
        noisedb?: {
            stationary?: string;
            driveby?: string;
            engine?: string;
        };
        wheelplan?: string;
        roadfundlicense?: {
            band?: string;
            sixmonth?: string;
            twelvemonth?: string;
        };
    };
    enhanceddata?: {
        gcodedata?: {
            manufacturer?: string;
            model?: string;
            modeldescription?: string;
            specdescription?: string;
            derivative?: string;
            bodystyle?: string;
            fueltype?: string;
            category?: string;
            class?: string;
            doorcount?: string;
            seatcount?: string;
            transmissiontype?: string;
            gearcount?: string;
            valvecount?: string;
            driveaxle?: string;
            drivetype?: string;
            engine?: {
                alignment?: string;
                position?: string;
                cylinder?: {
                    count?: string;
                    configuration?: string;
                };
                size?: {
                    cc?: string;
                    litre?: string;
                };
                power?: {
                    bhp?: string;
                    kw?: string;
                };
                fueldelivery?: string;
                emission?: string;
            };
            modelversioncode?: string;
            modelversion?: string;
            specdaterange?: {
                from?: string;
                to?: string;
            };
            steeringposition?: string;
            weightkg?: {
                gross?: string;
            };
            wheelbasemm?: string;
            country?: string;
        };
        drivendata?: {
            speed?: {
                topspeedmph?: string;
                acceleration0to62mph?: string;
            };
            engine?: {
                emission?: string;
                euroemission?: string;
            };
            mpg?: {
                urban?: string;
                extraurban?: string;
                combined?: string;
            };
            weightkg?: {
                unladen?: string;
            };
            eurostandard?: string;
            coba?: string;
            wltpmpg?: {
                low?: string;
                medium?: string;
                highmpg?: string;
                extrahigh?: string;
                combined?: string;
                emission?: string;
            };
            nox?: string;
            nmhc?: string;
            vedband?: string;
        };
    };
}
```

## Plugin example with UI

```htmlembedded=
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- load plugin styles -->
        <link href="https://plugins.wedat.eu/vsm-uk/plugin.css" rel="stylesheet" />
    </head>
    <body>
        <!-- element to which plugin will be rendered -->
        <div class="plugin"></div>

        <!-- load plugin JS synchronously -->
        <script src="https://plugins.wedat.eu/vsm-uk/plugin.js"></script>

        <!-- init plugin options in your JS file or inline JS like this -->
        <script>
            window.VEHICLE_API.init({
                clientId: "id",
                clientSecret: "secret",
                onComplete: vehicle => {
                    // make what your want :)
                    console.log(vehicle);
                },
                selector: ".plugin"
            });
        </script>
    </body>
</html>
```

## Plugin example without UI

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- no need to load styles -->
    </head>
    <body>
        <!-- load plugin JS synchronously -->
        <script src="https://plugins.wedat.eu/vsm-uk/plugin.js"></script>

        <!-- init plugin options in your JS file or inline JS like this -->
        <script>
            window.VEHICLE_API.init({
                clientId: "id",
                clientSecret: "secret",
                onComplete: vehicle => {
                    // make what your want :)
                    console.log(vehicle);
                },
                <!-- selector prop is not provided -->
                inputFields: {
                    numberPlate: "vehicle's number plate"
                }               
            });
        </script>
    </body>
</html>
```

## Total work example of renderless vsm-uk
```html
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
  <!-- load plugin style -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
  <!-- no need to load styles -->
</head>
<style>
  .json {
    white-space: pre;
    background: #dedede;
    font-family: monospace;
  }
</style>

<body>

  <!-- load plugin JS synchronously -->
  <script src="https://plugins.wedat.eu/vsm-uk/plugin.js"></script>

  <div class="json" id="response"></div>
  <!-- init plugin options in your JS file or inline JS like this -->
  <script>
    function print_r(object, html) {
      if (html) return '<pre>' + JSON.stringify(object, null, 4) + '</pre>';
      else return JSON.stringify(object, null, 4);
    }
    // default
    window.VEHICLE_API.init({
      onComplete: async vehicle => {
        const hlt = hljs.highlight('json', print_r(vehicle))
        const output = document.getElementById('response')
        output.innerHTML = hlt.value
      },
      inputFields: {
        numberPlate: "DG19DSV",
      }
    });
  </script>
</body>

</html>
```


# Photo Widget

## How to use
##### 1. You need to load 2 files on your websites.
##### 2. First file is JS file.

```html
<script src="path-to-plugin-folder/plugin.js"></script>
```

##### 3. Second file is CSS file.

```html
<link href="path-to-plugin-folder/plugin.css" rel="stylesheet">
```

##### 4. After load plugin JS, you can use this functionality.
```js
const pluginOptions = {}; // see options on next chapter

window.PLUGIN_API.init(pluginOptions);
```

## Plugin Options Interface

```typescript
interface PluginStep {
  // type of photo ('damage' | 'vehicle' or ets.)
  photoType: string;
  // show retake page after capture (default is true)
  withRetake?: boolean;
  // embed geolocation, date, time in the photo (default is true)
  embedGeo?: boolean;
  // show step in landscape mode (default is false it is mean forcePortrait)
  forceLandscape?: boolean;
  // show comment block after make photo
  isShowComment?: boolean;
  // image for help photo modal (if empty "Help modal" doesnt show before capture)
  helpImg?: string;
  // title below help image in modal
  helpTitle?: string;
  // description of help image
  helpDescription?: string;
  // image for mask over video
  maskImg?: string;
  // small image in slider during photo
  previewImg?: string;
  // title for preview image in slider during photo
  previewTitle?: string;
}

interface PluginProps {
  // selector to element where plugin will render
  selector: string;
  steps: PluginStep[];
  // show summary page (default 'true') 
  // if false completeFormCallback invoke in last capture photo step
  withSummary?: boolean;
  completeFormCallback: (form: ResultForm) => void;
  // default true
  disableStreamAfterComplete?: boolean;
  translates?: {
    enablePermissionsTitle?: string;
    enablePermissionsDescription?: string;
    enablePermissionsBtn?: string;
    refreshPageBtn?: string;
    disablePermissionsTitle?: string;
    enablePermissionsSubTitle?: string;
    disablePermissionsSubTitle?: string;
    enableLocationBtn?: string;
    rejectCameraDescription?: string;
    rejectLocationDescription?: string;
    // special text message for Safari
    rejectLocationDescriptionSafari?: string;
    enablePermissionsSkip?: string;
    tapToDismiss?: string;
    commentFieldPlaceholder?: string;
    positionInLandscape?: string;
    positionInPortrait?: string;
    reviewMediaTitle?: string;
    submitBtn?: string;
    additional?: string;
  };
  icons?: {
    permissions?: string;
    rejectPermissions?: string;
    photoBtn?: string;
    retake?: string;
    usePhoto?: string;
    additional?: string;
    spinner?: string;
  };
  gpsInfo?: {
    // default 'top-right'
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' 
                          | 'center-top' | 'center-bottom';
    styles?: {
      // only words or rgb (e.g 'white' or 'rgb(255, 255, 10)')
      fontColor?: string;
      // only px (default 25px)
      fontSize?: string;
      // default Arial
      fontFamily?: string;
      // default black
      backgroundColor?: string;
      // only px only 4 values supports (e.g '10px 10px 10px 10px') only integer
      padding?: string;
      // only px
      borderRadius?: string;
    };
  };
}
```

### Example for "One Shot"


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- load plugin style -->
    <link href="plugin.css" rel="stylesheet">
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>

<!-- load plugin JS synchronously -->
<script src="plugin.js"></script>

<!-- init plugin options on your JS file or inline JS like this -->
<script>
  window.PLUGIN_API.init({
    selector: '.plugin',
    completeFormCallback: form => {
      // make what your want :)
      console.log(form);
    },
    withSummary: false,
    steps: [
      {
        withRetake: false,
        maskImg: 'path-to-mask-img',
        previewImg: 'path-to-preview-img',
        previewTitle: 'Driver Side Front',
        helpImg: 'path-to-help-img',
        helpTitle: 'Driver Side Front',
        helpDescription: 'Fit your vehicle into the outline as shown in the example above. Then capture the photo.',
      },
    ],
  });
</script>
</body>
</html>
```

### Full example:


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- load plugin style -->
    <link href="plugin.css" rel="stylesheet">
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>

<!-- load plugin JS synchronously -->
<script src="plugin.js"></script>

<!-- init plugin options on your JS file or inline JS like this -->
<script>
  window.PLUGIN_API.init({
    selector: '.plugin',
    completeFormCallback: form => {
      // make what your want :)
      console.log(form);
    },
    steps: [
      {
        photoType: 'vehicle',
        maskImg: 'path-to-mask-img',
        previewImg: 'path-to-preview-img',
        previewTitle: 'Driver Side Front',
        helpImg: 'path-to-help-img',
        helpTitle: 'Driver Side Front',
        helpDescription: 'Fit your vehicle into the outline as shown in the example above. Then capture the photo.',
      },
      {
        photoType: 'vehicle',
        maskImg: 'path-to-mask-img',
        previewImg: 'path-to-preview-img',
        previewTitle: 'Driver Side Rear',
        helpImg: 'path-to-help-img',
        helpTitle: 'Driver Side Rear',
        embedGeo: false
      },
      {
        photoType: 'damage',
        forceLandscape: true,
        isShowComment: false,
        maskImg: 'path-to-mask-img',
        previewImg: 'path-to-preview-img',
        previewTitle: 'Damage - Right',
        helpImg: 'path-to-help-img',
        helpTitle: 'Damage - Right',
      },
      {
        photoType: 'damage',
        isShowComment: false,
        maskImg: 'path-to-mask-img',
        previewImg: 'path-to-preview-img',
        previewTitle: 'Damage - Left',
        helpImg: 'path-to-help-img',
        helpTitle: 'Damage - Left',
      },
    ],
  });
</script>
</body>
</html>
```

### Result Form Interface

```typescript
interface FormStep {
  // base64 string
  photo: string;
  photoType: PluginStep['photoType'];
  comment?: string;
  geolocation?: {
    latitude?: number;
    longitude?: number;
    date: string;
    time: string;
  };
}

interface ResultForm {
  steps: FormStep[];
  // additional photo
  additionalSteps?: string[];
}
```

# Inbox

### Plugin options interface

```typescript
interface PluginOptions {
    selector: string;
    token?: string;

    settings?: {
        pageLimit?: string;
    };

    styles?: {
        fontSize?: {
            fieldsTitles?: number;
        };
        field?: {
            fontSize?: number;
            color?: string;
            backgroundColor?: string;
        };
        button?: {
            fontSize?: number;
            color?: string;
            backgroundColor?: string;
            backgroundColorHover?: string;
            height?: number;
        };
        form?: {
            borderColor?: string;
            borderWidth?: number;
            borderRadius?: number;
            backgroundColor?: string;
        };
        logo?: {
            image?: string;
        };
        page?: {
            bgImage?: string;
        };
        icons?: {
            search?: string;
        };
        select?: {
            bgImage?: string;
        };
    };
}
```

### Example

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- load plugin styles -->
        <link href="https://plugins.wedat.eu/inbox/plugin.css" rel="stylesheet" />
    </head>
    <body>
        <!-- element to which plugin will be rendered -->
        <div class="plugin"></div>

        <!-- load plugin JS synchronously -->
        <script src="https://plugins.wedat.eu/inbox/plugin.js"></script>

        <!-- init plugin options in your JS file or inline JS like this -->
        <script>
            window.INBOX_API.init({
                selector: ".plugin";
            });
        </script>
    </body>
</html>
```



