Postcodecheck

Met de postcodecheck van Winst uit je woning zien bewoners direct of ze mee kunnen doen. Na het invullen van postcode en huisnummer klikt de bewoner op "Nu controleren" en gaat dan verder op de website van Winst uit je woning. De postcodecheck is een Web Component. Hierdoor is hij gemakkelijk in te sluiten op elk platform dat HTML en JavaScript ondersteunt.

Eerste stap

Laat ons weten op welk domein je de postcodecheck 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.

Insluiten

Plaats de volgende imports op de pagina (bijvoorbeeld in de <head> tag, maar elders is ook mogelijk).

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<script type="module" src="https://subsidie.winstuitjewoning.nl/widgets/sobolt/sobolt.esm.js"></script>
<script nomodule="" src="https://subsidie.winstuitjewoning.nl/widgets/sobolt/sobolt.js"></script>

warning

Mogelijk is een uitbreiding van de content security policy van je website nodig. Neem contact op met je webbeheerder als de postcodecheck niet direct werkt. De script-src subsidie.winstuitjewoning.nl en connect-src subsidie.sobolt.com api.winstuitjewoning.nl winstuitjewoning.nl directives zijn vereist. Voor het lettertype Poppins zijn ook style-src fonts.googleapis.com en font-src fonts.gstatic.com nodig.

Vervolgens plaats je de postcodecheck op de pagina.

<wujw-check></wujw-check>

Personaliseren

Je kunt de kleur van de postcodecheck laten aansluiten bij de eigen huisstijl.

<wujw-check primary-color="#00007e"></wujw-check>

De volgende velden worden ondersteund:

Naam	Omschrijving	HTML attribuut	Type	Default waarde
Primaire kleur	Kleur van de titel en de achtergrond van de knop. Elke CSS-kleur werkt, bijvoorbeeld #00007e of rgb(0, 0, 126).	primary-color	string	Verloop van #264286 naar #AD326F
Configuratie	Een configuratie die Sobolt voor je beheert. De primaire kleur uit de configuratie gaat voor het attribuut primary-color.	config-id	string

Voorbeeld

Zo kan een volledige pagina met de postcodecheck eruitzien.

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
  <script type="module" src="https://subsidie.winstuitjewoning.nl/widgets/sobolt/sobolt.esm.js"></script>
  <script nomodule="" src="https://subsidie.winstuitjewoning.nl/widgets/sobolt/sobolt.js"></script>
</head>
<body>
  <wujw-check primary-color="#00007e"></wujw-check>
</body>
</html>

Tot slot

Kom je er zelf niet uit, dan staan onze ontwikkelaars elke werkdag voor je klaar. Ze zijn rechtstreeks te bereiken via support@sobolt.com.