Hi ! h_title
Support
Home
Developers
Javascript implementatie
Javascript implementatie

In dit artikel leer je hoe je Tweakwise Guided Selling implementeert met ons Javascript script.

Klik hier voor een live demo.

Het is momenteel alleen mogelijk om de 'Funnel' variant van Guided Selling te gebruiken met dit script.

Stap 1: Installatie

Het script kan worden geïnstalleerd door het Guided Selling script toe te voegen aan de pagina. We adviseren om dit script in de <head> van de HTML toe te voegen.

<script src="https://gateway.tweakwisenavigator.net/js/guided-selling.js"></script>

Stap 2: Initiatie

Als je het script hebt toegevoegd ben je klaar om de Guided Selling te initiëren. Om dit te doen moet je de volgende snippet naar je HTML kopiëren. Zorg ervoor dat je de snippet plaatst op de positie waarop je de Guided Selling wil tonen op je pagina.

<div id= "tweakwise-guided-selling"></div>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    tweakwiseGuidedSelling({
      instancekey: 'INSTANCEKEY',
      code: 'CODE',
      output: '#tweakwise-guided-selling]',
    });
  });
</script>

Nu is het enige wat je nog moet doen het vervangen van INSTANCEKEY met je eigen instance key en CODE met de unieke Guided Selling code die je in de Tweakwise App hebt ingesteld.

Stap 3: Aanpassen (Optioneel)

Het is mogelijk om aan te passen hoe de Guided Selling er op je pagina uit ziet. Er zijn twee manieren om dit te doen. Deze opties kunnen worden gecombineerd.

De configuratie uitbreiden

Je kan de HTML snippet van stap 2 uitbreiden om de Guided Selling een themakleur te geven en te afgeronde hoeken aan of uit te zetten. Hieronder vind je een voorbeeld van de HTML snippet van stap 2 waar de themakleur rood is en afgeronde hoeken is uitgeschakeld.

<div data-tweakwise-guided-selling></div>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    tweakwiseGuidedSelling({
      instancekey: 'INSTANCEKEY',
      code: 'CODE',
      output: '[data-tweakwise-guided-selling]',
      theme: {
        color: '#ff0000', // <-- red theme color
        rounded: false, // <-- no rounded corners
      },
    });
  });
</script>

Voeg je eigen CSS toe

Om de Guided Selling aan te passen met je eigen CSS moet de basis van HTML en CSS beheersen.

De Guided Selling is uitgerust met meerdere CSS classes die het mogelijk maken om het uiterlijk en het gevoel van de user interface aan te passen. Dit kun je doen met je eigen CSS stylesheet die gebruik maakt van die CSS classes. Je moet deze CSS stylesheet zelf hosten.


Kom je er na het lezen van de relevante artikelen nog steeds niet uit?

Deel artikel

Link gekopieerd naar klembord

Cookies

Wij gebruiken cookies om het gebruik van de Support omgeving te analyseren.

Meer weten? Bekijk onze cookieverklaring.

Sluit melding