Sprawdź jakie to proste

Dokumentacja techniczna
widgetów finansowych

Kompleksowy przewodnik po instalacji i konfiguracji wyspecjalizowanych narzędzi analizy finansowej Speedfin. Buduj zaufanie klientów dzięki precyzyjnym obliczeniom w czasie rzeczywistym.

01. Opis techniczny

Lekkość kodu, potęga analizy.

Nasze widgety to mikrousługi frontendowe (~200kb), które dostarczają pełną funkcjonalność bankowych systemów transakcyjnych bezpośrednio na Twoją stronę.

⚠

Uwaga instalacyjna

Wymagane są uprawnienia do edycji kodu HTML strony oraz możliwość osadzania zewnętrznych skryptów JS.

⚡

Wydajność

Optymalizacja pod kątem Core Web Vitals. Wykorzystanie CSS3 Grid i Flexbox zapewnia błyskawiczne renderowanie.

📱

Kompatybilność

Wsparcie dla Chrome 92+, Firefox 90+, Safari 14.1+ oraz systemów mobilnych iOS/Android.

Dostępne moduły

💳 Zdolność

🏠 Hipoteczny

💰 Gotówkowy

🏢 Firmowy

02. Instalacja

Wybierz swoją ścieżkę wdrożenia

Instalacja widgetów poprzez automatyczny loader

Ten sposób osadzania widgetu sprowadza się do edycji treści strony oraz wstawienia prostego kodu HTML.

Po dodaniu kodu loader automatycznie zainicjuje widget i wyświetli go w miejscu, w którym został umieszczony.

Przykład instalacji widgetu gotówkowego:


<script
  src="https://gotowka.kalkulator-hipoteczny.online/embed.js"
  data-campaign-id="BlAcK_FrIdAy"
  data-client="default"></script>

Powyższy kod w miejscu jego wpisania automatycznie wstawi widget gotówkowy

Przykład instalacji widgetu kredytu hipotecznego w wersji mini:


<script
  src="https://hipoteka.kalkulator-hipoteczny.online/embed.js"
  data-campaign-id="BlAcK_FrIdAy"
  data-client="default"
  data-secure-value="450000"
  data-mode="mini"></script>

Parametry konfiguracji

Wszystkie dodatkowe parametry dla widgetów należy wpisywać z przedrostkiem data-.

Przykład: aby dodać parametr:


secure-value="350000"

należy użyć:


data-secure-value="350000"

Adresy automatycznych loaderów:


https://zdolnosc.kalkulator-hipoteczny.online/embed.js

https://firmowka.kalkulator-hipoteczny.online/embed.js

https://dlaflippera.kalkulator-hipoteczny.online/embed.js

https://gotowka.kalkulator-hipoteczny.online/embed.js

https://hipoteka.kalkulator-hipoteczny.online/embed.js

https://dlainwestora.kalkulator-hipoteczny.online/embed.js

Konfiguracja klienta i trybu pracy

W miejscu wartości default należy wpisać ustaloną z usługodawcą nazwę klienta.


data-client="default"

W przypadku widgetu kredytu hipotecznego należy dodatkowo określić tryb działania widgetu:


data-mode="full"

lub


data-mode="mini"

Pozostała konfiguracja widgetów pozostaje po stronie usługodawcy.

Instalacja manualna jest również prosta, jednak prowadzona w sposób bardziej świadomy i daje większe możliwości dostosowania widgetu do własnych potrzeb. Sprowadza się do umieszczenia w sekcji <head> ścieżki do wybranego widgetu wraz z konfiguracją wyglądu oraz ustawieniami początkowymi. Następnie w miejscu, w którym ma pojawić się widget, należy umieścić tag:


<speedfin-widget></speedfin-widget>

z opcjonalnymi parametrami konfiguracji.

Wyjątkiem jest widget mortgage-mini, dla którego część parametrów jest wymagana (opis znajduje się poniżej).

Przykład instalacji widgetu w kodzie HTML:


<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" 
      content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <link rel="icon" 
      href="favicon.ico"/>
    <title>
      Strona docelowa
    </title>
    <!-- domyślna globalna konfiguracja widgetów na stronie -->
    <script 
      src="https://hipoteka.kalkulator-hipoteczny.online/assets/config/default.js">
    </script>
    <!-- aplikacja widgetu -->
<script
      defer="defer"
      type="module"
      src="https://hipoteka.kalkulator-hipoteczny.online/js/app.js">
    </script>
    <!-- domyślny wygląd widgetu -->
    <link
      href="https://hipoteka.kalkulator-hipoteczny.online/css/app.css"
      rel="stylesheet"
    />

  </head>
  <body>
    <div class="main">
      <h1>
        to strona www
      </h1>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        Mimque, nihils magnam quod?
      </p>
      ---
      <div>
        <speedfin-widget
          campaign-id="BlAcK_FrIdAy"
          mode="full"
          title="Widget kredytu hipotecznego"
          contact-title="Napisz do nas"
        >
        </speedfin-widget>
        <!-- przykład osadzenia widgetu w kodzie wraz z parametrami -->
      </div>
      ---
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        Mimque, nihil s magnam quod? </p>
    </div>
  </body>
</html>

Parametry widgetu

Parametry konfiguracji przekazywane są bezpośrednio jako atrybuty w tagu <speedfin-widget>.

Przykład:


<speedfin-widget
  campaign-id="BlAcK_FrIdAy"
  mode="full"
  title="Widget kredytu hipotecznego"
  contact-title="Napisz do nas"
>

</speedfin-widget>

Własna zawartość formularza kontaktowego

W przypadku instalacji manualnej istnieje możliwość osadzenia własnego kontentu w oknie formularza kontaktowego.

W tym celu należy wywołać widget, a pomiędzy jego tagami umieścić własną zawartość, która zostanie wyświetlona zamiast standardowego formularza kontaktowego:


<speedfin-widget
  campaign-id="BlAcK_FrIdAy"
  mode="full"
  title="Widget kredytu hipotecznego"
  contact-title="Napisz do nas"
>

  --> Własna treść <--

</speedfin-widget>

Własną treścią może być:

spersonalizowany formularz kontaktowy,
baner informacyjny,
link do innej strony kontaktowej,
dowolny własny element HTML dostosowany do potrzeb strony.

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="https://cdn.speedfin.pl/css/main.css">
</head>

<body>

  <!-- Miejsce na widget -->

  <speedfin-widget 
    type="hipoteka" 
    theme="light" 
    data-token="XYZ-123">

    <div>
      Ładowanie kalkulatora...
    </div>

  </speedfin-widget>


  <!-- Inicjalizacja -->

  <script src="https://cdn.speedfin.pl/lib/main.js">
  </script>

</body>

</html>

03. Widgety i ich parametry

Szczegółowa referencja atrybutów

Parametry są wspólne dla większości modułów.

Instalacja widgetu


<script defer src="https://zdolnosc.kalkulator-hipoteczny.online/js/app.js"></script>
<link href="https://zdolnosc.kalkulator-hipoteczny.online/css/app.css" rel="stylesheet">
<script src="https://zdolnosc.kalkulator-hipoteczny.online/assets/config/default.js"></script>

<speedfin-widget
    title="widget kalkulatora zdolności kredytowej"
    contact-title="napisz do nas"
></speedfin-widget>

Parametry widgetu

title	Tytuł widgetu wyświetlany nad filtrami głównymi.	Nie	""
contact-title	Nagłówek formularza kontaktowego.	Nie	""
filter-button	Tekst przycisku pod filtrami.	Nie	Sprawdź
result-button	Tekst przycisku przy prezentowanych produktach.	Nie	Umów się
contact-form-button	Tekst przycisku wysyłającego formularz kontaktowy.	Nie	Wyślij
campaign-id	Identyfikator kampanii lub źródła pozyskania leada. Pozwala rozróżnić, z którego widgetu pochodzą dane klienta.	Zalecany	default
max-ltv	Maksymalna wartość LTV (90%).	Nie	90%
min-contribution	Minimalny wkład własny (10%).	Nie	10%
property-type	Typ nieruchomości.	Nie	""

Instalacja widgetu


<script defer="defer" src="https://hipoteka.kalkulator-hipoteczny.online/js/app.js"></script>
<link href="https://hipoteka.kalkulator-hipoteczny.online/css/app.css" rel="stylesheet">
<script src="https://hipoteka.kalkulator-hipoteczny.online/assets/config/default.js"></script>

<speedfin-widget
    mode="full"
    title="widget kredytów hipotecznych"
    contact-title="napisz do nas"
></speedfin-widget>

Parametry widgetu

mode	Parametr określa tryb pracy widgetu. Uwaga – ustawienie trybu pracy na mini spowoduje konieczność ustawienia dodatkowych parametrów wymaganych (opisane w sekcji „Widget kredytu hipotecznego mini"). Wartości: full.	Nie	full
title	Tytuł widgetu, wyświetlany nad filtrami głównymi.	Nie	""
contact-title	Tytuł wyświetlany nad formularzem leadowym/kontaktowym.	Nie	""
filter-button	Napis wyświetlany na klawiszu pod filtrami głównymi.	Nie	Sprawdź
result-button	Napis wyświetlany na klawiszu produktu.	Nie	Umów się
contact-form-button	Napis wyświetlany w formularzu kontaktowym.	Nie	Wyślij
campaign-id	Nazwa kampanii, w ramach której pracuje widget, lub element identyfikacyjny w procesie zbierania danych klienta (lead).	Zalecany	default

* Uwaga – widget działa w trybie nasłuchu. Jeśli w pasku adresu URL pojawią się parametry creditValue, secureValue oraz creditPeriod – widget pobierze je i ustawi się zgodnie z ich wartościami.

Instalacja widgetu

Wariant instalacji 1 (jawnie określamy wartość secure-value):


<script defer="defer" src="https://hipoteka.kalkulator-hipoteczny.online/js/app.js"></script>
<link href="https://hipoteka.kalkulator-hipoteczny.online/css/app.css" rel="stylesheet">
<script src="https://hipoteka.kalkulator-hipoteczny.online/assets/config/default.js"></script>

<speedfin-widget
    mode="mini"
    secure-value="350000"
    check-path-url="https://kalkulator-hipoteczny.online/widget-kalkulatora-hipotecznego/"
></speedfin-widget>

Wariant instalacji 2 (określamy indeks wartości secure-value z tablicy widgetPrices):


window.widgetPrices = [
    { price: 210000 },
    { price: 310000 }, // index 1
    { price: 410000 },
    { price: 510000 },
];

<speedfin-widget
    mode="mini"
    secure-value="350000"
    price-index="1"
    check-path-url="https://kalkulator-hipoteczny.online/widget-kalkulatora-hipotecznego/"
></speedfin-widget>
<!-- w tym przypadku secure-value przyjmie wartość 310000 z indeksu 1 -->

Drugi sposób osadzania ma zastosowanie w przypadku wielu instancji widgetu na stronie, kiedy wiele cen można pobrać jako jedną tablicę z CRM-u.

Parametry widgetu

mode	Parametr określa tryb pracy. Wartość mini oznacza, że widget działa w trybie kalkulatora dla konkretnego produktu. W tym trybie UI ograniczony jest do prezentacji podstawowych danych i statystyk z API oraz daje możliwość modyfikowania parametrów wysyłanych do API (wkład własny i okres kredytowania).	Tak	full
secure-value	Wartość nieruchomości, pod którą dokonywane są obliczenia.	Tak	350000
check-path-url	Adres widgetu hipotecznego uruchomionego z parametrem mode="full". W czasie przekierowania do adresu dodawane są parametry filtrów, które odbierane są przez „duży" widget i procesowane „w locie" przez API.	Nie	–

Instalacja widgetu


<script defer src="https://gotowka.kalkulator-hipoteczny.online/js/app.js"></script>

<link href="https://gotowka.kalkulator-hipoteczny.online/css/app.css" rel="stylesheet">

<script src="https://gotowka.kalkulator-hipoteczny.online/assets/config/default.js"></script>


<speedfin-widget
    title="widget pożyczek gotówkowych"
    contact-title="napisz do nas"
></speedfin-widget>

Parametry widgetu

title	Tytuł widgetu wyświetlany nad filtrami głównymi.	Nie	""
contact-title	Tytuł wyświetlany nad formularzem leadowym/kontaktowym.	Nie	""
filter-button	Napis wyświetlany na przycisku pod filtrami głównymi.	Nie	Sprawdź
result-button	Napis wyświetlany na przycisku produktu.	Nie	Umów się
contact-form-button	Napis wyświetlany w formularzu kontaktowym.	Nie	Wyślij
campaign-id	Nazwa kampanii lub identyfikator procesu zbierania danych klienta (lead).	Zalecany	default

04. Globalna konfiguracja

Zarządzaj całym ekosystemem
z jednego miejsca.

Widgety posiadają dwa rodzaje konfiguracji: lokalną i globalną (globalna w rozumieniu 1 strony html – każda strona html może mieć własną globalną). Konfiguracje lokalną opisują atrybuty każdego widgetu np title, contact-title itp przykład poniżej:
speedfin-widget title=”widget kredytu firmowego” contact-title=”napisz do nas” >speedfin-widget>

Drugi typ konfiguracji to globalna i działa ona w ramach wszystkich instancji widgetu na jednej stronie html. Konfiguracja globalna zawiera ustawienia wspólne oraz takie, które ze względu na swoją długość byłyby trudne do wpisania jako atrybut. Poniżej przykład produkcyjnej konfiguracji globalnej:

config.js

#config.js
window.widgetConfig = {
  resultInfo: `** Oprocentowanie zależy od warunków, które będą obowiązywać w tym czasie...`,
  sendType: "internalSF",
  sendUrlPath: "",
  sendMethod: "",
  sendFormat: "",
  internalModalFormPic:
    "https://img.freepik.com/premium-photo/close-up-business-woman-real-estate-agent-giving-house-key-after-signing-agreement-buying-house-bank-manager-real-estate-concept_3535-808.jpg?w=1380",
  contactFormPolicy: `Klikając przycisk „WYŚLIJ” akceptujesz Politykę prywatności`,
  contactFormInfo: `Wyrażam zgodę na ...`,
  reCaptcha: "NkxlcTN6TW5BQUFBQUZFZmduWFZLTU80azRSNg==",
  readToken: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE3MDkxMTUyNDYsImV4cCI6MjA2OTExNTI0Niwicm9sZXMiOlsiUk9MRV9BRFZJU0VSIiwiUk9MRV9BUElfTU9SVEdBR0UiLCJST0xFX0FQSV9NT05FWV9MT0FOIiwiUk9MRV9BUElfQ09NUEFOWV9MT0FOIiwiUk9MRV9BUElfTEVBRCIsIlJPTEVfVVNFUiJdLCJ1c2VybmFtZSI6InNmd2lkZ2V0QGFwaS5wbCIsImlkIjoxMTExNzgxMSwiZmlybVV1aWQiOiJjNWE2NmJhMi01NjE1LTR",
  sendToken: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE3MDkxMTUyNDYsImV4cCI6MjA2OTExNTI0Niwicm9sZXMiOlsiUk9MRV9BRFZJU0VSIiwiUk9MRV9BUElfTU9SVEdBR0UiLCJST0xFX0FQSV9NT05FWV9MT0FOIiwiUk9MRV9BUElfQ09NUEFOWV9MT0FOIiwiUk9MRV9BUElfTEVBRCIsIlJPTEVfVVNFUiJdLCJ1c2VybmFtZSI6InNmd2lkZ2V0QGFwaS5wbCIsImlkIjoxMTExNzgxMSwiZmlybVV1aWQiOiJjNWE2NmJhMi01NjE1LTP6WiwU",
  sendTokenType: "bearer",
};

Opis parametrów konfiguracji globalnej

Parametr	Opis	Wartość	Wartość domyślna
`resultInfo`	Wartość jako akapit informacyjny może być prezentowana pod listą wyników jako dodatkowe podsumowanie wyszukiwania.	string lub empty string	""
`sendType`	Wartość określa, w jaki sposób widget przekaże dane do formularza kontaktowego lub endpointu leadowego. Dostępne wartości: internalSF – dane z filtrów odbierze wewnętrzny formularz kontaktowy (HTML), a po wypełnieniu danymi użytkownika prześle je do systemu Speedfin. W tym przypadku wymagany jest aktualny sendToken oraz indywidualna wartość campaign-id widgetu. internalForm – dane z filtrów odbierze wewnętrzny formularz kontaktowy (HTML), a po wypełnieniu danymi klienta prześle je na wskazany w konfiguracji endpoint. Dla tej opcji należy określić sendUrlPath, sendMethod, sendFormat oraz identyfikator danych campaign-id. toUrlParams – dane z filtrów (bez danych klienta) przesłane zostaną na adres zdefiniowany w zmiennej sendUrlPath, np.: https://kalkulator-hipoteczny.online/kontakt-test/ Dla tej opcji wymagane jest określenie formatu zapisu filtrów sendFormat (np. "string") oraz metody wysłania danych sendMethod (np. "GET"). Po kliknięciu klawisza „UMÓW SIĘ” widget nie pokaże formularza kontaktowego, tylko otworzy stronę: https://kalkulator-hipoteczny.online/kontakt-test/?filtr1=123&filtr2=456&filtr3=789 toHostFunction – dane z filtrów zostaną przekazane jako parametr do funkcji sfShowModal zdefiniowanej w pliku konfiguracyjnym: `window.sfShowModal = (data) => {};` Funkcja sfShowModal wywoływana jest po kliknięciu klawisza „UMÓW SIĘ”.	internalSF internalForm toUrlParams toHostFunction	""
`sendUrlPath`	Wartość określa adres strony odbierającej dane filtrów lub dane kontaktowe/leadowe. Dla sendType: "internalSF" wartość sendUrlPath nie jest brana pod uwagę i powinna być równa "".	adres URL	""
`sendMethod`	Wartość określa sposób przesyłania danych. Obecnie obsługiwana jest metoda: get Dla sendType: "internalSF" wartość sendMethod nie jest brana pod uwagę i powinna być równa "".	"get"	""
`sendFormat`	Wartość określa format przesyłania danych o ustawieniach filtrów. Obecnie obsługiwany jest format: string Dla sendType: "internalSF" wartość sendFormat nie jest brana pod uwagę i powinna być równa "".	"string"	""
`internalModalFormPic`	Wartość określa adres URL do obrazka, który może być pokazany w wewnętrznym formularzu kontaktowym.	adres URL	""
`contactFormPolicy`	Wartość jako akapit informacyjny może służyć do prezentowania informacji o polityce prywatności pod formularzem kontaktowym.	tekst informacyjny	""
`contactFormInfo`	Wartość jako akapit informacyjny wyświetlany obok checkboxa potwierdzającego zapoznanie się z regulaminem, polityką prywatności lub zgodą na przetwarzanie danych.	tekst informacyjny	""
`reCaptcha`	Wartość zawiera klucz Google reCaptcha do zabezpieczenia wewnętrznego formularza kontaktowego.	klucz Google reCaptcha	""
`readToken`	Wartość zawiera indywidualny token w formacie JWT do komunikacji z API Speedfin.	JWT token	""
`sendToken`	Wartość zawiera indywidualny token w formacie JWT do tworzenia leadów w środowisku docelowym.	JWT token	""
`sendTokenType`	Wartość określa typ tokena, którym będzie autoryzowany zapis leada na docelowym endpoincie.	"bearer" "api-key"	"bearer"

UWAGA – pliki konfiguracji mogą być przechowywane na serwerach Speedfin i w razie potrzeby automatycznie aktualizowane

Dokumentacja techniczna
widgetów finansowych

01. Opis techniczny

Lekkość kodu, potęga analizy.

Wydajność

Kompatybilność

Dostępne moduły

02. Instalacja

Wybierz swoją ścieżkę wdrożenia

Instalacja widgetów poprzez automatyczny loader

Przykład instalacji widgetu gotówkowego:

Przykład instalacji widgetu kredytu hipotecznego w wersji mini:

Parametry konfiguracji

Adresy automatycznych loaderów:

Konfiguracja klienta i trybu pracy

Przykład instalacji widgetu w kodzie HTML:

Parametry widgetu

Własna zawartość formularza kontaktowego

03. Widgety i ich parametry

Szczegółowa referencja atrybutów

Widget zdolności kredytowej

Instalacja widgetu

Parametry widgetu

Widget kredytu hipotecznego

Instalacja widgetu

Parametry widgetu

Widget kredytu hipotecznego mini

Instalacja widgetu

Parametry widgetu

Widget pożyczki gotówkowej

Instalacja widgetu

Parametry widgetu

04. Globalna konfiguracja

Zarządzaj całym ekosystemem
z jednego miejsca.

Opis parametrów konfiguracji globalnej

Gotowy do implementacji?

Dokumentacja techniczna widgetów finansowych

01. Opis techniczny

Lekkość kodu, potęga analizy.

Wydajność

Kompatybilność

Dostępne moduły

02. Instalacja

Wybierz swoją ścieżkę wdrożenia

Instalacja widgetów poprzez automatyczny loader

Przykład instalacji widgetu gotówkowego:

Przykład instalacji widgetu kredytu hipotecznego w wersji mini:

Parametry konfiguracji

Adresy automatycznych loaderów:

Konfiguracja klienta i trybu pracy

Przykład instalacji widgetu w kodzie HTML:

Parametry widgetu

Własna zawartość formularza kontaktowego

03. Widgety i ich parametry

Szczegółowa referencja atrybutów

Widget zdolności kredytowej

Instalacja widgetu

Parametry widgetu

Widget kredytu hipotecznego

Instalacja widgetu

Parametry widgetu

Widget kredytu hipotecznego mini

Instalacja widgetu

Parametry widgetu

Widget pożyczki gotówkowej

Instalacja widgetu

Parametry widgetu

04. Globalna konfiguracja

Zarządzaj całym ekosystemem z jednego miejsca.

Opis parametrów konfiguracji globalnej

Gotowy do implementacji?

Dokumentacja techniczna
widgetów finansowych

Zarządzaj całym ekosystemem
z jednego miejsca.