Feedback

Life Ring Button

Announcements

Live debugging

Recordings and screenshots restrictions

Installation overview

Testing in Chrome based browsers without installation

Analytics platforms integrations

Typeform integration

Product Fruits features overview

Product Fruits is not loading

User data, security & GDPR

Segmentation and custom data

Installation to React or NextJS applications

How to embed checklists to custom elements

API-driven checklist items

Installation to Angular

How to design tours for mobile web

Intercom

Identifying users

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

A/B testing via external tools

Web applications (legacy script)

How to get adoption feedback from users

Product Fruits branding

Advanced diagnosing

Product Fruits is showing blank cards

Waiting for a target element

URLs don't match

Segmentation doesn't match

Dynamic CSS classes or attributes

Users tracking modes

Segmentation

Restarting the content for users

Custom Chat Widget

Custom Events Overview

Tours Part 0: Introduction to our editor

Custom buttons and JavaScript actions

Embedding knowledge base

How to localize your content

Moving layout for banners

Segment.io integration

Tours/hints editor is not loading

Segmentation rules import

Tracked Users batch update

Feedback webhooks

Installation to React or NextJS applications (legacy)

Group based checklists

Getting started with Product Fruits

Tour/hint card buttons and customization

Employee Training

How to test content before sharing it with your users

Dynamic URLs

Selecting and targeting elements

Editing your content

Newsfeed embeddable widget

Handling keyboard shortcuts in applications

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

Targeting elements in iframes

Authentication

User identification

Rate limiting

Users management

Tours Part 2: Basic settings - highlighting elements

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

ZenDesk

Crisp

Freshdesk

General Summary

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

Connecting Tours

Full Preview vs. viewing published content

Newsfeed overview

Mixpanel Integration

Surveys webhooks

Google Analytics 4 via Google Tag Manager Integration

Pop-ups overview

BETA announcements vs. legacy announcements

Public newsfeed and changelog

Content personalization and placeholders

Surveys Overview

Multi-tenant applications

How to design a Tour

Launching tours on element click

WYSIWYG (What You See Is What You Get) Card Editor

How to design Hints

Introduction

Basic setup

Share product tours by link

Custom JavaScript triggers

How to design a Checklist

Getting Started

Editor

Tours Video Tutorials

Hints Video Tutorials

Tours & Hints

Tours

Hints

Checklists

Knowledge Base

Access management

Newsfeed

Banners

Popups

Surveys

Question Types

Custom Events

Feedback Widget

Tutorials

Useful CSS snippets

Single sign-on

Multi-factor authentication

Something is not working? Find the help here.

Troubleshooting

Debugging

External Integrations

Chat Providers

Developers

Installation

Advanced Integration

JavaScript API

Server-side API

Experimental Features

Privacy & Security

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

<p>Tours and Hints tools are bound to URLs in your application. This is important because it allows us to show the right content in the right place. If we didn't take URL addresses into consideration, tour cards or hints could display randomly in different places. Usually, this isn't something you want. URLs are automatically populated in the URL template as you create cards in the editor.</p><figure class="image"><img src="https://cdn-assets.productfruits.com/21571f8e-71f2-4a5a-b276-00426ab5efcd"></figure><p>However, there are cases in which you may need to verify what is written where.</p><p>Applications may use dynamic URLs. It is very common in web applications to have different URLs for different users, projects, or other entities. As an example, we can consider a project management application with a tasks feature. When you browse tasks, you may get URL like this:</p><p><code>https://example.com/projects/123/tasks</code></p><p>This URL is a typical example of a dynamic address (notice the&nbsp;123).<span style="background-color:rgb(255,255,255);color:rgb(33,37,41);"> </span>As a user selects different projects, the number changes. With this URL assigned to a card, it means it will only show for this particular project.</p><p>To solve this, dynamic parameters can be replaced by special placeholders. These placeholders will tell Product Fruits that these particular sections of the URL address could change.</p><h2>The Dynamic placeholder</h2><p><strong>The first possible placeholder</strong> is <code>[dynamic]</code>. This is the most common placeholder. Most of the time, you don't have to take care of replacing it manually, because we try to detect dynamic parameters (we replace all numeric values and/or some special cases automatically). However, it's good to verify the final URL template. It should look like this:</p><figure class="image"><img src="https://cdn-assets.productfruits.com/299661c3-8cbb-40a9-9db3-759df6c12b33"></figure><h2>The Specific placeholder</h2><p><strong>The second possible placeholder</strong> should be used in specific use cases. Let's say you'd like to launch a tour from our Life Ring Button from any page in your application. When users click on the tour launcher, Product Fruits should redirect to the page where the first card starts.</p><p>To do that, Product Fruits has to know how to construct the URL to redirect to. This is not possible with the&nbsp;<code>[dynamic]</code> placeholder, because we don't know what value we should use for the&nbsp;<code>[dynamic]</code> portion.</p><p>To solve this problem, you have to provide custom context attributes to Product Fruits. <a href="https://help.productfruits.com/en/article/segmentation-and-custom-data">Read more on it here</a>.</p><p>After these attributes are available, you can use them as placeholders. For instance, you provided the <code>projectId</code> custom attribute. Inside of the URL template field in te editor, you can refer to this property as&nbsp;<code>[d.props.projectId]</code>. Every other place in the tool, you can refer to this property as <code>{{props.projectId}}</code>. It should look like this:</p><figure class="image"><img src="https://cdn-assets.productfruits.com/4361e3a1-4101-484e-86ed-e708e920184c"></figure><p>&nbsp;</p>

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