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

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

Usage

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

<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/