npm package: @sortter/sortter-resellers-web-component
Description: The sortter-reseller-form-web-component is a custom web component designed to integrate seamlessly with Sortter Affiliates. Built using Lit, this component allows you to easily embed Sortter's loan application form into your website or application. Instal
Latest version: 1.3.0

# Sortter Resellers Web Component

The sortter-reseller-form-web-component is a custom web component designed to integrate seamlessly with Sortter Affiliates. Built using Lit, this component allows you to easily embed Sortter's loan application form into your website or application.
Installation

You can load the script in directly in your html

```html
<script type="module" src="< path-to-the-script-file >"></script>
```

## Link to npm package:

<a href="https://www.npmjs.com/package/@sortter/sortter-resellers-web-component">https://www.npmjs.com/package/@sortter/sortter-resellers-web-component</a>

## Usage

To use the Sortter Form Web Component, you can include the <sortter-reseller-form> tag in your HTML code, along with attributes to customize the form according to your needs.

```html
<sortter-reseller-form
    alternativeUrl="string | null"
    b2cUrl="string | null"
    b2bUrl="string | null"
    defaultLoanType="personal | corporate"
    privacyPolicyUrl="string"
    privacyPolicyText="string"
    splashLogo="url"
    stage="test | null"
    theme="'custom || Sortter || '' "
    type="both | personal | corporate"
    utm="string"
    titleColor="string | null"
    labelColor="string | null"
    highLightColor="string | null"
    buttonColor="string | null"
    logoSrc="string | null"
    logoLink="string | null"
    bannerLink="string | null"
    fontFamily="string | null"
    locale="'fi' || 'ee' || ''"
    layout="'300' || '480' || ''"
></sortter-reseller-form>
```

## Available Attributes

### General Functionality

-   **alternativeUrl**: If redirect does not work and you want to use an alternative location, define an alternative URL. Defaults to `redirectUrl`.
-   **b2cUrl**: URL redirect to the business-to-customer link. This is defined by default but can be overwritten if needed.
-   **b2bUrl**: URL redirect to the business-to-business link. This is defined by default but can be overwritten if needed.
-   **utm**: You can include a UTM query in this attribute. It will be added to the end of `b2cUrl` or `b2bUrl` as is.
-   **stage**: Use `'test'` if you want to see where the user would be redirected without actually redirecting them.
-   **type**: Define what loan types you want to include (`both`, `personal`, or `corporate`).
-   **defaultLoanType**: Works only when the `type` attribute is set to "both". It defines which loan type will be shown first by default.

### UI Customization

-   **theme**: Defaults to "Sortter". Use `'custom'` to return without styles.
-   **titleColor**: Define the title color with a hex color code. This is defined by default but can be overwritten if needed.
-   **labelColor**: Define the label color with a hex color code. This is defined by default but can be overwritten if needed.
-   **highLightColor**: Define the highlight color with a hex color code. Affects the slider, slider inputs, and top selector. This is defined by default but can be overwritten if needed.
-   **buttonColor**: Define the button color with a hex color code. This is defined by default but can be overwritten if needed.
-   **fontFamily**: Define the font family used for the whole component. This is defined by default but can be overwritten if needed.
-   **locale**: Use `'fi'` or `'ee'` as the locale. This is defined as `'fi'` by default but can be overwritten if needed.
-   **layout**: Use `'300'` or `'480'` as the layout. This defines the width and minimum height of the component (`300`: width 300px, min height 600px; `480`: width 480px, min height 600px). Leave empty to handle default width and height.

### Branding and Logos

-   **logoSrc**: Replace the logo with an image link. This is defined by default but can be overwritten if needed.
-   **logoLink**: Add a link to the logo.
-   **hideLogo**: Hides the logo from the form.
-   **bannerLink**: Add a banner on top of the slider with an image link. By default, there is no banner.

### Privacy and Splash Screen

-   **privacyPolicyUrl**: URL to your privacy policy page.
-   **privacyPolicyText**: Text to display for the privacy policy link.
-   **hidePrivacyPolicy**: Hides the privacy policy section.
-   **hideSplashScreen**: Hides the splash screen and redirects directly to the URL set.
-   **splashLogo**: URL to the splash logo image that will be displayed on the splash screen.

### Loan Settings

-   **b2bLoanAmount**: Default value for the loan in B2B.
-   **b2bLoanPeriod**: Default value for the loan period in B2B.
-   **b2bLoanMax**: Max value of the loan for B2B. Defaults to `10_000_000`.
-   **b2cLoanAmount**: Default value for the loan in B2C.
-   **b2cLoanPeriod**: Default value for the loan period in B2C.
-   **b2cLoanMax**: Max value of the loan for B2C. Defaults to `70_000`.

## Development

**Requirements**

-   Node v18
-   Yarn

**Development**

-   `yarn install`
-   `yarn dev`

## Lit.js

Read more about lit from https://lit.dev/docs/