Skip to content

JS-API

Die Beschreibung entspricht der JS-API-Version 1.1.

Einbindung

Zur Einbindung muss die JavaScript-Datei https://www.maklerinfo.biz/js/api-1.1.js eingebunden werden. Dies kann über verschiedene Wege geschehen:

HTML

<script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js"></script>

JavaScript

var apiScript = document.createElement("script");
if(apiScript.addEventListener) {
    apiScript.addEventListener("load",function() {
    //...
    },false);
} else {
    apiScript.onreadystatechange=function() {
    if(this.readyState == "loaded" || this.readyState=="complete"){
        //...
    }
    };
}
apiScript.type = "text/javascript";
apiScript.src = "https://www.maklerinfo.biz/js/api-1.1.js";
document.getElementsByTagName("head")[0].appendChild(apiScript);

Konfiguration

Die API besitzt ein globales Konfigurations-Objekt, welches in folgende Namespaces unterteilt ist:

  • global (gilt für alle Modul)
  • rechner (gilt für alle Rechner)
  • spinner (gilt für alle Spinner)

Wird ein Modul erzeugt, werden dessen Optionen folgendermaßen in dieser Hierarchie zusammengesetzt:

  1. dem Konstruktor übergebene Optionen
  2. die dem Modul-Typ entsprechende Konfiguration
  3. der globalen Konfiguration

Folgende Parameter müssen zwingend global gesetzt werden.

Name Beschreibung
vermittler Ihre Vermittler-Nummer

Außerdem sollte der Spinner konfiguriert werden, da dieser keine Standardkonfiguration besitzt und somit unsichtbar ist.

Globale Konfiguration

Name Bescheibung Standardwert
vermittler Vermittler-Nummer
titlepattern Steuert das Setzten des Seitentitels, wobei {title} durch den Seitentitel des Moduls ersetzt wird. Durch das Setzen auf false wird dieses Verhalten deaktiviert [Originaltitel] ::
fixedHeaderHeight Numerische Angabe der Pixel welche definiert wie hoch ein möglicherweise fixed-positionierter Header der Seite ist.

Spinner

Name Beschreibung Standardwert
img Pfad zu einer Bild-Datei, welche als Spinner verwendet wird
styles Objekt mit CSS-Eigenschaften, welche dem Mutter-Container des Spinners übergeben werden {cursor:"progress"}
stylesImage CSS-Eigenschaften welche dem Bild-Container des Spinners übergeben werden {margin:"auto"}
wrapperClass Zusätzliche CSS-Klasse für den Mutter-Container
spinnerClass Zusätzliche CSS-Klasse für den Bild-Container

Rechner

Version 3

Name Bescheibung Standardwert
directorder Platziert einen Beantragen-Button direkt neben jedem Angebot false

Version 4

Name Bescheibung Standardwert
theme Theme des Rechners Fallback auf Mandanten-Theme

Setzen der Konfiguration

JavaScript

dio.api.Api.config.setOptions({global:{vermittler:"003542"} /** ... */})

JSON

Hier wird dem HTML-<script>-Tag, welches die JS-API einbindet, als innerHTML die Konfiguration übergeben.

<script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js">
{
    "global": {
    "vermittler": "003542"
    },
    "spinner": {
    "img": "https://example.com/spinner.gif"
    }
}
</script>

DioML

Alle Attribute, die nicht mit on oder do beginnen, werden als Option übergeben.
Komplexe Optionen müssen als JSON beginnend mit json dargestellt werden.

<dio:module option1="wert1" params="json{'param1':'wertParam1'}" />

Im Hash des Pfades zur JavaScript-Datei

Folgende Optionen lassen sich direkt an den Pfad anhängen:

Name
vermittler

<script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js#003542"></script>

Übergabe von Parametern

Parameter können über die Option params übergeben werden.

Rechner

Zusätzlich zu den Feldvorbelegungen im Angebotsformular können folgende Parameter an alle Rechner der entsprechenden Generation übergeben werden.

Version 3

Name Typ Beschreibung
Job_titel_button Object Gibt an welche Icons in der Titelleiste angezeigt werden sollen. Mgl. Werte: hilfe, drucken, filter, lexikon, speichern, oeffnen, dokumentation, tariffinder.
Job_titel_anzeige boolean Gibt an ob die Titel-Leiste ausgegeben werden soll.
Job_titel_zeile String Überschreibt den Titel.
Page_css_disabled boolean Blendet alle CSS-Dateien vom Server maklerinfo.biz aus.

Events

Event-Object

Den Callback-Funktionen wird als Argument ein Event-Object mit den folgenden Eigenschaften übergeben:

Name Beschreibung
type Typ des Events
options Objekt mit weiteren eventspezifischen Werten

Event Typen

Allgemein

Typ Beschreibung Optionen
ready Das Modul ist fertig geladen
resize Die Größe des Moduls hat sich verändert size: Object mit x für die Breite und y für die Höhe
title Der Seitentitel des Moduls title String

Rechner

Typ Beschreibung Optionen
quote Der Anwender befindet sich im Angebotsformular substep: Numerischer Wert für die Position des Unterschrittes
quotes Der Anwender befindet sich in der Angebotsliste substep: leer oder "covercomparison" falls der Deckungsvergleich geöffnet wurde
order Der Anwender befindet sich im Antragsformular substep: Numerischer Wert für die Position des Unterschrittes
conclusion Der Anwender hat den Antrag abgeschlossen contractId: Vertrags-ID, customerId: Kunden-ID

Hinzufügen von Events

JavaScript

Jedes Modul besitzt die folgenden Methoden zum Hinzufügen von Events:

Name Parameter Beschreibung
addEvent String event, Function callback Registriert einen Eventlistener
addEvents Object events Fügt alle im übergebenen Objekt enthaltenen Events hinzu, wobei key das Event ist und value die Callback-Funktion ist
module.addEvents({
    ready:function(e){
    //...
    }
});

DioML

Die Inhalte von Attributen die mit on beginnen werden mittels der JavaScript-"Funktion" als Events registriert. Das Event-Objekt wird als Parameter event übergeben.

<dio:module onready="alert(event.type)" />

Module instanziieren

JavaScript

new dio.api.Module(/* argumente */)

DioML

Wenn im ''''-Tag der Namespace ''http://docs.dionera.com/namespace/DioML'' angegeben wurde, wird das Dokument nach entsprechenden Tags der Module geparsed und die ensprechnenden Module werden erstellt.

<html xmlns:dioMLPrefix="http://docs.dionera.com/namespace/DioML">
  <!-- ... -->
  <body>
    <dioMLPrefix:module />
  </body>

Im Hash des Pfades zur JavaScript-Datei

Wird je Seitenaufruf die JS-API nur einmal eingesetzten und wird der Content nicht dynamisch nachgeladen, ist es möglich diese direkt einzubetten:

<html>
    <body>
    <script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js#003542/create/module"></script>
    </body>
</html>

Beispiele

Beispiel #1

Einbindung eines Vergleichsrechners mit JavaScript.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>JS-API Sample Calculator via JavaScript</title>
        <script type="text/javascript">

            function createRechner() {
                dio.api.Api.config.setOptions({
                    global: {
                        vermittler:"003542"
                    },
                    spinner: {
                        img : "https://www.example.com/spinner.gif"
                    }
                });
                new dio.api.Rechner("hundehaftpflicht").inject("calculator-container");
            }
            var apiScript = document.createElement("script");
            if(apiScript.addEventListener) {
                apiScript.addEventListener("load",createRechner,false);
            } else {
                apiScript.onreadystatechange = function() {
                    if (this.readyState == "loaded" || this.readyState == "complete") {
                        createRechner();
                    }
                };
            }
            apiScript.type = "text/javascript";
            apiScript.src = "https://www.maklerinfo.biz/js/api-1.1.js";
            document.getElementsByTagName("head")[0].appendChild(apiScript);
        </script>
    </head >
    <body>
        <div id="calculator-container" style="margin:0 auto; width:600px;"></div>
    </body>
</html>

Komplexe Konfiguration für alle Rechnergenerationen

dio.api.Api.config.setOptions({
    global:{
    vermittler:"003542"
    },
    rechner: {
    theme:"9c43", //Theme zur übergabe an die Rechner 4.0
    directorder:true, //Hinzufügen des Beantragenbuttons im Angebot in den Rechnern 3.0
    params: {
        Job_titel_button: {
        hilfe:false //Ausblenden des Hilfe Buttons in den Rechnern 3.0
        }
    }
    }
});

Beispiel #2

Einbindung eines Vergleichsrechners mit DioML.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:dio="http://docs.dionera.com/namespace/DioML">
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js#003542">
            {
                "spinner" : {
                    "img":"https://www.maklerinfo.biz/neu/data/img/loader.gif"
                }
            }
        </script>
    </head >
    <body>
        <div id="calculator-container" style="margin:0 auto;width:600px">
            <dio:rechner id="hundehaftpflicht" />
        </div>
    </body>
</html>

Beispiel #3

Vereinfachte Einbindung eines Vergleichsrechners. Der Pfad muss folgendermaßen aufgebaut werden:
[vermittler]/create/rechner/[rechner-id]/[theme]
([theme] ist optional.)
Achtung: Diese Art der Einbindung funktioniert nur direkt beim Seitenaufruf. Wenn der Vergleichsrechner bspw. via AJAX nachgeladen werden soll, nutzen Sie bitte die Einbindung via JS oder blauML.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>JS-API Sample Calculator via PathHash</title>
    </head >
    <body>
        <div id="calculator-container" style="margin:0 auto;width:600px">
                <script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js#003542/create/rechner/hundehaftpflicht"></script>
        </div>
    </body>
</html>

Beispiel #4

Einbindung eines Vergleichsrechners mit JS. Nach Abschluss des Vergleichsrechners wird ein alert(); ausgegeben. Dieser kann durch eine andere, beliebige JS-Aktion ersetzt werden.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js#003542"></script>
        <script type="text/javascript">
            new dio.api.Rechner("hundehaftpflicht")
                .addEvent("conclusion",function(e){
                        console.log("Vertrag-ID:", e.options.contractId);
                        console.log("Kunde-ID:", e.options.customerId);
                        alert("Vielen Dank für den Abschluss!");
                })
                .inject("calculator-container");
        </script>
    </head >
    <body>
        <div id="calculator-container" style="margin:0 auto; width:600px;"></div>
    </body>
</html>

Beispiel #5

Übergabe von Kundendaten wenn die Einbindung eines Vergleichsrechners mit JS erfolgt ist.

new dio.api.Rechner("hundehaftpflicht", {
    params: {
        Vertrag_Kunde_anrede: 2, //Frau
        Vertrag_Kunde_vorname: "Tina",
        Vertrag_Kunde_nachname: "Test",
        Vertrag_Kunde_geburtsdatum: 762566400, //02.03.1994 als unix timsestamp
        Vertrag_Kunde_strasse: "Zum Erfolg 1",
        Vertrag_Kunde_plz: "12345",
        Vertrag_Kunde_ort: "Berlinchen",
    }
})
.inject("calculator-container");