Product Tours

Hints

Feedback

Life Ring Button

Announcements

Live debugging

Test in Chrome based browsers without installation

Recordings and screenshots restrictions

User data, security & GDPR

Installation overview

Overview

Installation to React or NextJS applications

Installation via NPM package

Analytics platforms integrations

Typeform integration

Share product tours by link

Product Fruits is not loading

API Overview

Segmentation and custom data

Installation to Angular

Multi-tenant applications

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

Custom JavaScript triggers

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

Custom buttons and JavaScript actions

How to localize your content

Embedding knowledge base

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

Tour/hint card buttons and customization

Employee Training

Dynamic URLs

Selecting and targeting elements

Handling different environments - staging vs production

Content personalization and placeholders

Introduction

Basic setup

Editing your content

Full preview mode

Newsfeed embeddable widget

Handling keyboard shortcuts in applications

Targeting elements in iframes

Authentication

User identification

Rate limiting

Users management

ZenDesk

Crisp

Freshdesk

General Summary

Connecting Tours

Mixpanel Integration

Google Analytics 4 via Google Tag Manager Integration

Getting Started

Editor extension

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