Integration overview

Product Fruits integration is easy, but there are things you need to do to implement it properly. Let's take a deeper look at the basic principles of Product Fruits.


JavaScript snippet

Product Fruits works by adding a short JavaScript code to your web application. This script loads when users load the page. It uses user attributes you provide us to determine which users should see what content. Content editing and publishing happen in Product Fruits administration.

You can get the snippet in the administration. Sign-in into Product Fruits, go to the project settings and find the Installation tab. Copy and paste it into your web application. The best position is close to the </body> closing tag.

Localization and language settings

If your application uses localization and you plan to localize Product Fruits content, don't forget to set the selected language. You need to provide a valid lowercase ISO 639-1 code. The language parameter is the last one on the last row of the script. See the example:

<script type="text/javascript">
window.productFruitsUser = { username: '<<REPLACE>>' };
        var a=d.getElementsByTagName('head')[0];
        var r=d.createElement('script');r.async=1;
})(window,document,'','xxxxxxxxx','HERE COMES THE LANGUAGE CODE'); // Replace 'en' with a proper language code

Single-page applications

Usually, Product Fruits integration doesn't need to be adjusted for single-page application frameworks. We try to detect new elements, page changes, etc. However, some router components can cause issues with detecting URL changes. Typically, you'll see tours stopping randomly on page change events. If this is your case, take these steps:

  1. Disable Product Fruits page change detection:
    window.productFruits = {
        disableUrlChangeDetection: true
    You must set this object variable before the original JavaScript snippet is executed.

  2. In your router, call window.productFruits.pageChanged() after every page change. Make sure, you call this method after the page content is properly generated.

Identifying users

Product Fruits needs to identify users to work properly. For instance, we have to know which tours or announcements the particular user was interacting with. If we didn't know this, we could show Product Fruits content multiple times. This is usually not the expected behavior.

User information is transferred through the JavaScript snippet. There is one required attribute called username. This must be a unique identifier of the user. It can be the username, e-mail, ID or any unique immutable value assigned to this user. If you don't want to transfer real usernames to Product Fruits, you hash them (i.e. MD5, SHA1).

Dynamic user information changes

If user information changes dynamically (i.e. single-page applications), you have to tell Product Fruits. A simple change to the original productFruitsUser object won't work.

When the change occurs, call window.productFruits.identifyUser(...) method. This method takes a user information object as the first parameter.


Product Fruits can show different content based on different user attributes. These attributes can hold any primitive value (number, string). It is not required to provide any other identification than the user's unique identifier, but often it is needed. To help you get started, there are some built-in attributes that you can provide:

  • email - optional
  • firstname - optional
  • lastname - optional
  • signUpAt - optional (can be any format but we recommend the ISO 8601 JSON DateTime format)
  • role - optional (can be any format)

Custom attributes

You can also provide custom attributes to Product Fruits. They can be useful for more precise segmentation. Provide them into the snippet as props subobject. For example:

window.productFruitsUser = { username: '<<REPLACE>>',
                             props: {
                                 yourCustomProp: 'value',
                                 yourCustomProp2: 'value2'


Disposing Product Fruits

If you need to remove Product Fruits from your web application, call The typical use case is destroying Product Fruits from login pages in single-page applications.

If you want to initialize Product Fruits again, call window.productFruitsInit().