JS-API

Die Beschreibung entspicht 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.

NameBeschreibung
vermittlerIhre Vermittler-Nummer

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

Globale Konfiguration

NameBescheibungStandardwert
vermittlerVermittler-Nummer
titlepatternSteuert das Setzten des Seitentitels, wobei {title} durch den Seitentitel des Moduls ersetzt wird. Durch das Setzen auf false wird dieses Verhalten deaktiviert[Originaltitel] :: {title}
fixedHeaderHeightNumerische Angabe der Pixel welche definiert wie hoch ein möglicherweise fixed-positionierter Header der Seite ist.

Spinner

NameBeschreibungStandardwert
imgPfad zu einer Bild-Datei, welche als Spinner verwendet wird
stylesObjekt mit CSS-Eigenschaften, welche dem Mutter-Container des Spinners übergeben werden{cursor:„progress“}
stylesImageCSS-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

NameBescheibungStandardwert
directorderPlatziert einen Beantragen-Button direkt neben jedem Angebotfalse

Version 4

NameBescheibungStandardwert
themeTheme des RechnersFallback 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

NameTypBeschreibung
Job_titel_buttonObjectGibt an welche Icons in der Titelleiste angezeigt werden sollen. Mgl. Werte: hilfe, drucken, filter, lexikon, speichern, oeffnen, dokumentation, tariffinder.
Job_designintGibt an in welchem Layout die Ergebnisse erscheinen. 0 = einzeilig; 1 = zweizeilig mit der Logo der Gesellschaft; 3 = zweizeilig ohne Logo der Gesellschaft.
Job_titel_anzeigebooleanGibt an ob die Titel-Leiste ausgegeben werden soll.
Job_titel_zeileStringÜberschreibt den Titel.
Job_header_bild_anzeigebooleanBlendet das Bild unter dem Titel aus.
Page_css_disabledbooleanBlendet alle CSS-Dateien vom Server maklerinfo.biz aus.
Job_cssArrayFügt weitere CSS-Definitionen in die Website ein.
Page_css_replaceStringPfad zu einer CSS-Datei. Alle anderen Styles werden hierdurch ersetzt

Events

Event-Object

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

NameBeschreibung
typeTyp des Events
optionsObjekt mit weiteren eventspezifischen Werten

Event Typen

Allgemein

TypBeschreibungOptionen
readyDas Modul ist fertig geladen
resizeDie Größe des Moduls hat sich verändertsize: Object mit x für die Breite und y für die Höhe
titleDer Seitentitel des Modulstitle String

Rechner

TypBeschreibungOptionen
quoteDer Anwender befindet sich im AngebotsformularSubstep: Numerischer Wert für die Position des Unterschrittes
quotesDer Anwender befindet sich in der AngebotslisteSubstep: leer oder „covercomparison“ falls der Deckungsvergleich geöffnet wurde
orderDer Anwender befindet sich im AntragsformularSubstep: Numerischer Wert für die Position des Unterschrittes
conclusionDer Anwender hat den Antrag abgeschlossen

Hinzufügen von Events

JavaScript

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

NameParameterBeschreibung
addEventString event, Function callbackRegistriert einen Eventlistener
addEventsObject eventsFü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 <html>-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>
</html>

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(){
						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");