Installation Overview

Product Fruits installation is simple, but there are a few things you must do in order to make sure it's implemented properly. Let's take a deeper look at the basic principles of Product Fruits. 

General information

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 either multiple times or never. This is usually not the expected behavior.

User information is transferred through the JavaScript installation. The only required user property is 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. It's not recommended to use the full name of the user (first name + last name) as the username, as any users with the same full name will be seen as the same person. If you don't want to transfer real usernames to Product Fruits, hash them (i.e. MD5, SHA1).

If you plan to use one of our two-way sync integrations, you should send e-mails to the username field. Many two-way synchronizations need this for proper user pairing.

Built-in user properties

• username - this is the only required field
• firstname - accepts strings
• lastname - accepts strings
• signUpAt - accepts strings. The ISO 8601 datetime format with UTC timezone is highly recommended (yyyy-mm-ddThh:mm:ssZ) 
• role - accepts strings. If you need multiple roles, use a custom property

Custom properties

You can also pass custom properties to users. If you want to segment your content (display different things to different users), this is important to set up correctly.

You can pass custom user information to the props field. This object can hold any property with one of these types:

• string
• number
• array of strings or numbers
• boolean

We recommend using standard naming for these properties. Try to avoid spaces and other special characters in names.

User identity verification

This feature ensures that Product Fruits can't be initialized by a user who isn't logged into your application. It can also be used to control access to your Product Fruits knowledge base. It requires additional backend work on your side. You can read more here.

User information object example

const userInfo = { username: 'john@example.com', // REQUIRED, must be unique 
	email: 'john@example.com',
 	firstname: 'John',
 	lastname: 'Smith',
 	signUpAt: '2021-12-30T23:50:55', // Sign up date (yyyy-mm-ddThh:mm:ssZ) 
 	role: 'admin',
 	hmac: { // optional, required when using User identity verification
 },
 	props: { 
		myCustomProp1: 'my custom value', 
		myCustomProp2: 21447,
		myCustomProp3: ['first', 'second'],
	} 
 };

Updating user information

If needed, this user information can be updated after initialization by using the following api call: window.productFruits.identifyUser

window.productFruits.identifyUser({
    username: 'john@example.com',
    props: {
    myCustomProp1: 'my new custom value'
    },
})

Content Security Policies

If your application enforces Content Security Policies (CSP), make sure you enable our domains.

Some applications enforce content security policies (CSP). You have to add exceptions for Product Fruits domains or the domains of any 3rd party integration you might use. A typical example is videos on tour cards. Based on the video provider you use, you might want to enable also their domains. 

For Product Fruits domains, use these CSPs:

script-src 'unsafe-inline' https://*.productfruits.com; 
connect-src https://*.productfruits.com wss://*.productfruits.com https://productfruits.help/;
style-src 'unsafe-inline' https://*.productfruits.com; 
img-src data: https://*.productfruits.com;
frame-src https://*.productfruits.com;
media-src blob:;

If you use our integrations with Giphy, Tenor, Typeform, or are performing such actions as integrating YouTube videos into a tour card, you must also properly create CSP exceptions for the necessary domains.

Notes

Script-src 'unsafe-inline' is needed when installing Product Fruits using the <script> tag (other platforms installation), or if you'd like to use the custom javascript trigger (due to the use of the javascript eval() function). It's not needed when installing Product Fruits via our NPM packages. The domains must still be allowed however.

To avoid using the style-src 'unsafe inline', we can enable an alternative feature for your account that uses a newer browser api to render css natively instead of injecting it directly. If interested, please message us in our live chat or message us at support@productfruits.com.