​
Preview

An example of a <FrigadeTour/> tooltip

​
Setup Guide

Check out our guide on how to create your first product tour in just a few minutes.

​
Code

// Paste the following provider and React component into your application

import { FrigadeTour } from '@frigade/react';

const App = () => {
  return (
     <FrigadeTour
       flowId='flow_laJhda4sgJCdsCy6'
       tooltipPosition="auto"
       dismissible={true}
       showStepCount={true}
     />
    );
};

​
config.yml props

The following props are available in config.yml in the steps array:

steps
array
The steps to show in the tooltip tour.
steps[].id
string
Unique identifier for the step. Do not change this once the step has been created.
steps[].title
string
The title of the step
steps[].subtitle
string
The description of the step
steps[].imageUri
string
Url to an image to display in the step
steps[].videoUri
string
Url to a video to display in the step such as YouTube, Vimeo, or a direct link to an mp4 file
steps[].primaryButtonTitle
string
The title of the primary button
steps[].primaryButtonUri
string
The url to open when the primary button is clicked
steps[].primaryButtonUriTarget
string
The target of the primary button url (default: _blank; use _self to open in the same window). Setting it to # will open the existing page and dismiss any Frigade modals.
steps[].secondaryButtonTitle
string
The title of the secondary button
steps[].secondaryButtonUri
string
The url to open when the secondary button is clicked
steps[].secondaryButtonUriTarget
string
Works similarly to primaryButtonUriTarget but for the secondary button
steps[].completionCriteria
string
Targeting that automatically completes the step (e.g. user.properties.connectedBank == true).
steps[].startCriteria
string
Targeting that automatically blocks the step from starting until it becomes true (e.g. user.properties.connectedBank == true)
steps[].visibilityCriteria
string
Targeting that automatically shows the step when it becomes true (e.g. user.properties.connectedBank == true)
steps[].props
object
Additional properties that can be used depending on the component type
steps[].props.autoplayVideo
boolean
Whether to autoplay the video specified in the videoUri. Note that autoplaying videos with audio is not allowed by most browsers.
steps[].selector
string
CSS class or ID of the element to highlight in the step (e.g. .my-element or #my-element)

​
React component props

​
appearance

Optional appearance: Appearance

View definition

​
className

Optional className: string

View definition

​
customStepTypes

Optional customStepTypes: Record&lt;string, (props: `primaryColor: string;stepData: StepData }) =>ReactNode`>

View definition

​
customVariables

Optional customVariables: Object

Index signature

▪ [key: string]: string | number | boolean

View definition

​
dismissBehavior

Optional dismissBehavior: "skip-flow" | "complete-step"

skip-flow (default): Completes the entire flow/tour when a single tooltip is dismissed. complete-step: Completes the current step when a tooltip is dismissed. The user can continue in the tour.

View definition

​
dismissible

Optional dismissible: boolean

Shows a close button in the top right corner of the tooltip. Depending on dismissBehavior, it will either end the entire flow or just the current step.

View definition

​
hideOnFlowCompletion

Optional hideOnFlowCompletion: boolean

View definition

​
offset

Optional offset: Object

Offset to apply to all tooltips. If you only wish to apply an offset to a single tooltip you can use props.offset in the config.yml instead.

xnumber
ynumber

View definition

​
onButtonClick

Optional onButtonClick: (step: StepData, index?: number, cta?: "primary" | "secondary" | "link" | "back" | "collapse" | "expand", nextStep?: StepData) => boolean

Handler for when a primary or secondary CTA is clicked (regardless if step is completed or not). Return true if your app performs an action (e.g. open other modal or page transition).

Parameters
NameType
stepStepData
index?number
cta?"primary" | "secondary" | "link" | "back" | "collapse" | "expand"
nextStep?StepData
Returns

boolean

View definition

​
onComplete

Optional onComplete: () => void

Returns

void

View definition

​
onDismiss

Optional onDismiss: () => void

Returns

void

View definition

​
onStepCompletion

Optional onStepCompletion: (step: StepData, index: number, nextStep?: StepData, allFormData?: any, stepSpecificFormData?: any) => boolean

Handler for when a step is completed.

Parameters
NameTypeDescription
stepStepData
indexnumber
nextStep?StepData
allFormData?anyAll form data collected so far (only applicable to FrigadeForms)
stepSpecificFormData?anyForm data collected for the finished step (only applicable to FrigadeForms)
Returns

boolean

View definition

​
primaryColor

Optional primaryColor: string

View definition

​
showHighlight

Optional showHighlight: boolean

Whether to show the highlight (the small circle/ping) or not. Defaults to true.

View definition

​
showHighlightOnly

Optional showHighlightOnly: boolean

If true, the tooltip will only show the highlight and not the tooltip itself. Clicking the highlight will reveal it.

View definition

​
showStepCount

Optional showStepCount: boolean

If true, a step counter will show up in the tooltip.

View definition

​
showTooltipsSimultaneously

Optional showTooltipsSimultaneously: boolean

Whether to show more than one tooltip at a time. Defaults to false.

View definition

​
skipIfNotFound

Optional skipIfNotFound: boolean

If true, the tour will go to the next existing step/tip if the current selector element is not found on the page. Be careful with this, as it can lead to unexpected behavior of tooltip ordering if the selector is slow to load on the page. Defaults to false.

View definition

​
style

Optional style: CSSProperties

View definition

​
tooltipPosition

Optional tooltipPosition: ToolTipPosition

View definition

​
visible

Optional visible: boolean

View definition

NPS Survey