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>>' };
(function(w,d,u,c,l){
        w.productFruits=w.productFruits||{};
        w.productFruits.language=l;w.productFruits.code=c;
        var a=d.getElementsByTagName('head')[0];
        var r=d.createElement('script');r.async=1;
        r.src=u+'?c='+c;
        a.appendChild(r);
})(window,document,'https://app.productfruits.com/static/script.js','xxxxxxxxx','HERE COMES THE LANGUAGE CODE'); // Replace 'en' with a proper language code
</script>

 

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).

Segmentation

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'
                             }
                           };