Subsidiecheck
Met de subsidiecheck kunnen woningeigenaren gepersonaliseerd inzicht krijgen in beschikbare verduurzamingssubsidies. De subsidiecheck maakt gebruik van Web Components. Hierdoor zijn ze gemakkelijk in te sluiten op elk platform dat HTML en JavaScript ondersteunt.
Eerste stap
Laat ons weten op welk domein je de subsidiecheck wil insluiten. Dit kan door een e-mail te sturen naar support@sobolt.com. Wij zorgen ervoor dat onze servers verzoeken vanaf jouw website accepteren. Meestal is het dezelfde werkdag nog geregeld.
Om met de subsidiecheck aan de slag te gaan heb je een overeenkomst met Sobolt nodig. Heb je die nog niet? Dan kan je contact opnemen met de afdeling verkoop via info@sobolt.com.
Insluiten
Plaats de volgende imports in de <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>
Mogelijk is een uitbreiding van de content security policy van je website nodig.
Neem contact op met je webbeheerder als de subsidiecheck niet direct werkt.
De connect-src api.sobolt.app en script-src static.sobolt.app directives zijn vereist.
Vervolgens ben je vrij om de subsidiecheck te plaatsen op de pagina.
<sobolt-subsidiecheck></sobolt-subsidiecheck>
🎉 Gefeliciteerd! De subsidiecheck is nu live en zichtbaar op jouw website.
Personaliseren
Je kunt de subsidiecheck beter laten aansluiten bij de gewenste tone-of-voice en de eigen huisstijl.
<sobolt-subsidiecheck
header="Subsidie voor jouw woning?"
subtitle="Vul je gegevens in en ontdek de mogelijkheden"
primary-color="#00007e"
peiljaar=2023
></sobolt-subsidiecheck>
De volgende velden worden ondersteund:
| Naam | Omschrijving | HTML attribuut | Type | Default waarde |
|---|---|---|---|---|
| Primaire kleur | Hoofdkleur van het kleurenpalet. Wordt gebruikt voor bijvoorbeeld knoppen. | primary-color | string | #003ea6 |
| Secundaire kleur | Steunkleur, onder andere gebruikt voor actieve elementen. | secondary-color | string | #e0ecff |
| Achtergrondkleur | De achtergrondkleur van de widget | background-color | string | #f4f9ff |
| Lettertype | Als je een eigen font gebruikt, zorg dan dat die reeds geïmporteerd is in de <head> tag van je pagina. | font-family | string | sans-serif |
| Titel | De titel op het eerste scherm van de widget. | header | string | Subsidie voor jouw woning? |
| Ondertitel | De ondertitel op het eerste scherm van de widget. | subtitle | string | Vul je gegevens in en ontdek de mogelijkheden |
| Branding | Bepaalt of de "In samenwerking met Sobolt"-branding zichtbaar is. | branding | boolean | true |
| Dekkingsgebied | Een lijst van BAG-woonplaatsIdentificaties, gemeenten, steden of "landelijk" waarin de subsidiecheck beschikbaar is. Format als JSON array. | dekkings-gebied | string[] | [] |
| Postcode | Format 1234AB. Alleen van toepassing als deze vooraf bekend is en automatisch kan worden ingevuld. | postcode | string | |
| Huisnummer | Alleen van toepassing als deze vooraf bekend is en automatisch kan worden ingevuld. | huisnummer | number | |
| Vraag Vereniging Eigen Huis | Of de vraag over Eigen Huis lidmaatschap wordt getoond. | ask-vereniging-eigen-huis | boolean | false |
| Vraag Rabobank Hypotheek | Of de vraag over Rabobank Hypotheken wordt getoond. | ask-rabobank-mortgage | boolean | false |
| Vraag Laag Inkomen | Of de vraag over laag inkomen wordt getoond. | ask-income | boolean | false |
| Laag Inkomen Titel | Welke tekst te gebruiken voor de titel van de laag inkomen vraag. | income-title | string | |
| Laag Inkomen Tekst | Welke tekst te gebruiken voor de tekst van de laag inkomen vraag. | income-text | string | |
| Maatregelcategorieën | Welke categorieën van maatregelen moeten worden getoond in de widget. Standaard wordt alles getoond. Beschikbare opties: Insulation, Adaptation | measure-categories | string |
Branding verwijderen
Als je met ons bent overeengekomen dat je de subsidiecheck zonder het "In samenwerking met Sobolt" merk mag gebruiken, dan kan je die eenvoudig verwijderen.
<sobolt-subsidiecheck
branding=false
></sobolt-subsidiecheck>
Het verwijderen van de branding zonder onze toestemming is tegen de leveringsvoorwaarden.
Geavanceerd
Er zijn meerdere geavanceerde opties beschikbaar. Hiermee kun je meer uit de subsidiecheck halen op jouw platform.
Adresgegevens voorinvullen
Als de adresgegevens al bekend zijn (bijvoorbeeld in een 'Mijn' omgeving), dan kunnen deze dynamisch worden ingesteld. De gebruiker slaat dan het beginscherm over.
Vul alleen postcode en huisnummer in. Indien er een huisletter of toevoeging is, dan wordt de gebruiker gevraagd de juiste te kiezen. Hiermee worden invoerfouten in huisletter/toevoeging uitgesloten.
<sobolt-subsidiecheck
postcode="3012NJ"
huisnummer="268"
></sobolt-subsidiecheck>
Custom CSS
Hiermee kan de subsidiecheck nog verder worden gepersonaliseerd.
Het aanpassen van de stijl van de subsidiecheck met custom CSS is volledig op eigen risico. Zie Personaliseren voor de ondersteunde stijlaanpassingen.
<sobolt-subsidiecheck
custom-style='{
"--button-border-radius": "0px",
"--card-border-radius": "0px",
"--text-border-radius": "0px",
"--widget-border-radius": "0px"
}'
></sobolt-subsidiecheck>
Iframe embedding
Hoewel we sterk aanraden de web component oplossing te gebruiken,
is het technisch gezien mogelijk om de subsidiecheck via een <iframe> tag in te sluiten.
Omdat de subsidiecheck uitvouwt tijdens het invullen is het noodzakelijk
om voldoende ruimte in te richten. Je kunt ook gebruik maken van iframeResizer.js.
Hiermee schaalt het iframe-element mee met de inhoud.
De EMBED_URL voor jouw pagina kan je opvragen via support@sobolt.com.
<iframe
id="subsidiecheck"
title="Subsidiecheck woningisolatie"
src="EMBED_URL"
style="border:none;"
></iframe>
<script src="https://static.sobolt.app/sobolt/iframeResizer.min.js"></script>
<script>
iFrameResize({ log: false, checkOrigin: false }, '#subsidiecheck');
</script>
Tot slot
Het element <sobolt-subsidiecheck></sobolt-subsidiecheck> is een 'gewoon' HTML-element.
Vaak is er daarom qua personalisatie meer mogelijk dan je wellicht denkt.
Kom je er toch zelf niet uit, dan staan onze ontwikkelaars elke werkdag voor je klaar.
Ze zijn rechtstreeks te bereiken via support@sobolt.com.