The NPM package is an easy way to install Product Fruits into your application. It supports browser-based environments.
First, install the package:
npm install product-fruits --save
Second, you have to find the right place where you should initialize Product Fruits. Requirements for this place:
When you found the right place, initialize Product Fruits.
import { productFruits } from 'product-fruits';
// later in the code
productFruits.init('<<YOUR WORKSPACE CODE>>', '<<LANGUAGE CODE>>', { username: '<<REPLACE>>' });
To make a successful initialization, you need:
username
field is required. You pass more properties, read this.Product Fruits work great for single-page applications. There are things you have to check, though.
We try to detect location changes automatically. But it doesn't work with all different routers. If Product Fruits cannot detect new locations (for instance, multi-page tours don't run properly), you can disable the detection and send a signal to Product Fruits manually when routes change.
Add the disableLocationChangeDetection
option to the init
call. Change the initialization call to this:
productFruits.init(
'<<YOUR WORKSPACE CODE>>',
'<<LANGUAGE CODE>>',
{
username: '<<REPLACE>>'
},
{
disableLocationChangeDetection: true
}
);
Then, send the signal to Product Fruits when the location changed. It depends on the router you use, but the signal must be sent after the route was changed (the location.href is updated).
$productFruits.push(['pageChanged']); // should be called in the safe context, see safeExec()
The NPM package currently exports another method that will help you interact with Product Fruits.
import { productFruits } from 'product-fruits';
productFruits.safeExec(($productFruits) => {
// This callback is called if/when Product Fruits is ready.
// It is safe to use Product Fruits API calls here.
});
Use this method to execute Product Fruits API methods. It will ensure Product Fruits is ready.
Optionally, you can pass a configuration object as the last parameter of the init method. The following properties can be set:
disableBannersAutoMargin
- when using banner announcements, this can disable the automatic page layout shiftdisableLocationChangeDetection
- disables the default location change detection, you have to send signals about page changes manually