​
Setup Guide

The Frigade Tour component uses Radix UI’s Popover component under the hood. Therefore, you can use the same properties as the Popover component in addition to the properties listed below.

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

​
Code

import * as Frigade from '@frigade/react';

const App = () => {
  return (
     <Frigade.Tour
       flowId='flow_laJhda4sgJCdsCy6'
     />
  );
};

​
Flow Configuration

The following props are available in the YAML Config defined in the Frigade Dashboard:

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[].primaryButton
object
Config for the primary button in this step.
steps[].primaryButton.action
string
Primary button action. (defaults to step.complete).
Possible values: flow.back, flow.complete, flow.forward, flow.restart, flow.skip, flow.start, step.complete, step.reset, step.start
steps[].primaryButton.target
string
Primary button URI target (defaults to _self).
steps[].primaryButton.title
string
Primary button title. If omitted, the primary button will not be shown.
steps[].primaryButton.uri
string
Primary button URI.
steps[].primaryButtonTitle
string
Deprecated: use primaryButton.title instead. The title of the primary button
steps[].primaryButtonUri
string
Deprecated: use primaryButton.uri instead. The url to open when the primary button is clicked
steps[].primaryButtonUriTarget
string
Deprecated: use primaryButton.target instead. 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[].secondaryButton
object
Config for the secondary button in this step.
steps[].secondaryButton.action
string
Secondary button action. (defaults to step.complete).
Possible values: flow.back, flow.complete, flow.forward, flow.restart, flow.skip, flow.start, step.complete, step.reset, step.start
steps[].secondaryButton.target
string
Secondary button URI target (defaults to _self).
steps[].secondaryButton.title
string
Secondary button title. If omitted, the secondary button will not be shown.
steps[].secondaryButton.uri
string
Secondary button URI.
steps[].secondaryButtonTitle
string
Deprecated: use secondaryButton.title instead. The title of the secondary button
steps[].secondaryButtonUri
string
Deprecated: use secondaryButton.uri instead. The url to open when the secondary button is clicked
steps[].secondaryButtonUriTarget
string
Deprecated: use secondaryButton.target instead. The target of the secondary 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[].completionCriteria
string
Targeting that automatically completes the step. E.g.: user.property(‘connectedBank’) == true
steps[].startCriteria
string
Targeting that automatically blocks the step from starting until it becomes true. E.g.: user.property(‘connectedBank’) == true
steps[].visibilityCriteria
string
Targeting that automatically shows the step when it becomes true. E.g.: user.property(‘connectedBank’) == true
steps[].props
object
Override the default UI props for the corresponding component
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

​
align

Optional align: "center" | "end" | "start" | "after" | "before"

How to align the Tooltip relative to the anchor. Uses the same notation as the align property in Radix Popover.

​
alignOffset

Optional alignOffset: number

​
arrowPadding

Optional arrowPadding: number

​
as

Optional as: ElementType<any, keyof IntrinsicElements>

Optional component type to wrap the child components in. Use theas={Box} component for inline placement or the as={Dialog} component for modal placement. If you want to wrap the Flow in a custom component (such as your own modal), you can pass the custom component here.

​
avoidCollisions

Optional avoidCollisions: boolean

​
collisionBoundary

Optional collisionBoundary: Element | Element[]

​
collisionPadding

Optional collisionPadding: number | Partial<Record<"bottom" | "left" | "right" | "top", number>>

​
css

Optional css: Interpolation<Theme>

​
dismissible

Optional dismissible: boolean

Whether the Flow is dismissible or not

​
flowId

flowId: string

The Flow ID to render. You can find the Flow ID in the Frigade dashboard.

​
forceMount

Optional forceMount: boolean

If true, the Flow will be mounted even if it has already been completed or dismissed. However, if the user does not match the Flow’s targeting, the Flow will not be mounted.

​
hideWhenDetached

Optional hideWhenDetached: boolean

Optional modal: boolean

The modality of the tooltip. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.

​
onCloseAutoFocus

Optional onCloseAutoFocus: (event: Event) => void

Event handler called when auto-focusing on close. Can be prevented.

Parameters

NameType
eventEvent

Returns

void

​
onComplete

Optional onComplete: FlowHandlerProp

Handler for when the Flow is completed. If this function a promise that evaluates to false, the Flow will not be marked as completed.

​
onDismiss

Optional onDismiss: FlowHandlerProp

Handler for when the Flow is dismissed. If this function a promise that evaluates to false, the Flow will not be marked as dismissed.

​
onEscapeKeyDown

Optional onEscapeKeyDown: (event: KeyboardEvent) => void

Event handler called when the escape key is down. Can be prevented.

Parameters

NameType
eventKeyboardEvent

Returns

void

​
onFocusOutside

Optional onFocusOutside: (event: FocusOutsideEvent) => void

Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.

Parameters

NameType
eventFocusOutsideEvent

Returns

void

​
onInteractOutside

Optional onInteractOutside: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.

Parameters

NameType
eventPointerDownOutsideEvent | FocusOutsideEvent

Returns

void

​
onOpenAutoFocus

Optional onOpenAutoFocus: (event: Event) => void

Event handler called when auto-focusing on open. Can be prevented.

Parameters

NameType
eventEvent

Returns

void

​
onOpenChange

Optional onOpenChange: (open: boolean) => void

Parameters

NameType
openboolean

Returns

void

​
onPointerDownOutside

Optional onPointerDownOutside: (event: PointerDownOutsideEvent) => void

Event handler called when the a pointerdown event happens outside of the DismissableLayer. Can be prevented.

Parameters

NameType
eventPointerDownOutsideEvent

Returns

void

​
onPrimary

Optional onPrimary: StepHandlerProp

Handler for when primary button is clicked. If this function a promise that evaluates to false, the step will not be automatically completed when clicked.

​
onSecondary

Optional onSecondary: StepHandlerProp

Handler for when secondary button is clicked. If this function a promise that evaluates to false, the step will not be automatically completed when clicked.

​
side

Optional side: "bottom" | "left" | "right" | "top"

​
sideOffset

Optional sideOffset: number

​
spotlight

Optional spotlight: boolean

Whether to show a spotlight behind the anchor. This will darken the rest of the page and highlight the anchor.

​
sticky

Optional sticky: "always" | "partial"

​
style

Optional style: CSSProperties

​
updatePositionStrategy

Optional updatePositionStrategy: "always" | "optimized"

​
variables

Optional variables: Record<string, unknown>

Variables to pass to the Flow. You can use variables in the Flow configuration to customize copy. For instance, you can use title: Hello, ${name}! in the Flow configuration and pass variables={{name: 'John'}} to customize the copy.

​
zIndex

Optional zIndex: string | number

The Z-index of the tooltip. Defaults to auto.

View definition

NPS Survey