All of Frigade’s Javascript SDKs share the same Flow Step type definition which is defined in the Frigade JS SDK.

The Step type is a representation of a step in a Flow.

It contains all the data and methods needed to build custom components with Frigade and to interact with the Frigade API without writing a single custom network call.

​

Properties

​

$state

$state: Object

The state of the step for the given user in the given Flow. Example:

{
 completed: true,
 skipped: false,
 started: true,
 visible: true,
 blocked: false,
 lastActionAt: "2014-01-01T23:28:56.782Z"
}

​

autoMarkCompleted

Optional autoMarkCompleted: boolean

Automatically mark the step as completed when the primary button is clicked. Default is false.

​

backButtonTitle

Optional backButtonTitle: string

Text on button if a back button is present.

​

complete

complete: (#propertypayload), optimistic?: boolean) => Promise<void>

Marks the step completed.

Param

If true, the step will be marked as completed without waiting for the API and validation of any targeting rules.

Parameters

Returns

Promise<void>

​

completionCriteria

Optional completionCriteria: string

Criteria that needs to be met for the step to complete. Completion criteria uses Frigade’s Targeting Engine to determine if the step should be completed.

​

dismissible

Optional dismissible: boolean

Whether the step is dismissible (for instance, tooltips or other non-essential steps).

​

flow

flow: Flow

Reference to this step’s parent Flow

​

iconUri

Optional iconUri: string

Icon url to be shown for components supporting icons.

​

id

id: string

​

imageUri

Optional imageUri: string

Image url to be shown for components supporting image.

​

onStateChange

onStateChange: (callback: (step: FlowStep, previousStep?: FlowStep) => void) => void

Event handler called when this step’s state changes.

Parameters

Returns

void

​

order

order: number

Order of the step in the Flow.

​

primaryButton

Optional primaryButton: Object

Config for the primary button in this step

| action? | StepAction | Primary button action. (defaults to step.complete) | | target? | string | Primary button URI target (defaults to _self). | | title? | string | Primary button title. If omitted, the primary button will not be shown. | | uri? | string | Primary button URI. |

​

primaryButtonTitle

Optional primaryButtonTitle: string

Deprecated

Use primaryButton.title instead

Description

Primary button title. If omitted, the primary button will not be shown.

​

primaryButtonUri

Optional primaryButtonUri: string

Deprecated

Use primaryButton.uri instead

Description

Primary button URI.

​

primaryButtonUriTarget

Optional primaryButtonUriTarget: string

Deprecated

Use primaryButton.target instead

Description

Primary button URI target (defaults to _self).

​

progress

Optional progress: number

Progress if the step is tied to another Frigade Flow through completionCriteria.

​

removeStateChangeHandler

removeStateChangeHandler: (callback: (step: FlowStep, previousStep?: FlowStep) => void) => void

Removes the given callback from the list of event handlers.

Parameters

Returns

void

​

reset

reset: () => Promise<void>

Resets the step (useful for undoing a finished step).

Returns

Promise<void>

​

secondaryButton

Optional secondaryButton: Object

Config for the secondary button in this step

| action? | StepAction | Secondary button action. (defaults to step.complete) | | target? | string | Secondary button URI target (defaults to _self). | | title? | string | Secondary button title. If omitted, the secondary button will not be shown. | | uri? | string | Secondary button URI. |

​

secondaryButtonTitle

Optional secondaryButtonTitle: string

Deprecated

Use secondaryButton.title instead

Description

Secondary button title. If omitted, the secondary button will not be shown.

​

secondaryButtonUri

Optional secondaryButtonUri: string

Deprecated

Use secondaryButton.uri instead

Description

Secondary button URI.

​

secondaryButtonUriTarget

Optional secondaryButtonUriTarget: string

Deprecated

Use secondaryButton.target instead

Description

Secondary button URI target (defaults to _self)

​

skip

skip: (#propertypayload), optimistic?: boolean) => Promise<void>

Marks the step skipped. Works similar to step.complete()

Parameters

Returns

Promise<void>

​

skippable

Optional skippable: boolean

If true, the step will be marked as completed when the secondary button is clicked.

​

start

start: (#propertypayload)) => Promise<void>

Marks the step started. This will move the current step index to the given step.

Parameters

Returns

Promise<void>

​

startCriteria

Optional startCriteria: string

Criteria that needs to be met for the step to start. Start criteria uses Frigade’s Targeting Engine to determine if the step should be started.

​

stepName

Optional stepName: string

Name of the step when shown in a list view.

​

subtitle

Optional subtitle: string

Subtitle of the step.

​

title

Optional title: string

Title of the step.

​

videoUri

Optional videoUri: string

Video url to be shown for components supporting video.

​

visibilityCriteria

Optional visibilityCriteria: string

Criteria that needs to be met for the step to be visible. Visibility criteria uses Frigade’s Targeting Engine to determine if the step should be visible.

View definition