❗️
Note
This content is from an earlier version of our software. It remains available for reference but may not reflect the most recent updates or features.
For the latest documentation, please go to Tweakwise JS + Plugin Studio.

Quick start

To get started with the Recommendations 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/recommendations.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/recommendations.js"
  data-failover="https://gateway.tweakwisenavigator.com/js/recommendations.js"
  onerror="window.tweakwiseFailover(this.dataset.failover)"
></script>

After the script has been added to the page you can initialize the Recommendations JS. You can choose to either show featured or up- and cross sell recommendations to the page.

Featured recommendations

To add featured recommendations; copy the following snippet to the page. The snippet should be placed on the position of where you want the recommendations to appear.

<div id="featured-recommendations"></div>

<script>
  window.addEventListener("DOMContentLoaded", function () {
    window.tweakwiseRecommendations({
      output: "#featured-recommendations",
      instancekey: "INSTANCEKEY",
      featured: {
        id: "ID"
      }
    });
  });
</script>

The only thing that is left is to replace INSTANCEKEY and ID 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 ID should be replaced with the unique featured recommendations ID. You can find this ID in the Tweakwise App.

Up- and cross sell recommendations

To add up- and cross sell recommendations; copy the following snippet to the page. The snippet should be placed on the position of where you want the recommendations to appear.

<div id="related-recommendations"></div>

<script>
  window.addEventListener("DOMContentLoaded", function () {
    window.tweakwiseRecommendations({
      output: "#related-recommendations",
      instancekey: "INSTANCEKEY",
      related: {
        productId: "PRODUCTID",
        groupKey: "GROUPKEY"
      }
    });
  });
</script>

The only thing that is left is to replace the INSTANCEKEY, PRODUCTID and GROUPKEY with the correct values.

The INSTANCEKEY should be replaced with your instance specific key.

the PRODUCTID should be replaced with the ID of the product for which you want to show recommendations.

the GROUPKEY should be replaced with the group key that is linked to the up- and cross sell recommendations. You can find this key in the Tweakwise App.

❗️Note

Quick start

Featured recommendations

Up- and cross sell recommendations

❗️
Note