This component can be used to add a loan slider to your webpage or application. It supports both consumer and business sliders (or both at the same time ).
Add the .js script
<script type="module" src="https://www.unpkg.com/@meiko/sortter-resellers-web-component/dist/sortter-reseller-form.js.umd.js"></script>Adding the component for consumers
Add the component by using the following code snippet.
<sortter-reseller-form
hidePrivacyPolicy
hideSplashScreen
b2cLoanAmount="25000"
b2cLoanPeriod="6"
type="personal"
utm="utm_source=your-site&utm_medium=slider"
locale="fi"
></sortter-reseller-form>Rendered example
Adding the component for business
Add the component by using the following code snippet.
<sortter-reseller-form
hidePrivacyPolicy
hideSplashScreen
b2bLoanAmount="200000"
b2bLoanPeriod="36"
type="corporate"
utm="utm_source=your-site&utm_medium=slider"
></sortter-reseller-form>Rendered example
Adding the component for both
Add the component by using the following code snippet.
<sortter-reseller-form
hidePrivacyPolicy
hideSplashScreen
b2cLoanAmount="25000"
b2cLoanPeriod="6"
b2bLoanAmount="75000"
b2bLoanPeriod="24"
type="both"
defaultLoanType="personal"
utm="utm_source=your-site&utm_medium=slider"
></sortter-reseller-form>Rendered example
All available attributes
| Attribute | Task | Default | Mandatory |
|---|---|---|---|
| alternativeUrl | If automatic redirection fails for any reason, you can set a URL here to direct the user past the splash screen. | No | |
| b2cUrl | Link to the personal loans page. | https://sortter.fi/lainahakemus | No |
| b2bUrl | Link to the business loans page. | https://sortter.fi/yrityslainahakemus/ | No |
| b2cButtonText | Button text in personal loans. | Lähetä hakemus | No |
| b2bButtonText | Button text in business loans. | Lähetä hakemus | No |
| b2cFormTitle | Form title for personal loans. | Vertaile lainatarjouksia helposti | No |
| b2bFormTitle | Form title for business loans. | Lainalaskuri – kilpailuta yrityslaina tästä | No |
| b2cLoanAmount | Default amount for personal loans. | 15000 | No |
| b2cLoanPeriod | Default period for personal loans. | 9 | No |
| b2cLoanMax | Maximum amount for personal loans. | 70000 | No |
| b2bLoanAmount | Default amount for business loans. | 50000 | No |
| b2bLoanPeriod | Default period for business loans. | 24 | No |
| b2bLoanMax | Maximum amount for business loans. | 10000000 | No |
| defaultLoanType | Defines whether the personal or business loan calculator is shown by default. Works only if type=’both’. | ”personal” | No |
| sendAmountPeriod | Whether to send amount and period as parameters. Options: ’true’ or ’false’. | ”true” | No |
| privacyPolicyUrl | Link to the privacy policy. | No | |
| privacyPolicyText | Short privacy policy message. | No | |
| hidePrivacyPolicy | Whether to hide privacyPolicy. | No | |
| hideSplashScreen | Whether to hide the splashScreen. | No | |
| splashLogo | Logo shown in the redirection notification. | No | |
| stage | Test mode option that does not redirect the user to the form. Options: ’test’. | No | |
| theme | Defines whether the form is styled. Options: ’Sortter’ or ’custom’. | Sortter | No |
| hideLogo | Whether to hide the Sortter logo. | No | |
| type | Defines if the form shows personal, business, or both loan calculators. Options: ’personal’, ’corporate’, ’both’. | ”personal” | No |
| utm | Defines desired UTM parameters for redirection. | No | |
| titleColor | Set the color for header texts. | #041264 | No |
| labelColor | Set the color for label elements. | #041264 | No |
| highlightColor | Set the form highlight color. | #586bea | No |
| buttonColor | Set the form button color. | #586bea | No |
| logoLink | Set the logo image link URL. | No | |
| logoSrc | Set your desired logo image. | No | |
| bannerLink | Set the banner image URL. | No | |
| fontFamily | Set the font family for the form. | No | |
| locale | Set the form language. Options: ’fi’ or ’ee’. | fi | No |