Product Tours

Hints

Feedback

Life Ring Button

Announcements

Live debugging

Recordings and screenshots restrictions

User data, security & GDPR

Installation overview

Test in Chrome based browsers without installation

Installation to React or NextJS applications

Installation via NPM package

Analytics platforms integrations

Typeform integration

Product Fruits feature overview

Product Fruits is not loading

API Overview

Segmentation and custom data

Installation to Angular

How to embed checklists to custom elements

API-driven checklist items

Checklists

How to design tours for mobile web

Intercom

Identifying users

ActiveCampaign integration

US location installation instructions

Installation to other web platforms

RTL/LTR languages customizations

HubSpot integration

Easy to adjust CSS variables

HubSpot Chat

Popular CSS snippets examples

Customize Life Ring Button

Adjust styles for different devices

Web applications (legacy script)

A/B testing via Google Optimize

Content Security Policy

How to get adoption feedback from users

Product Fruits branding

Installation via Google Tag Manager

Product Fruits shows only blank cards

Waiting for the target element

URLs don't match

Segmentation doesn't match

Installation to VueJS

Users tracking modes

Advanced diagnosing

Dynamic CSS classes or attributes

Sites without authentication

Segmentation

Restarting the content for users

Custom Chat Widget

Overview

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

Analytics

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

Full preview mode

Newsfeed embeddable widget

Handling keyboard shortcuts in applications

Product Fruits editor tutorials

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

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

Targeting elements in iframes

Authentication

User identification

Rate limiting

Users management

Part 2: Basic settings - highlighting elements

Part 3: How to position and size your tour cards

ZenDesk

Crisp

Freshdesk

General Summary

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

Connecting Tours

Newsfeed overview

Mixpanel Integration

Google Analytics 4 via Google Tag Manager Integration

BETA announcements vs. legacy announcements

Public newsfeed and changelog

Pop-ups overview

Content personalization and placeholders

Getting Started

Editor

Video Tutorials

Tours & Hints

Tours

Knowledge Base

Newsfeed

Banners

Popups

Custom Events

Feedback Widget

Tutorials

Useful CSS snippets

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

<p>Product Fruits installation 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.</p><h2>General information</h2><h3>Identifying users</h3><p>You must identify the current user - the user who is currently logged in to your application. You can also pass additional properties that can be used for better segmentation.</p><p><a href="https://help.productfruits.com/en/article/identifying-users">Read more 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">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 that is easy to use. It handles all common use cases.</p><p><a href="/en/article/developers-integration-react-nextjs">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">see this article</a>.</p><h3>VueJS applications</h3><p>If you use VueJS, <a href="https://help.productfruits.com/en/article/developers-installation-to-vuejs">check out this</a>.</p><h3>Angular applications</h3><p>If you use Angular, <a href="https://help.productfruits.com/en/article/developers-installation-to-angular">follow this</a>.</p><h3>Other web platforms - JavaScript snippet</h3><p>If you use any other frontend 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">See our guide for web applications.</a></p><h3>Google Tag manager</h3><p>If you use Google Tag Manager (GTM), you can also install Product Fruits.</p><p><a href="https://help.productfruits.com/en/article/google-tag-manager-installation">See our guide for Google Tag Manager</a></p>

<p>If you want to try Product Fruits and you don't have the resources for inserting our JavaScript code snippet into your application, you can install our Product Fruits extension and try it directly in your browser. The extension features are slightly limited (e.g. you can't use segmentation), but it is 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 joined an existing workspace</strong>, follow this:</p><ol><li>Install our <a href="https://chrome.google.com/webstore/detail/blfcndbglccbobmkepikmbmobcehhkkf" target="_blank" rel="noopener noreferrer">Chrome extension</a>.&nbsp;</li><li>Log in to Product Fruits account. Navigate to the application where you'd like to build onboarding content. and after login, click on the extension icon in the Chrome toolbar (it may be folded under the puzzle icon).</li><li>Select the workspace name that corrospands 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 can be limited because proper JavaScript integration is needed. For example:</p><ul><li>Segmentation won't work as randomly generted identies are used instead of your application data.</li><li>URL filtering is limited.</li><li>If your application uses particular front-end frameworks, tour triggers might 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. You don't have to fill them out, URLs are bound automatically while you create cards in our editor.</p><figure class="image"><img src="https://cdn-assets.productfruits.com/21571f8e-71f2-4a5a-b276-00426ab5efcd"></figure><p>However, there are cases you need to check.</p><p>Applications may use dynamic URLs. It is very common in web applications to have different URLs for different users, projects, or any 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&nbsp;in it).<span style="background-color:rgb(255,255,255);color:rgb(33,37,41);"> </span>As a user selects a different project, it changes. If you kept this URL assigned to a card, it would mean it would show just 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 parts of the URL address can change.</p><h2>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 check 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>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. You can refer to this property as&nbsp;<code>[d.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>

Go back to application