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:

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

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

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.

Optie 1: De widget handmatig aan je site toevoegen

Stap 1:

Kopieer de scriptcode via de widgetpagina.

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.

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.

Stap 8:

Kopieer in het vlak HTML het script.

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:

Je kunt ook een tool in de widget direct aanroepen (mits die binnen jouw abonnement beschikbaar is). Bijvoorbeeld de waardecheck, of de maximale hypotheekberekening. Een directe link is handig om bijvoorbeeld te plaatsen in een e-mailcampagne, nieuwsbrief of als link op jouw website.

Dit doe je door de 'deeplink' te kopiëren van een tools. Dit doe je als volgt:

Een diepere website integratie is mogelijk, waarmee je een tool in de widget kan openen zonder de pagina te verversen. Dit doe je met een stukje javascript.

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