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

NameTypeDescription
properties?PropertyPayload-
optimistic?booleanIf true, the step will be marked as completed without waiting for the API and validation of any targeting rules.

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

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

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

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

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

NameType
properties?PropertyPayload
optimistic?boolean

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.

Parameters

NameType
properties?PropertyPayload

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