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
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.