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