Help Center
Go back to application
Help Center
Go back to application
Getting Started
Getting started with Product Fruits
Features overview
Testing your content
How to test content before sharing it with your users
Testing in Chrome based browsers without installation
Examples
Onboarding and engagement setup example with Twigsee
Editor
Introduction
Basic setup
Card editor
Editing your content
Full Preview vs. viewing published content
Tutorials
Segmentation
How to localize your content
How to get adoption feedback from users
Content personalization and placeholders
Employee training
RTL/LTR languages customizations
A/B testing via external tools
Useful CSS snippets
Popular CSS snippets examples
Easy to adjust CSS variables
Customize Life Ring Button
Adjust styles for different devices
Product Fruits branding
Tours
How to design a Tour
Selecting and targeting elements
Tour/hint card buttons and customization
Connecting Tours
Dynamic URLs
Share product tours by link
How to design tours for mobile web
Custom JavaScript triggers
Custom buttons and JavaScript actions
Targeting elements in iframes
Launching tours on element click
Video tutorials
All editor tutorials for Tours
Tours Part 0: Introduction to our editor
Tours Part 1: How to target elements and build tour and hint cards
Tours Part 2: Basic settings - highlighting elements
Tours Part 3: How to position and size your tour cards
Tours Part 4: How to create different layouts of tour cards and hints
Tours Part 5: How to delay or hide tour cards, and other uncommon scenarios
Hints
How to design Hints
Video tutorials
Hints Part 1: Targeting
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
Announcements
Announcements overview
Banners
Moving layout for banners
Popups
Pop-ups overview
Newsfeed
Newsfeed overview
Newsfeed embeddable widget
Public newsfeed and changelog
Checklists
How to design a Checklist
How to embed checklists to custom elements
API-driven checklist items
Group based checklists
Surveys
Surveys overview
Survey branching
Answer required & answer syncing
How to preview surveys
Using the Surveys API
Question types
Rating
Text input
Selection
Message to users
Life Ring Button
Life Ring Button Overview
Custom launcher for the Legacy Life Ring Button
Feedback Widget
Feedback Widget Overview
Recordings and screenshots restrictions
Knowledge Base
How to create content in the Knowledge Base
Embedding knowledge base
How to Set Up a Custom Domain for your Knowledge Base
Access management
Secure your knowledge base
Enable access only for users from your application
Examples of backend HMAC computation
Developers
Installation overview
Segmentation and custom data
Installation
Identifying users
Custom initialization options
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)
JavaScript API
API Overview
Product Tours
Hints
Announcements
Surveys
Checklists
Feedback
Life Ring Button
Life Ring Button (Legacy)
Events Tracking
Analytics
Server-side (REST) API
Authentication
Rate limiting
Users tracking modes
User identification
Users management
Events tracking
Feedback
Surveys webhooks
Advanced integration
User identity verification
Sites without authentication
Custom routing
Content Security Policy
Dynamic CSS classes or attributes
Handling keyboard shortcuts in applications
Experimental features
Segmentation rules import
Tracked users batch update
Advanced Configuration
Multi-tenant applications
Custom Events
Custom events overview
External integrations
Analytics platforms integrations
Typeform integration
ActiveCampaign integration
HubSpot integration
Segment.io integration
Mixpanel Integration
Google Analytics 4 via Google Tag Manager Integration
Zapier integration
Chat Providers
General Summary
Crisp
Freshdesk
Intercom
ZenDesk
HubSpot Chat
Custom Chat Widget
Single sign-on
Product Fruits Single-sign on (SSO) Overview
SSO with OneLogin
SSO with Microsoft Azure Active Directory
SSO with Okta
SSO with JumpCloud
Troubleshooting
Live debugging
Product Fruits is not loading
Product Fruits is showing blank cards
Tours/hints editor is not loading
Onboarding content isn't displaying on a page until after refresh
Advanced diagnosing
Debugging
Restarting the content for users
Waiting for a target element
URLs don't match
Segmentation doesn't match
Privacy & Security
User data, security & GDPR
SOC2 certification
Multi-factor authentication (MFA)
Hints Part 4: Card Position and Size
This video reviews the Card Position and Size section of the Hints editor.
