DatHuis stelt je in staat om een widget op je site te plaatsen die diverse leadtools kan bevatten. Bijvoorbeeld het waarderapport, een tool om je maandlasten te bepalen, of je maximale hypotheekbedrag berekenen.

Dit document beschrijft de integratie van de widget op je website. Onderaan deze pagina vind je de mogelijkheden voor het aanroepen van een specifieke tool in de widget. Gebruik deze mogelijkheden om bijvoorbeeld naast de vraagprijs van een woonobject een link naar 'Kan ik dit huis betalen?' te plaatsen.

Welke tools beschikbaar zijn via jouw widget, regel je via het dashboard.

De widget:

Widget van DatHuis

De widget uitgeklapt:

De widget uitgeklapt

Voordat je de widget aan je site toevoegt kan je deze aanpassen aan je huisstijl. Hierna kan je de code aan jouw site toevoegen. Hiervoor zijn twee mogelijkheden

  1. Handmatig toe (laten) voegen aan de broncode van je site.

  2. Activeren via Google Tag Manager.

In deze handleiding laten we zien hoe je de huisstijl instelt voor de widget en hoe je deze toevoegt aan je site.


1. Je widget configureren

Om de widget aan te passen aan jouw huisstijl, dien je deze eenmalig te configureren. Volg hiervoor deze stappen:

Stap 1:

Log in op het dashboard van jouw account via: https://app.dathuis.nl/login.

Stap 2:

Klik rechtsboven op je naam en selecteer de optie Widget in het menu dat zichtbaar wordt.

Stap 3:

Upload je logo bij de sectie logo. Toegestane formaten zijn: JPG, JPEG, PNG, GIF en SVG. Gebruik bij voorkeur een afmeting van 300 (b) x 210 (h) pixels.

Stap 4:

Stel de kleuren in. Onder in het beeld zie je een voorbeeld van jouw widget, zodat je direct de aanpassingen kunt controleren. Klik op een van de balkjes met kleuren om de kleur aan te passen. Dat kan via de schuifjes, of door een kleurcode op te geven (hex).

Stap 5:

De widget wordt onder in beeld getoond. Bij de instelling Positie kan je aangeven of de widget links of rechts wordt getoond.

Stap 6:

Met de instelling Z-index regel je de positie van de widget als deze is opengeklapt. Deze kan je op de standaard waarde laten staan. Als blijkt dat andere elementen van je website de opengeklapte widget overlappen, dan kan je deze waarde verhogen tot maximaal 9999999.

Stap 7:

Als je alles hebt ingesteld, sla dan de wijzigingen op via de knop Opslaan.


2. Je widget op je website plaatsen

Optie 1: De widget handmatig aan je site toevoegen

Stap 1:

Kopieer de scriptcode via de widgetpagina.

Script kopieëren

Stap 2:

Zorg dat het script in de broncode van elke pagina wordt geplaatst voor de closing head-tag. Afhankelijk van je website (CMS) kan je dit vaak op één plaats regelen voor je hele site.

Als je niet weet hoe je dat doet, vraag je webbouwer dit voor je in te stellen. Stuur hem / haar hiervoor de scriptcode met de vraag om dit op elke pagina te laden in de broncode voor de closing head-tag.

Stap 3:

Herlaad je website en controleer of de widget wordt getoond en hoe deze er uitziet als je hem openklapt. Mochten de widget niet helemaal zichtbaar zijn, verhoog dan de waarde van de Z-index via de instellingen van je widget in het dashboard van je DatHuis-account.

Let op:

Als je via het dashboard wijzigingen aanbrengt in je logo, de kleuren, positie of de Z-index, dan hoef je de code niet opnieuw te uploaden! Je wijzigingen zijn direct zichtbaar (wel even je pagina herladen).


Optie 2: De widget via Google Tag Manager activeren op je website

Maak je gebruik van Google Tag Manager (TGM) dan kan je die omgeving gebruiken om het script te activeren op jouw site.

Stap 1:

Kopieer de scriptcode via de widgetpagina.

Script kopieeren

Stap 2:

Open Google Tag Manager en ga naar de container van jouw website.

Stap 3:

Klik op Tags.

Stap 4:

Klik op Nieuw.

Stap 5:

Geef je tag een naam. Bijvoorbeeld Widget DatHuis.

Stap 6:

Klik op het icoon van Tagconfiguratie.

Stap 7:

Selecteer rechts de optie Aangepaste HTML.

Aangepaste HTML

Stap 8:

Kopieer in het vlak HTML het script.

Script invoegen

Stap 9:

Klik op het icoon bij Triggers.

Stap 10:

Kies de instelling All Pages.

Stap 11:

Klik op Opslaan.

Stap 12:

Klik op Verzenden en daarna op Publiceren om je aanpassingen door te voeren op je website.

Stap 13:

Herlaad je website en controleer of de widget wordt getoond en hoe deze er uitziet als je hem openklapt.

Mocht de opengeklapte widget niet helemaal zichtbaar zijn, verhoog dan de waarde van de Z-index via de instellingen van je widget in het dashboard van je DatHuis-account. Na het aanpassen van de Z-index hoef je de code niet opnieuw te uploaden. Je wijzigingen zijn direct actief (wel even je pagina herladen).

Bekijk ook de video met alle stappen:


Code snippets

Je kunt ook de widget direct aanroepen met een link en openen met een van de tools die binnen jouw abonnement beschikbaar is. Bijvoorbeeld de waardecheck, of de maximale hypotheekberekening.

Dit doe je door een parameter te plaatsen achter de url van je website. Bijvoorbeeld:

https://www.jewebsite.nl/?dhuwParams=%7B%22path%22%3A%22%2Fapps%2Fbb-wc%22%7D

De beschikbare parameters voor de waardecheck:

Brainbay waardechek:
?dhuwParams=%7B%22path%22%3A%22%2Fapps%2Fbb-wc%22%7D

Avix waardecheck:

?dhuwParams=%7B%22path%22%3A%22%2Fapps%2Fm-wc%22%7D

De beschikbare parameters voor de tools van de Hypotheekbond:

Kan ik dat huis betalen:

?dhuwParams=%7B%22path%22%3A%22%2Fapps%2Fkidwk%22%7D

Wat worden mijn maandlasten:

?dhuwParams=%7B%22path%22%3A%22%2Fapps%2Flooptijdrente%22%7D

Wat is mijn maximale hypotheek:

?dhuwParams=%7B%22path%22%3A%22%2Fapps%2Fmax-mortgage%22%7D

Wat kan ik besparen op mijn hypotheek:

?dhuwParams=%7B%22path%22%3A%22%2Fapps%2Fsavings-check%22%7D

Een diepere integratie is mogelijk door direct een tool in de widget aan te roepen. Hiermee kan je een tool in de widget openen zonder de pagina te verversen.

Op Codepen.io staat een voorbeeld van de benodigde code.

Heb je het antwoord gevonden?