Hüttig & Rompf Snippets Dokumentation

Stand: Juli 2024

Auf dieser Seite:

Allgemeine Informationen

Was ist ein Snippet?

Snippets sind kleine Bausteine, die Sie auf Ihrer Webseite einbinden können, um diese mit Diensten, Rechnern und Formularen von Hüttig & Rompf auszustatten.

Die Funktionen der Snippets können unterschiedlich ausfallen, grundsätzlich binden Sie allerdings ein Javascript von Hüttig & Rompf ein, welches die komplette Logik für die Anzeige der Snippets auf Ihrer Webseite beinhaltet.
Als zweites Element platzieren Sie einen Embed Code, also einen Marker, der definiert, wo welches Snippet angezeigt werden soll.

Sie speichern das Snippet in Ihrem CMS (= Content Management System; wie z.B. Wordpress) bzw. laden Ihre Änderungen auf den Server hoch und sind fertig. Wir kümmern uns um alle Bilder, Schriften und ähnliche Elemente.

Einbindung

Alle Hüttig & Rompf Snippets bestehen aus zwei Teilen. Zum einen das Script, welches alle Funktionen enthält, und zum anderen einen Marker, welcher die Stelle auf der Webseite bestimmt und zusätzliche Konfiguration enthält.

Script

Dieses Script wird entweder direkt vor dem Marker eingefügt oder bei mehreren Snippets global im Head der Website. Für alle Rechner, Formulare und Tools wird das allgemeine Snippet benötigt.

Muster Beispiel. Beim Kopieren dürfen keine Leerzeichen im “src” Parameter sein:

Dieses Script lädt zum einen alle benötigten Daten, um das gewünschte Snippet darzustellen und bietet zusätzlich die Möglichkeit für Hüttig & Rompf GmbH nachzuvollziehen, auf welchen Seiten das Snippet angeboten wird. Dazu muss die “utm_campaign” immer gesetzt werden. Dies sollte für jede Webseite einzigartig sein. Auch dann wenn Sie das Snippet auf Ihren verschiedenen Projektseiten einbauen. Wählen Sie hierfür immer aussagekräftige Bezeichnungen, die eine Zuordnung bei Hüttig & Rompf einfach machen, wie z.B. der Name Ihrer Firma oder des Bauvorhabens.

Das Script kann immer nur einmal platziert werden. Bei mehrfachen Platzieren wird ein Fehler in der Konsole ausgegeben und es wird nur das zuerst eingebundene Script geladen. Dies kann zu Problemen mit der UTM Kampagne führen.

Marker

Der Marker sieht für jedes Snippet anders aus und hat verschiedene Einstellmöglichkeiten. Hier ein Beispiel für einen einfachen Kreditrechner mit Berater:

Muster Beispiel:

<script type="application/json" data-huettig-und-rompf-snippet>

{

"snippetType": "embedLarge",

"branch": {"preset": "58"},

"employee": {"preset": "119"}

}

</script>

"branch" und "employee" bekommen Sie von Ihrem Hüttig & Rompg Berater.

Im folgenden finden Sie verschiedene Snippets und die dazugehörigen Konfigurationen.

Einbindung Wordpress

Grundsätzlich empfehlen wir das einfügen das Scripts direkt in einem Child-Themen in der Header.php. Sollten Sie Divi, Elementor oder ähnliche Themes verwenden können Sie auch in den jeweiligen Einstellungen das Script dem Head hinzufügen.

Der Marker wird dann als Code/HTML Baustein in der Seite eingefügt. Vergessen Sie nicht die Platzhalter-Werte zu ersetzen.

Funktionen Snippet Script

Nach dem Einbinden werden mehrere Events ausgelöst.

init()

Beim initialen Aufruf werden alle benötigten Werte geladen. Darunter fallen zum Beispiel die aktuellen Zinssätze sowie ein Authentifizierungs-Token.
Das Token wird dazu genutzt, um den User zu identifizieren und sicherzustellen, dass es sich um einen echten Nutzer und keinen Bot handelt.
Zudem wird hier ein serverseitiger Tracking-Ping an Google Analytics 4 gesendet.

findAddress()

Die gegebene Postleitzahl, entweder über die Konfiguration oder bei branded Rechnern über den Code, wird mit der Datenbank abgeglichen, um sicherzustellen, dass die korrekten Nebenkosten berechnet werden.

origin()

Sammelt Daten für das Leadstool, um bei einem Lead (= komplett ausgefülltes Kontaktformular, welches abgesendet wurde) die Daten zuweisen zu können. Dabei wird die aktuelle Seite, Makler und Projekt übertragen. Keine Benutzerdaten zu diesem Zeitpunkt.

Snippets & Konfigurationen

Annuitätenrechner

Stellt einen ausführlichen Rechner dar, mit detaillierten Werten zur Finanzierung.

Snippet

Calculator-Preset Annuitätenrechner

propertyPrice	Setzt einen vorbelegten Kaufpreis.	Standard: 300000
capital	Setzt ein vorbelegten Darlehensbetrag.	Standard: Hälfte vom propertyPrice
rateFixationYears	Setzt die Sollzinsbindung.	Standard: 10	Erlaubte Werte: 5, 10, 15, 20
initialDeletion	Setzt die anfängliche Tilgung.	Standard: 0.0125	Erlaubte Werte: 0.01, 0.0125, 0.015, 0.02, 0.025, …. , 0.1
agentFee	Setzt die Makler Courtage in Prozent. Es kann immer Prozent oder fester Wert gesetzt werden.	Standard: null	Erlaubte Werte: 0.1 bis 10.0
agentFeeFixed	Setzt die Makler Courtage in Euro. Es kann immer Prozent oder fester Wert gesetzt werden.	Standard: null
specialSeoText	INTERN - Zeigt für die Baufinanzierungsseite einen abweichenden Text an.	Standard: false
branch	Setzt eine Niederlassung über die ID. Die Werte bekommen Sie von ihrem Hüttig & Rompf Ansprechpartner.
employee	Setzt einen Mitarbeiter über die ID. Die Werte bekommen Sie von ihrem Hüttig & Rompf Ansprechpartner.

Annuitätenrechner Klein

Stellt einen kleinen Rechner dar, mit detaillierten Werten zur Finanzierung. Den Rechner gibt es in verschiedenen Ausführungen:

Snippet Standard

"priceReadOnly": true,

} }

</script>

Calculator-Preset Annuitätenrechner klein

propertyPrice	Setzt einen vorbelegten Kaufpreis.	Standard: 300000
capital	Setzt ein vorbelegtes Eigenkapital.	Standard: Hälfte vom propertyPrice
rateFixationYears	Setzt die Sollzinsbindung.	Standard: 10	Erlaubte Werte: 5, 10, 15, 20
initialDeletion	Setzt die Anfängliche Tilgung.	Standard: 0.0125	Erlaubte Werte: 0.01, 0.0125, 0.015, 0.02, 0.025, …. , 0.1
agentFee	Setzt die Makler Courtage in Prozent. Es kann immer Prozent oder fester Wert gesetzt werden.	Standard: null	Erlaubte Werte: 0.1 bis 10.0
agentFeeFixed	Setzt die Makler Courtage in Euro. Es kann immer Prozent oder fester Wert gesetzt werden.	Standard: null
headline	Überschreibt die Rechner Überschrift
priceReadOnly	Bestimmt ob der Kaufpreis bearbeitbar ist für den Kunden	Standard: true

Snippet KfW

"priceReadOnly": true,

"kfwName": "KfW 153",

"kfwAmount": 120000,

"kfwInterest": 0.0148,

"kfwEffectiveInterest": 0.0151,

"kfwFixationYears": 10,

"kfwDeletion": 0.0302,

"kfwRate": 450,

"kfwHighlightText": "KfW-Förderung",

"kfwInfoText": "KfW-Förderung",

"kfwDisclaimerText": "KfW-Förderung" } }

</script>

Calculator-Preset KfW

propertyPrice	Setzt einen vorbelegten Kaufpreis.	Standard: 300000
capital	Setzt ein vorbelegtes Eigenkapital.	Standard: Hälfte vom propertyPrice
rateFixationYears	Setzt die Sollzinsbindung.	Standard: 10	Erlaubte Werte: 5, 10, 15, 20
initialDeletion	Setzt die Anfängliche Tilgung.	Standard: 0.0125	Erlaubte Werte: 0.01, 0.0125, 0.015, 0.02, 0.025, …. , 0.1
agentFee	Setzt die Makler Courtage in Prozent. Es kann immer Prozent oder fester Wert gesetzt werden.	Standard: null	Erlaubte Werte: 0.1 bis 10.0
agentFeeFixed	Setzt die Makler Courtage in Euro. Es kann immer Prozent oder fester Wert gesetzt werden.	Standard: null
headline	Überschreibt die Rechner Überschrift
priceReadOnly	Bestimmt ob der Kaufpreis bearbeitbar ist für den Kunden	Standard: true
kfwName	Wenn der KFW-Name angegeben wird, wird der Rechner zum KFW Rechner
kfwAmount	Höhe des verfügbaren KFW Betrags
kfwInterest	Zinsen des KFW Kredits
kfwEffectiveInterest	Effektiver Zinssatz des KFW Kredits
kfwFixationYears	KFW Sollzinsbindung
kfwDeletion	Anfängliche KFW Tilgung
kfwRate	Feste KFW Rate
kfwHighlightText	Hervorgehobener Text unter dem Berechnen-Button
kfwInfoText	Zusätzliche Informationen im Berechnungsbeispiel
kfwDisclaimerText	Rechtlicher Hinweistext

Kreditrechner

Alle aktuellen Einstellmöglichkeiten finden Sie auf unserer Online Marketing Seite.

Buttons & Links

Besucher Absprung

Um die Absprungrate für Makler und die Webseite zu reduzieren, sind die meisten Buttons und Links Modale. Das bedeutet dass sich PopUp Fenster auf der eigenen Seite öffnen und der User Ihre Website nicht verlassen muss. Somit verbleibt der Besucher auf der aktuellen Seite und erhöht somit die Verweildauer. Dies kann sich positiv auf das SEO Rating auswirken.

Angebot anfordern

In einem Modal wird ein Formular geöffnet. Nach dem Ausfüllen und Absenden werden alle Daten inklusive des Ergebnisses des Rechners an das Leadstool von Hüttig & Rompf geleitet. Ist die Postleitzahl, Niederlassung oder Berater bekannt, wird dies ebenso für die Zuordnung weitergeleitet. Die Daten werden ausschließlich an Hüttig & Rompf übermittelt.

Sprache

Hüttig & Rompf Rechner sind größtenteils auf Englisch übersetzt. Das Snippet richtet sich dabei nach der Sprache der Webseite, welche üblicherweise vom lang attribute im <html/> gesteuert wird. Formulare werden zum aktuellen Stand nur in Deutsch angeboten.

Datenverarbeitung

Standard Einbindung

Proxy

Für eine maximale Sicherheit für Ihre Kundendaten empfehlen wir die Verwendung unseres Webhub Proxy. Eine ausführliche Dokumentation dazu finden Sie hier.

Datenschutz

Wir übermitteln die Kundendaten SSL verschlüsselt zwischen Ihrer Webseite und unserem Server, die Formulare sind nach dem aktuellen technischen Stand gegen Hacking (CSRF etc.) geschützt.

Alle Snippets verfügen zudem über einen direkt ersichtlichen Link, der zumeist: “Datenschutzerklärung von Hüttig & Rompf öffnen”, oder lediglich “Datenschutz” genannt wird. Bei Klick auf diesen Link öffnet sich ein Modal, in dem der Benutzer die komplette Datenschutzerklärung von Hüttig & Rompf ansehen.

DSGVO

Um der DSGVO gerecht zu werden, empfehlen wir grundsätzlich die Snippets erst nach Akzeptieren des Consent/Cookie Banners zu laden. Sollte der Benutzer dem Laden externer Inhalte widersprechen, sollte ein Platzhalter dargestellt werden, welcher die Möglichkeit gibt, das Hüttig & Rompf Snippet nachzuladen. Der Text könnte folgendermaßen Formuliert sein:

Bei Klick wird der von Hüttig & Rompf GmbH bereitgestellter Inhalt von externen Servern geladen. Details siehe Datenschutzerklärung.

Datenschutz Snippet

Alle Infos zum Thema Datenschutz finden Sie hier.