StatusSupport
Tweakwise.comTweakwise AppContact

JS Implementation

Suggest Edits

When starting out with the JS Implementation we will provide you with a personalized JavaScript file that is linked to your Tweakwise instance. This file contains instance specific configuration and customizations along with the base functionality of the plugin. Because of this; the only thing you have to do is import the file into your HTML and it will result in a fully working JS Implementation out-of-the-box.

🚧

Do you want to get started with the JS Implementation but you haven't yet received your personalized JavaScript file? Please contact Tweakwise Support.

Quick start

🦉
JS Implementation
Open Recipe

To get started with the JS Implementation add your personalized JavaScript file to the page. To do this; copy the following snippet into the <head> of your HTML.

<link rel="preload" as="script" href="https://gateway.tweakwisenavigator.net/js/starter.js" />
<link rel="preload" as="script" href="https://gateway.tweakwisenavigator.net/js/INSTANCEKEY/tweakwise.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/INSTANCEKEY/tweakwise.js"
  data-failover="https://gateway.tweakwisenavigator.com/js/INSTANCEKEY/tweakwise.js"
  onerror="window.tweakwiseFailover(this.dataset.failover)"
></script>

After you have copied the snippet into your HTML replace INSTANCEKEY with your own instance key. You can find it in the Tweakwise App under Connectivity > Endpoints.

📘

Besides importing the JavaScript file; the snippet tells the browser that the plugin should be loaded with a high priority. It also creates a fallback mechanism to an alternative domain. This is done to optimize the performance and stability of the solution.

After the JS Implementation has been added to the page; it will start looking for an input and an output.

Input

The input is the existing text field on the page that users use to search for products. By default the JS Implementation will look for an HTML Input Element with an id of tweakwise-input. Such an element could look like this:

<input type="text" name="search" id="tweakwise-input" />

Please make sure that your search input has the tweakwise-input id.

📘

If your search input already has another id or you simply want to match on a different attribute we can change this in the JavaScript file.

Output

The output is an existing element on the page that contains all content that should be replaced with the search results when the user enters a search term. This is because the search results container acts as a temporary overlay on top of the content of the page. After searching the user will be able to close the overlay again and view the original page content.

By default the JS Implementation will look for an HTML Element with an id of tweakwise-output. Such an element could look like this:

<div id="tweakwise-output">
  <!-- ... -->
</div>

Please make sure that the container you want to use as the output has the tweakwise-output id.

📘

If your output already has another id or you simply want to match on a different attribute we can change this in the JavaScript file.

Next steps

After you have followed the steps in this article you will have set-up a working JS Implementation with search functionality. Take your JS Implementation to the next level with the following topics:

Updated 20 days ago