This article tells you how to implement Tweakwise level Standard using the Javascript script.

Click here for a live demo

Step 1: Installation

The script can be installed by loading it in the page. Our advice is to put this script in the head of the page.

<script type=”text/javascript” src=”https://gateway.tweakwisenavigator.net/js/starter.js” ></script>

Note: for optimal performance, we recommend loading the Javascript on the page as early as possible. The script uses the 'DOMContentLoaded' event to retrieve the settings and display the results on the page. Loading the Javascript after the 'DOMContentLoaded' event will have an adverse effect on the script's performance.

For more information on the 'DOMContentLoaded' event, follow this link

Step 2: Configuration

Besides the script itself, there's only a very minimal configuration that needs to be done to get the implementation working. To do this, you only need to add the instance key to a piece of Javascript. You can find this key in the Connectivity > Endpoints module in Tweakwise.

<script type=”text/javascript">
  window[“twn-starter-config”] = {
    instancekey: “INSTANCEKEY”
  };
</script>

Now the rest of the implementation can be configured in the JS implementation module in Tweakwise.

Select at least the input and output elements using an ID or query selector.

It's possible to overwrite the configuration from the JS implementation module by adding extra options to the second piece of Javascript.

Note: some options are only available if you implement them this way and cannot be activated in the JS implementation module.

For an overview of all available options, read this article

Step 3: Styling (optional)

It's possible to edit the standard theme of the implementation by adding a custom stylesheet. For example fonts and colors can be edited. This stylesheet must be hosted on the shop side and can be added to the page.

<link rel=”stylesheet” href=”https://your-domain.nl/custom-stylesheet.css” />