Installation to other web platforms

If you don't use NPM, React, Angular or VueJS, follow this article to install Product Fruits.

The installation script has two parts. The first part should be inserted into the <head> element. The second part should be called when the current user information is available in your application.

Installation

First, you have to insert the first part of the snippet to <head>:

<script type="text/javascript">
    (function(w,d,u){
        w.$productFruits=w.$productFruits||[];
        w.productFruits=w.productFruits||{};w.productFruits.scrV='2';
        let a=d.getElementsByTagName('head')[0];let r=d.createElement('script');r.async=1;r.src=u;a.appendChild(r);
    })(window,document,'https://app.productfruits.com/static/script.js');
</script>

Second, initialize Product Fruits. You need the following for a successful initialization:

Workspace code - you will find it in the Installation section in the Product Fruits administration or if you are creating a new workspace, you will find it in the installation wizard.
Language code - it has to be an ISO 2-letter code, it has to match one of the languages you set as a Supported language in the workspace settings or otherwise you will experience this issue. Please also note, that with multilanguage applications, to switch to the language it will be necessary to destory the Product Fruits instance with window.productFruits.services.destroy() and reinitalize.
User information object - Pass an object containing the information of the currently logged in user (not the username of your current Product Fruit's account). The username field is required. You can pass more properties, see here.

Then call the init action. The initialization code:

<script type="text/javascript">
	$productFruits.push(['init', 'WORKSPACE CODE', 'LANGUAGE CODE', { username: '<<REPLACE>>' }]);
</script>

Replace the placeholders with your values.

Single-page applications

Product Fruits try to detect URL changes, but we cannot support all different types of routers. If we cannot detect URL changes automatically, different Product Fruits tools can behave wrongly - for instance, multi-page tours won't work or URL filters won't be matching.

To solve this, you can turn off the built-in detection and send a signal to Product Fruits from your router when the URL changed.

The init action also accepts options object. Initialize Product Fruits like this:

<script type="text/javascript">
	$productFruits.push([
		'init', 
		'WORKSPACE CODE', 
		'LANGUAGE CODE', 
		{ username: '<<REPLACE>>' }, 
		{ disableLocationChangeDetection: true }
	]);
</script>

We added disableLocationChangeDetection to the options object (the last parameter).

Then, in your router, call the following code after the URL changes.

 $productFruits.push(['pageChanged']);