The Guided Selling module can be used to quickly implement a standardized version of the Tweakwise Guided Selling in your platform.

🔗 View live demo of Guided Selling

Installation

Make sure you have followed the Installation guide.

Initialization

The Guided Selling module needs to be initialized manually. To do this; copy the following snippet into your HTML. 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("twn.guided-selling.ready", 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.

Theming

By default the Guided Selling 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("twn.guided-selling.ready", 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.

Results

When the Guided Selling funnel is completed, the results are displayed. The way Guided Selling results are displayed is a personal preference and above all, a UX question.

By default, Suggestions JS displays the products in a grid. Using the Plugin Studio Tile Editor, the product tiles can be configured as desired.

For detailed examples, see Customize results.