Subsidy check
With the subsidy check, homeowners can gain personalized insight into available sustainability subsidies. The subsidy check uses Web Components. This makes them easy to embed on any platform that supports HTML and JavaScript.
First step
Let us know on which domain you want to embed the subsidy check. You can do this by sending an email to support@sobolt.com. We will ensure that our servers accept requests from your website. This is usually arranged the same working day.
To get started with the subsidy check, you need an agreement with Sobolt. Don't have one yet? Then you can contact the sales department via info@sobolt.com.
Embed
Place the following imports in the <head> tag.
<script type="module" src="https://static.sobolt.app/sobolt/sobolt.esm.js"></script>
<script nomodule="" src="https://static.sobolt.app/sobolt/sobolt.js"></script>
An extension of your website's content security policy may be necessary.
Contact your web administrator if the subsidy check does not work immediately.
The connect-src api.sobolt.app and script-src static.sobolt.app directives are required.
Then you are free to place the subsidy check on the page.
<sobolt-subsidiecheck></sobolt-subsidiecheck>
🎉 Congratulations! The subsidy check is now live and visible on your website.
Personalize
You can better align the subsidy check with the desired tone of voice and your own house style.
<sobolt-subsidiecheck
header="Subsidie voor jouw woning?"
subtitle="Vul je gegevens in en ontdek de mogelijkheden"
primary-color="#00007e"
peiljaar=2023
></sobolt-subsidiecheck>
The following fields are supported:
| Name | Description | HTML attribute | Type | Default value |
|---|---|---|---|---|
| Primary color | Main color of the color palette. Used for buttons, for example. | primary-color | string | #003ea6 |
| Secondary color | Supporting color, used for active elements, among other things. | secondary-color | string | #e0ecff |
| Background color | The background color of the widget | background-color | string | #f4f9ff |
| Font | If you use your own font, make sure it is already imported into the <head> tag of your page. | font-family | string | sans-serif |
| Title | The title on the first screen of the widget. | header | string | Subsidie voor jouw woning? |
| Subtitle | The subtitle on the first screen of the widget. | subtitle | string | Vul je gegevens in en ontdek de mogelijkheden |
| Branding | Determines whether the "In collaboration with Sobolt" branding is visible. | branding | boolean | true |
| Coverage area | A list of BAG-woonplaatsIdentificaties, municipalities, cities or "landelijk" (nationwide) where the subsidy check is available. Format as JSON array. | dekkings-gebied | string[] | [] |
| Postcode | Format 1234AB. Only applicable if this is known in advance and can be filled in automatically. | postcode | string | |
| House number | Only applicable if this is known in advance and can be filled in automatically. | huisnummer | number | |
| Ask Vereniging Eigen Huis | Whether to show the question related to Eigen Huis membership. | ask-vereniging-eigen-huis | boolean | false |
| Ask Rabobank Mortgage | Whether to show the question related to Rabobank Mortgages. | ask-vereniging-eigen-huis | boolean | false |
| Ask Low Income | Whether to show the question related to low income. | ask-income | boolean | false |
| Low Income Title | What text to use for the Low Income question title. | income-title | string | |
| Low Income Text | What text to use for the Low Income question text. | income-text | string | |
| Measure categories | What categories of measures should be shown in the widget. By default, everything is shown. Available options: Insulation, Adaptation | measure-categories | string |
Remove branding
If you have agreed with us that you may use the subsidy check without the "In collaboration with Sobolt" brand, you can easily remove it.
<sobolt-subsidiecheck
branding=false
></sobolt-subsidiecheck>
Removing the branding without our permission is against the terms of service.
Advanced
There are several advanced options available. This allows you to get more out of the subsidy check on your platform.
Prefill address details
If the address details are already known (for example in a 'My' environment), these can be set dynamically. The user will then skip the home screen.
Only enter the postcode and house number. If there is a house letter or addition, the user will be asked to choose the correct one. This eliminates input errors in house letter/addition.
<sobolt-subsidiecheck
postcode="3012NJ"
house number="268"
></sobolt-subsidiecheck>
Custom CSS
This allows the subsidy check to be personalized even further.
Changing the style of the subsidy check with custom CSS is entirely at your own risk. See Personalize for the supported style adjustments.
<sobolt-subsidiecheck
custom-style='{
"--button-border-radius": "0px",
"--card-border-radius": "0px",
"--text-border-radius": "0px",
"--widget-border-radius": "0px"
}'
></sobolt-subsidiecheck>
Iframe embedding
Although we strongly recommend using the web component solution,
it is technically possible to embed the subsidy check via an <iframe> tag.
Because the subsidy check expands as it is being filled out, it is necessary
to provide sufficient space. You can also use iframeResizer.js.
This allows the iframe element to scale with its content.
You can request the EMBED_URL for your page via support@sobolt.com.
<iframe
id="subsidiecheck"
title="Subsidy check home insulation"
src="EMBED_URL"
style="border:none;"
></iframe>
<script src="[https://static.sobolt.app/sobolt/iframeResizer.min.js](https://static.sobolt.app/sobolt/iframeResizer.min.js)"></script>
<script>
iFrameResize({ log: false, checkOrigin: false }, '#subsidiecheck');
</script>
Finally
The element <sobolt-subsidiecheck></sobolt-subsidiecheck> is a 'normal' HTML element.
Often there are more possibilities in terms of personalization than you might think.
If you can't figure it out yourself, our developers are available every working day.
They can be reached directly via support@sobolt.com.