Help Center Go back to application

Help Center Go back to application

Getting Started

Product Fruits feature overview Getting started with Product Fruits How to test content before sharing it with your users Test in Chrome based browsers without installation Multi-tenant applications User data, security & GDPR Segmentation and custom data

Editor

Introduction Basic setup WYSIWYG (What You See Is What You Get) Card Editor Editing your content Full preview mode

Video Tutorials

Product Fruits editor tutorials Part 0: Introduction to our editor Part 1: How to target elements and build tour and hint cards Part 2: Basic settings - highlighting elements Part 3: How to position and size your tour cards Part 4: How to create different layouts of tour cards and hints Part 5: How to delay or hide tour cards, and other uncommon scenarios

Tours & Hints

Dynamic URLs Selecting and targeting elements Tour/hint card buttons and customization Custom buttons and JavaScript actions Targeting elements in iframes

Tours

How to design a Tour Share product tours by link Custom JavaScript triggers How to design tours for mobile web Connecting Tours Starting tours on element click

Hints

How to design Hints

Checklists

How to design a Checklist How to embed checklists to custom elements API-driven checklist items Group based checklists

Knowledge Base

How to create content in the Knowledgebase Embedding knowledge base

Announcements

BETA announcements vs. legacy announcements

Newsfeed

Newsfeed overview Newsfeed embeddable widget Public newsfeed and changelog

Banners

Moving layout for banners

Popups

Pop-ups overview

Custom Events

Feedback Widget

Recordings and screenshots restrictions

Tutorials

Segmentation How to localize your content How to get adoption feedback from users A/B testing via Google Optimize Content personalization and placeholders Employee Training RTL/LTR languages customizations

Useful CSS snippets

Popular CSS snippets examples Easy to adjust CSS variables Customize Life Ring Button Adjust styles for different devices Product Fruits branding

Troubleshooting

Live debugging Product Fruits is not loading Product Fruits shows only blank cards Tours/hints editor is not loading

Debugging

Restarting the content for users Waiting for the target element URLs don't match Segmentation doesn't match

External Integrations

Analytics platforms integrations Typeform integration ActiveCampaign integration HubSpot integration Segment.io integration Mixpanel Integration Google Analytics 4 via Google Tag Manager Integration

Chat Providers

General Summary Crisp Freshdesk Intercom ZenDesk HubSpot Chat Custom Chat Widget

Developers

Installation overview Users tracking modes

Installation

Identifying users Installation to React or NextJS applications Installation to VueJS Installation to Angular Installation to other web platforms Installation via NPM package Installation via Google Tag Manager Web applications (legacy script)Installation to React or NextJS applications (legacy)

Advanced Integration

Content Security Policy Dynamic CSS classes or attributes Advanced diagnosing Handling keyboard shortcuts in applications Sites without authentication US location installation instructions

JavaScript API

API Overview Product Tours Hints Feedback Life Ring Button Announcements Checklists Analytics

Server-side API

Authentication Rate limiting User identification Users management Feedback webhooks

Experimental Features

Segmentation rules import Tracked Users batch update

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

This section covers display delay, hiding cards, and other specific attributes.

Powered by Product Fruits