How to embed checklists to custom elements

Product Fruits Single-sign on (SSO) Overview

Custom events overview

Embedding knowledge base

Editing your content

All editor tutorials for Tours

Tours Part 1: How to target elements and build tour and hint cards 

Tours Part 5: How to delay or hide tour cards, and other uncommon scenarios

Tours Part 2: Basic settings - highlighting elements

Tours Part 3: How to position and size your tour cards

ZenDesk

Mixpanel Integration

Multi-tenant applications

SSO with Microsoft Azure Active Directory

How to design a Tour

Launching tours on element click

Introduction

How to design Hints

How to design a Checklist

Selection

Answer required & answer syncing

Message to users

Hints Part 1: Targeting

HubSpot integration

Onboarding content isn't displaying on a page until after refresh

User identity verification

Events tracking

Onboarding and engagement  setup example with Twigsee

Custom launcher for the Life Ring Button

Installation overview

Announcements

Live debugging

Recordings and screenshots restrictions

Analytics platforms integrations

Typeform integration

Features overview

Product Fruits is not loading

User data, security & GDPR

Installation to React or NextJS applications

API-driven checklist items

Installation to Angular

Intercom

ActiveCampaign integration

Installation to other web platforms

RTL/LTR languages customizations

Easy to adjust CSS variables

HubSpot Chat

Popular CSS snippets examples

Customize Life Ring Button

Adjust styles for different devices

Web applications (legacy script)

How to get adoption feedback from users

Product Fruits branding

Product Fruits is showing blank cards

Waiting for a target element

URLs don't match

Segmentation doesn't match

Dynamic CSS classes or attributes

Segmentation

Restarting the content for users

Custom Chat Widget

Tours Part 0: Introduction to our editor

How to localize your content

Moving layout for banners

Segmentation rules import

Tracked users batch update

Installation to React or NextJS applications (legacy)

Getting started with Product Fruits

Selecting and targeting elements

Newsfeed embeddable widget

Handling keyboard shortcuts in applications

Crisp

Freshdesk

General Summary

Tours Part 4: How to create different layouts of tour cards and hints

Full Preview vs. viewing published content

Newsfeed overview

Announcements overview

Pop-ups overview 

Public newsfeed and changelog

Surveys overview

How to test content before sharing it with your users

Testing in Chrome based browsers without installation

Advanced diagnosing

Card editor

Basic setup

How to create content in the Knowledge Base

Text input

Hints Part 2: Basic Settings

Hints Part 3: Icon Advance Settings

Hints Part 4: Card Position and Size

Hints Part 5: Card Layout and Settings

Survey branching

Rating

Multi-factor authentication (MFA)

API Overview

Product Tours

Hints

Checklists

Analytics

Getting Started

Testing your content

Examples

Editor

Tutorials

Useful CSS snippets

Tours

Video tutorials

Banners

Newsfeed

Popups

Surveys

Question types

Life Ring Button

Feedback Widget

Knowledge Base

Access management

Product Fruits Analytics

Developers

Installation

JavaScript API

Server-side  (REST) API

Advanced integration

Experimental features

Advanced Configuration

Custom Events

External integrations

Chat Providers

Single sign-on

Something is not working? Find the help here.

Troubleshooting

Debugging

Customization

Overview of Product Fruits CSS classes

Privacy, Security & Billing

<p>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.&nbsp;</p><h2>General information</h2><h3>Identifying users</h3><p>You must identify the current user - that is to say the user that is currently logged in to your application. You can also choose to pass additional properties that can be used for better segmentation.</p><p><a href="https://help.productfruits.com/en/article/identifying-users" target="_blank" rel="noopener noreferrer">Read more on this here</a>.</p><h3>Content Security Policies</h3><p>If your application enforces Content Security Policies (CSP), <a href="https://help.productfruits.com/en/article/content-security-policy" target="_blank" rel="noopener noreferrer">make sure you enable our domains</a>.</p><h2>Installation instructions</h2><h3>React and NextJS applications</h3><p>Product Fruits can be integrated with React and NextJS applications. We provide our NPM component, which is easy to use. It handles all common use cases.</p><p><a href="/en/article/developers-integration-react-nextjs" target="_blank" rel="noopener noreferrer">See our guide for React and NextJS applications.</a></p><h3>NPM package</h3><p>You can use our NPM package, <a href="https://help.productfruits.com/en/article/installation-via-npm-package" target="_blank" rel="noopener noreferrer">see this article for instructions</a>.</p><h3>VueJS applications</h3><p>If you use VueJS, <a href="https://help.productfruits.com/en/article/developers-installation-to-vuejs" target="_blank" rel="noopener noreferrer">check here</a>.</p><h3>Angular applications</h3><p>If you use Angular, <a href="https://help.productfruits.com/en/article/developers-installation-to-angular" target="_blank" rel="noopener noreferrer">follow this</a>.</p><h3>Other web platforms - JavaScript snippet</h3><p>If you use any other front-end framework, you can follow this guide. You'll have to insert a short JavaScript code snippet and that's it.</p><p><a href="https://help.productfruits.com/en/article/developers-installation-to-other-web-environments" target="_blank" rel="noopener noreferrer">See our guide for web applications.</a></p><h3>Google Tag manager</h3><p>If you use Google Tag Manager (GTM), you can use it to install Product Fruits.</p><p><a href="https://help.productfruits.com/en/article/google-tag-manager-installation" target="_blank" rel="noopener noreferrer">See our guide for Google Tag Manager</a></p>

<p><span style="color:hsl(0,0%,0%);">With Product Fruits, you can create and customize onboarding tours, hints, help widgets, etc., and use our analytics to observe client interaction and make decisions based on client feedback.</span></p><p><span style="color:hsl(0,0%,0%);">You can create your very first onboarding tour in just a few minutes by installing the Product Fruits extension and creating a Product Fruits account, let’s get started!</span></p><h2>Installation</h2><ol><li><a href="https://my.productfruits.com" target="_blank" rel="noopener noreferrer"><span style="background-color:transparent;color:#000000;">Sign-up for a free trial</span></a><span style="background-color:transparent;color:#000000;">&nbsp;</span></li><li><span style="background-color:transparent;color:#000000;">Create a workspace&nbsp;</span></li><li><a href="https://help.productfruits.com/en/article/editor-introduction" target="_blank" rel="noopener noreferrer"><span style="background-color:transparent;color:#000000;">Install the Product Fruits editor extension</span></a><span style="background-color:transparent;color:#000000;"> (Chrome base browsers)</span></li><li><span style="background-color:transparent;color:#000000;">Configure your onboarding content by signing in to </span><a href="http://my.productfruits.com/" target="_blank" rel="noopener noreferrer"><span style="background-color:transparent;color:#000000;">our portal</span></a></li><li><span style="background-color:transparent;color:#000000;">Need to invite team members to your workspace? Click </span><a href="https://my.productfruits.com/portal/account/team/users"><span style="background-color:transparent;color:#000000;">here</span></a><span style="background-color:transparent;color:#000000;"> to add them.&nbsp;</span></li></ol><p>Now you're ready to begin with Product Fruits. For full functionality, including segmentation, you will want to<span style="background-color:transparent;color:#000000;"> </span><a href="https://help.productfruits.com/en/article/installation-overview" target="_blank" rel="noopener noreferrer"><span style="background-color:transparent;color:#000000;">install the Product Fruits</span></a> code snippet (similar to Google Analytics, for example). <strong>For testing purposes, however, you only need </strong><a href="https://help.productfruits.com/en/article/test-in-chrome-without-installation" target="_blank" rel="noopener noreferrer"><strong>the Product Fruits extension</strong></a><strong>.</strong></p><h2>Three tab setup</h2><p>We recommend you work with <strong>three tabs set up</strong> in the browser.</p><p>1. Administration - for setting up the look &amp; feel of cards, rules for tours, etc.</p><p>2. The Editor (in Edit mode) - to edit the content (using the PF extension)</p><p>3A. The Editor (in Full Preview mode) - to preview the content (using the PF extension)</p><p>3B. Your Application - for previewing content (after inserting the Product Fruits code snippet, you don't need to use the Product Fruits extension in Full Preview mode)</p><figure class="media"><div data-oembed-url="https://vimeo.com/909967825?share=copy"><div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;"><iframe src="https://player.vimeo.com/video/909967825" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div></div></figure><h2>Full Preview mode</h2><p>You can Preview the content you are editing directly in the editor tab, but <strong>in Full Preview mode you can check all types of content</strong> - you can start Tours from Hint icons, check the Life Ring Button, etc. After installing the Product Fruits code snippet, you won't need to use Full Preview anymore, but rather your application directly. In order to see all content via Full Preview, you must<strong> turn on Full Preview in the extension </strong>or with the<strong> blue "eye" icon in administration:</strong></p><figure class="media"><div data-oembed-url="https://vimeo.com/946168434?share=copy"><div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;"><iframe src="https://player.vimeo.com/video/946168434" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div></div></figure>

<p>If you want to try Product Fruits, but don't have the resources for inserting our JavaScript code snippet into your application, you can install our Product Fruits extension to try it directly in your browser. The extension features are partially limited (e.g. you can't use segmentation), but it's a great way to start with Product Fruits.</p><p><strong>If you are creating a new workspace</strong>, you can choose the Chrome Extension path in the wizard and it will guide you through all of the steps.</p><p><strong>If you join an existing workspace</strong>, follow these steps:</p><ol><li>Install the <a href="https://chrome.google.com/webstore/detail/blfcndbglccbobmkepikmbmobcehhkkf" target="_blank" rel="noopener noreferrer">Chrome extension</a>.&nbsp;</li><li>Log in to a Product Fruits account and navigate to the application you'd like to build onboarding content in. After logging in, click on the extension icon in the Chrome toolbar (it might be folded under the puzzle icon).</li><li>Select the workspace name that corresponds to the application you're working on</li><li>Select 'Edit' to begin editing and creating onboarding content or 'Full preview' to simulate how the content will appear for your users once the code is fully installed into your application.</li></ol><figure class="image"><img src="https://cdn-assets.productfruits.com/7bf48515-684c-4d4d-a7c3-b5ae5a96aefe"></figure><figure class="image"><img src="https://cdn-assets.productfruits.com/4e6bf566-adbe-49cf-99fc-4bb18d29f0e6"></figure><h3>Potential issues</h3><p>The Chrome extension serves as the first step for testing Product Fruits. However, some features are limited because they rely on the full JavaScript integration. For example:</p><ul><li>Segmentation won't work, as randomly generated identities are used instead of your application data.</li><li>URL filtering is limited.</li><li>If your application uses certain front-end frameworks, tour triggers may be limited.</li></ul>

Go back to application

You recently requested to reset your password for your account. Use the button below to reset it. This password reset is only valid for the next 24 hours.

If you’re having trouble with the button above, copy and paste the URL below into your web browser.

Please check your email for instructions to reset your password.

Check your email

Enter your email address and we will send you instructions to reset your password.

Please enter a new password below.

Set your password