Deze handleiding is alleen in het Engels beschikbaar. Kom je er niet uit? Laat het ons weten. Wij helpen je graag.
This document is separated in two sections:
1. The code snipped which has to be inserted on your website with the parameter documentation.
2. How to import it using Google Tag Manager.
1. The minimal code that has to be inserted on your website:
When talking about YOUR_ID, the end of your waarderapoort url is meant. For example, if your waarderapport url is waarderapport.dathuis.nl then dathuis.nl is your id.
<link rel="stylesheet" href="https://waarderapport.YOUR_ID/widget/dathuis.css">
<script>
DatHuis.pop('YOUR_ID', {
position: 'bottomRight',
backgroundColor: '#008AB0',
textColor: '#ffffff',
dismissTimeout: 1440
});
</script>
The possible parameters are:
Parameter description:
position: The position of the widget on the page.
backgroundColor: The background color of the widget.
textColor: The color of the text inside the widget as well as the border of the button.
dismissTimeout: If a user dismisses the widget, how many minutes will it stay hidden (E.g. 1440 = 1 day).
headerText: The text used as the header. A line break can be done with <br>.
subText: The text used as the subtext. A line break can be done with <br>.
buttonText: The text used inside the button.
mobile: Contains an object of properties which get applied to the widget if viewed in a small browser (E.g. mobile phone).
subTextHidden: If set to true will hide the subtext, making the whole widget smaller.
Example with all parameters set:
<link rel="stylesheet" href="https://waarderapport.YOUR_ID/widget/dathuis.css">
<script>
DatHuis.pop('YOUR_ID', {
position: 'bottomRight',
backgroundColor: '#008AB0',
textColor: '#ffffff',
headerText: 'WAT IS MIJN HUIS WAARD?',
subtext: 'Bereken eenvoudig de geschatte waarde van uw huis!',
buttonText: 'Bereken',
mobile: { subTextHidden: true },
});
</script>
2. Adding the widget using Google Tag Manager
Open Google Tag Manager and open the “Tag” panel.
Click on “New”
Enter a name for the tag e.g. “DatHuis widget” and click on the “Tag Configuration” pane.
Click on “Custom HTML”
Inser the code snipped with YOUR_ID changed to your website and all parameters added. Then click on the “Triggering” pane.
Add a new Trigger
Click on the “Trigger Configuraton” pane and select “Page View”.
Enter a name e.g. “DatHuis Trigger” and if not selected, set “This trigger fires on” to “All Page Views” and click “Save”.
Check if all entries are filled out correctly and hit “Save”
Click on “Submit” and then “Publish”. The Widget should now appear on your site.
