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.
  • User information object - you have to identify the current user. Pass an object with the user information. The username field is required. You pass more properties, read this.

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']);