In dit artikel lees je hoe Tweakwise level Standard geïmplementeerd kan worden door middel van het Javascript script.

Klik hier voor een live demo

Stap 1: Installatie

Het script kan geïnstalleerd worden door het in de pagina in te laden. Wij adviseren om dit script in de head van de pagina te plaatsen.

<script type=”text/javascript” src=”https://gateway.tweakwisenavigator.net/js/starter.js” ></script>

Opmerking: Voor de beste prestaties raden wij aan om het Javascript zo vroeg mogelijk in de pagina in te laden. Het script maakt gebruik van het 'DOMContentLoaded' evenement om de instellingen op de halen en de resultaten op de pagina te zetten. Het inladen van het Javascript na het 'DOMContentLoaded' evenement zal nadelige gevolgen hebben voor de prestaties van het script.

Voor meer informatie over het 'DOMContentLoaded' evenement zie deze link

Stap 2: Configuratie

Naast het script zelf, is er een minimale configuratie nodig om de implementatie werkend te krijgen. Hiervoor hoeft alleen de instantie key meegegeven te worden in een extra stuk Javascript. Deze key is te vinden in de Connectivity > Endpoints module in Tweakwise.

<script type=”text/javascript">
  window[“twn-starter-config”] = {
    instancekey: “INSTANCEKEY”
  };
</script>

Vervolgens kan de rest van de implementatie geconfigureerd worden in de JS implementatie module inTweakwise.

Selecteer hier in ieder geval de invoer en output elementen door middel van een ID of query selector.

Het is mogelijk om de configuratie uit de JS implementatie module te overschrijven door extra opties aan het tweede stuk Javascript toe te voegen. Let op: Sommige opties zijn alleen beschikbaar als je ze via deze manier implementeert en kunnen niet via de JS implementatie module worden geactiveerd.

Lees dit artikel voor een overzicht van alle beschikbare opties

Stap 3: Styling (optioneel)

Het is mogelijk om het standaard thema van de implementatie aan te passen door een maatwerk stylesheet toe te voegen. Denk hierbij aan het wijzigen van lettertypes en/of kleuren. Deze stylesheet moet zelf gehost worden en kan toegevoegd worden aan de pagina.

<link rel=”stylesheet” href=”https://uw-domein.nl/maatwerk-stylesheet.css” />

Wij raden aan om hier onze maatwerk stylesheet template als basis voor te gebruiken. Klik hier om deze te downloaden.