Energieklus
With the Energieklus widget, residents can easily register for a sustainability program via your website. The widget 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 Energieklus widget. 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 Energieklus widget, you need a partnership 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 sign-up widget does not work immediately.
The connect-src samen.energieklus.nl and script-src static.sobolt.app directives are required.
Then you are free to place the Energieklus widget on the page.
<energieklus-aanmelden></energieklus-aanmelden>
🎉 Congratulations! The Energieklus widget is now live and visible on your website.
Personalize
You can better align the Energieklus widget with the desired tone of voice and your own house style.
<energieklus-aanmelden
header="Plan een afspraak met Energieklus"
subtitle="Vul je gegevens in om verder te gaan"
primary-color="#00007e"
></energieklus-aanmelden>
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 | Support 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 | Plan een afspraak met Energieklus |
| Subtitle | The subtitle on the first screen of the widget. | subtitle | string | Vul je gegevens in om verder te gaan |
| 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 |
Advanced
There are several advanced options available. These allow you to get more out of the Energieklus widget 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 then skips the home screen.
Only enter 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.
<energieklus-aanmelden
postcode="3012NJ"
huisnummer="268"
></energieklus-aanmelden>
Custom CSS
This allows the Energieklus widget to be further personalized.
Adjusting the style of the Energieklus widget with custom CSS is entirely at your own risk. See Personalize for the supported style adjustments.
<energieklus-aanmelden
custom-style='{
"--button-border-radius": "0px",
"--card-border-radius": "0px",
"--text-border-radius": "0px",
"--widget-border-radius": "0px"
}'
></energieklus-aanmelden>
Finally
The element <energieklus-aanmelden></energieklus-aanmelden> is a 'normal' HTML element.
Often there are more possibilities in terms of layout and 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.