💡
The Guided Selling JS currently only supports configurations with a type of Funnel.

Quick start

To get started with the Guided Selling JS add the following script to the HTML. We recommend adding this script to the <head> of the HTML.

<link rel="preload" as="script" href="https://gateway.tweakwisenavigator.net/js/guided-selling.js" />
<script>
  window.tweakwiseFailover = function (src) {
    var script = document.createElement("script");
    script.async = true;
    script.src = src;
    document.head.appendChild(script);
  };
</script>
<script
  src="https://gateway.tweakwisenavigator.net/js/guided-selling.js"
  data-failover="https://gateway.tweakwisenavigator.com/js/guided-selling.js"
  onerror="window.tweakwiseFailover(this.dataset.failover)"
></script>

After the script has been added to the page you can initialize the Guided Selling JS. To do this; copy the following snippet to the page. The snippet should be placed on the position of where you want the Guided Selling to appear.

<div id="tweakwise-guided-selling"></div>

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

The only thing that is left is to replace INSTANCEKEY and CODE with the correct values.

The INSTANCEKEY should be replaced with your own instance key. You can find it in the Tweakwise App under Connectivity > Endpoints.

The CODE should be replaced with the unique Guided Selling code you have configured in the Tweakwise App.

Internationalization

By default the Guided Selling JS is displayed in the English language. You can change this by adding the lang option when initializing the Guided Selling.

<div id="tweakwise-guided-selling"></div>

<script>
  window.addEventListener("DOMContentLoaded", function () {
    window.tweakwiseGuidedSelling({
      output: "#tweakwise-guided-selling",
      instancekey: "INSTANCEKEY",
      code: "CODE",
      
      lang: "en" // <-- Configure your desired language here
    });
  });
</script>

The Guided Selling JS currently supports the following languages:

Language	Value
English	en (default)
Dutch	nl
German	de
Spanish	es
French	fr
Italian	it

Theming

By default the Guided Selling JS is displayed in Tweakwise colors and uses rounded borders for its elements. You can change this by adding the theme option when initializing the Guided Selling.

<div id="tweakwise-guided-selling"></div>

<script>
  window.addEventListener("DOMContentLoaded", function () {
    window.tweakwiseGuidedSelling({
      output: "#tweakwise-guided-selling",
      instancekey: "INSTANCEKEY",
      code: "CODE",
      
      theme: {
        color: "#00b7cd", // <-- Configure a theme color
        rounded: true // <-- Toggle rounded borders on or off
      }
    });
  });
</script>

The color option can contain any valid CSS color value.

The rounded option can either be set to true or false which will enable or disable rounded borders respectively.