Energieklus
Met de Energieklus widget kunnen bewoners zich via jouw website eenvoudig aanmelden voor een verduurzamingsprogramma. De widget 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 Energieklus widget 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 Energieklus widget aan de slag te gaan heb je een samenwerking 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 aanmeldwidget niet direct werkt.
De connect-src samen.energieklus.nl en script-src static.sobolt.app directives zijn vereist.
Vervolgens ben je vrij om de Energieklus widget te plaatsen op de pagina.
<energieklus-aanmelden></energieklus-aanmelden>
🎉 Gefeliciteerd! De Energieklus widget is nu live en zichtbaar op jouw website.
Personaliseren
Je kunt de Energieklus widget beter laten aansluiten bij de gewenste tone-of-voice en de eigen huisstijl.
<energieklus-aanmelden
header="Plan een afspraak met Energieklus"
subtitle="Vul je gegevens in om verder te gaan"
primary-color="#00007e"
></energieklus-aanmelden>
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 | Plan een afspraak met Energieklus |
| Ondertitel | De ondertitel op het eerste scherm van de widget. | subtitle | string | Vul je gegevens in om verder te gaan |
| 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 |
Geavanceerd
Er zijn meerdere geavanceerde opties beschikbaar. Hiermee kun je meer uit de Energieklus widget 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.
<energieklus-aanmelden
postcode="3012NJ"
huisnummer="268"
></energieklus-aanmelden>
Custom CSS
Hiermee kan de Energieklus widget nog verder worden gepersonaliseerd.
Het aanpassen van de stijl van de Energieklus widget met custom CSS is volledig op eigen risico. Zie Personaliseren voor de ondersteunde stijlaanpassingen.
<energieklus-aanmelden
custom-style='{
"--button-border-radius": "0px",
"--card-border-radius": "0px",
"--text-border-radius": "0px",
"--widget-border-radius": "0px"
}'
></energieklus-aanmelden>
Tot slot
Het element <energieklus-aanmelden></energieklus-aanmelden> is een 'gewoon' HTML element.
Vaak is er daarom qua lay-out en 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.